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のパスワードを忘れた場合のベストな対処法の簡単な分析

序文MySQL に精通している読者は、MySQL が非常に迅速に更新されることに気付くかもしれません...

Docker 上で Redis クラスターを構築する

目次1. イメージをプルする2. Redisコンテナを作成する3. コンテナを起動するためにクラスタ...

ウェブページ読み込み時に左右にジャンプする原因の分析と解決

最近、ウェブサイトを設計するときにこの問題に遭遇しています。メンバーセンターを設計し、コンテンツを ...

HTML の大なり、小なり、スペース、引用符などでよく使用されるエスケープ コードのリスト。

表は以下のとおりです。 HTMLソースコード結果を表示説明する&lt; <未満記号また...

HiveメタデータをMySQLに設定するプロセス全体

Hiveのインストールディレクトリで、confディレクトリに入り、hive-site.xmlファイル...

Vueバインディングオブジェクトと配列変数を変更した後にレンダリングできない問題の解決策

プロジェクトシナリオ:ページ表示には <ul> タグがあります。リストデータを動的に表示...

Ubuntu 20.04 CUDA & cuDNN のインストール方法 (グラフィカル チュートリアル)

CUDA インストール cuda をダウンロードサポートされているcudaバージョンを表示するには...

一般的なDocker Composeコマンドの詳細な説明

1. Docker Compose の使用方法は docker コマンドの使用方法と非常に似ています...

MySQL infobrightのインストール手順

目次1. 次のように、「rpm -ivh インストール パッケージ」コマンドを使用して rpm パッ...

JavaScript プロトタイプとプロトタイプチェーンの深い理解

目次1. プロトタイプとは何ですか? 2. プロトタイプ__プロト__ 4. コンストラクター5. ...

MySQL の連結で複数の一重引用符と三重引用符を使用する際の問題

文字列を動的に連結する場合、文字連結を使用することが多いです。次のような連結の引用符の意味がわかりま...

MySQL の垂直テーブルを水平テーブルに変換する方法と最適化のチュートリアル

1. 縦型テーブルと横型テーブル垂直テーブル: テーブル内のフィールドとフィールド値はキーと値の形式...

Ubuntu20のtzselect設定時間失敗問題、Raspberry Piサーバ(推奨)

2 日前、Raspberry Pi サーバーを Ubuntu 20 にアップグレードしました。今日...

Tomcatソースコードをideaにインポートする方法

目次1. Tomcatコードをダウンロードする2. ダウンロード後のディレクトリ構造3. ソースコー...