JavaScript 配列重複排除問題の詳細な研究

JavaScript 配列重複排除問題の詳細な研究

序文 👀

アレイの重複排除は非常に一般的な問題です。一般的な問題なので、これについて学ぶ必要があります。

やり方がわからなかったら恥ずかしいので〜へへ

リサーチを始めましょう🐱‍🏍

オリジナル🧶

配列の重複を排除するための私の最初のアイデアは、新しい配列を定義し、2 層の for ループを完了し、データが初めて出現する場合はそれを新しい配列にプッシュし、データが繰り返される場合はそれを分割し、j の値が res の長さに等しくなるようにしてデータが一意であることを確認し、最後に新しい配列を返すというものでした。

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

関数 unique(arr){
	var 変数 = []
	for(var i = 0; i < arr.length; i++){
		for(var j = 0; j < res.length; j ++){
			もしarr[i] === res[j]であれば
				壊す
			}
		}
		// データが初めて出現する場合、上記の for 文を実行した後、j の値は res の長さと等しくなるはずです if(j === res.length){
			res.push(arr[i])
		}
	}
	res を返します。
}

console.log(ユニーク(arr));

indexOf を使用した元の方法の最適化 ✍

まず、indexOf について簡単に見てみましょう。

indexOf(item,start) メソッドは、配列内の指定された要素の位置を返します。

このメソッドは、配列を最初から最後まで検索して、対応する要素が含まれているかどうかを確認します。検索は配列の先頭または配列の先頭(開始パラメータが指定されていない場合)から開始されます。項目が見つかった場合、項目が最初に出現した位置が返されます。開始位置のインデックスは 0 です。

指定された要素が配列内に見つからない場合は -1 が返されます。

これを見ると、私たちが何を利用しているかがわかりますよね? はい、太字の文です:指定された要素が配列内に見つからない場合は、-1 が返されます

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

関数 unique(arr){
	var 変数 = []
	for(var i = 0; i < arr.length; i++){
		res.indexOf(arr[i]) === -1の場合{
			res.push(arr[i])
		}
	}
	res を返します。
}

console.log(ユニーク(arr));

再度最適化、フィルター方法 🎉

名前が示すように、filter はフィルタリングを意味します。このメソッドは新しい配列を作成します。新しい配列の要素は、指定された配列内の条件を満たすすべての要素をチェックすることによって取得されます。

アイデア: ループのレイヤーの代わりにフィルターを indexOf と組み合わせて使用​​し、フィルタリング効果を実現して重複排除された配列を直接返します。

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

関数 unique(arr){
	var res = arr.filter(function(item,index,arr){
		arr.indexOf(item) === インデックスを返します
	})
	res を返します。
}
console.log(ユニーク(arr));

考え方の変化?整列した配列になる✨

Lecture Hall を数日間プレイしている皆さんは、このような感覚を味わったことがあるのではないでしょうか。問題文に配列が出てくると、すぐに目が前を見て、それが順序付き配列なのか、順序なし配列なのかを確認します。

この質問に戻ると、重複排除する配列を順序付けし、重複するデータは互いに隣接している必要があります。変数を使用して前の要素の値を格納し、ループして現在の値が前の要素の値と同じかどうかを判断します。同じでない場合は、res に追加します。

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

関数 unique(arr){
	var 変数 = []
	var プレ
	arr = arr.sort()
	for(var i = 0; i < arr.length; i++){
		if(!i || pre !== arr[i]){
			res.push(arr[i])
		}
		前 = arr[i]
	}
	res を返します。
}

console.log(ユニーク(arr));

再度最適化してフィルタリング🧨

ここで、filter を使用すると並べ替えを書き換えて、より簡潔にできることに気付きました。コードを直接見てみましょう。

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

関数 unique(arr){
	var res = arr.sort().filter(function(item,index,arr){
		戻り値 !index || item !== arr[index - 1]
	})
	res を返します。
}

console.log(ユニーク(arr));

ES6、Set が登場します 🧸

ES6 には多くの利点がありますが、その中でも map と set は特に優れています。

マップ オブジェクトはキーと値のペアを格納します。任意の値 (オブジェクトまたはプリミティブ) をキーまたは値として使用できます。

Set オブジェクトを使用すると、プリミティブ値でもオブジェクト参照でも、あらゆるタイプの一意の値を格納できます。

したがって、Set のこの機能を使用して重複排除処理を実行できます。

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

