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 をよろしくお願いいたします。