関数 unique(arr){
	Array.from(new Set(arr)) を返します
}

console.log(ユニーク(arr));

注意: Set はオブジェクトなので、返すには配列に変換する必要があります。

分割代入を理解していれば、もう少し単純化できます🧵

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

関数 unique(arr){
	[...新しいSet(arr)]を返す
}

console.log(ユニーク(arr));

分割代入についてさらに詳しく知りたい場合は、まずこちらもお読みください: 分割代入演算子の理解と応用

前回の勉強、記録したメモ🎨

これからも素晴らしいままでいてください(矢印機能)🏆

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
var unique = (arr) => [...新しいSet(arr)]
console.log(ユニーク(arr));

最後に📖

矢印関数を使用して、最初の数行のコードから最後の 1 行のコードまで、継続的な学習によってのみ、よりエレガントで簡潔なコードを記述できることを示すのに十分です。

JavaScript 配列重複排除に関するこの記事はこれで終わりです。JavaScript 配列重複排除に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JS配列重複排除の詳細
  • JavaScript配列の重複排除のいくつかの方法についての詳細な説明
  • JavaScript 配列重複排除ソリューション
  • jsは配列の平坦化を実装します
  • JavaScript データのフラット化の詳細な説明
  • JavaScript インタビュー: 配列の平坦化メソッドを実装する方法
  • 配列をフラット化する 5 つの JavaScript の方法
  • JavaScript 配列の重複排除とフラット化関数の紹介

<<:  Dockerを使用してシンプルなJava開発およびコンパイル環境を構築する方法の詳細な説明

>>:  HTML における rel="nofollow" の役割と rel 属性の使用を分析する

推薦する

mysql 8.0.20 winx64.zip 圧縮版のインストールと設定方法のグラフィックチュートリアル

mysql 8.0.20 winx64.zip圧縮版のインストールチュートリアルは以下のように記録さ...

URL 内の特殊記号の意味を知っていますか?

1.# # は Web ページ内の場所を表します。右側の文字はその位置の識別子です。たとえば、ht...

mysql 8.0.12 winx64 のダウンロードとインストールのチュートリアル

MySQL 8.0.12のダウンロードとインストールのチュートリアルは参考までに、具体的な内容は次の...

MySQL 5.7.23 winx64 のインストールと設定方法のグラフィックチュートリアル (win10 の場合)

この記事はMySQL 5.7.23 winx64のインストールチュートリアルを記録します。具体的な内...

JavaScript での HTML キャンバスとページ ストレージ テクノロジの使用に関する詳細な説明

目次1. JavaScriptはHTMLでキャンバスを使用する2. ページストレージ技術1. Jav...

Linux での Apache サービスの展開と構成

目次1 Apacheの役割2 Apacheのインストール3. Apacheを有効にする4 Apach...

Linux の traceroute コマンドの使用方法の詳細な説明

Traceroute を使用すると、情報がコンピュータからインターネットの反対側のホストまでたどるパ...

Vueは画像のドラッグと並べ替えを実装します

この記事の例では、画像のドラッグと並べ替えを実装するためのVueの具体的なコードを参考までに共有して...

Docker-compose インストール yml ファイルの設定方法

目次1. オフラインインストール2. オンラインインストール3. アンインストール4. ymlファイ...

mysql はフィールドコンテンツの一部を置き換え、mysql は関数 replace() を置き換えます。

[mysql] replace の使用方法 (フィールドの内容の一部を置き換える) [mysql]...

ネイティブWeChatアプレット開発におけるreduxの使用の詳細な説明

前提複雑なシナリオでは、複数の異なるページ間で大量のデータを使用したり変更したりする必要があります。...

モバイルプラットフォーム開発におけるメタタグの適用の詳細な説明

デスクトップ プラットフォームの Web レイアウトのメタ タグは誰もがよく知っています。これは常に...

Linux システムを起動時に自動的にスクリプトを実行するように設定する方法の例

序文みなさんこんにちは。私は梁旭です。職場では、システムの起動後にスクリプトやサービスを自動的に開始...

3列レイアウトを実現するCSS3フレキシブルボックスフレックス

タイトルの通り、高さは既知で、左と右の列の幅は 300 ピクセル、中央は適応型です。弾性ボックス自体...

Vue プロジェクトで Baidu Map API を使用する方法

目次1. Baidu Map Open Platformにアカウントを登録してログインする2. 必要...