序文 👀アレイの重複排除は非常に一般的な問題です。一般的な問題なので、これについて学ぶ必要があります。 やり方がわからなかったら恥ずかしいので〜へへ リサーチを始めましょう🐱🏍オリジナル🧶配列の重複を排除するための私の最初のアイデアは、新しい配列を定義し、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Dockerを使用してシンプルなJava開発およびコンパイル環境を構築する方法の詳細な説明
>>: HTML における rel="nofollow" の役割と rel 属性の使用を分析する
序文MySQL に精通している読者は、MySQL が非常に迅速に更新されることに気付くかもしれません...
目次1. イメージをプルする2. Redisコンテナを作成する3. コンテナを起動するためにクラスタ...
最近、ウェブサイトを設計するときにこの問題に遭遇しています。メンバーセンターを設計し、コンテンツを ...
表は以下のとおりです。 HTMLソースコード結果を表示説明する< <未満記号また...
Hiveのインストールディレクトリで、confディレクトリに入り、hive-site.xmlファイル...
プロジェクトシナリオ:ページ表示には <ul> タグがあります。リストデータを動的に表示...
CUDA インストール cuda をダウンロードサポートされているcudaバージョンを表示するには...
1. Docker Compose の使用方法は docker コマンドの使用方法と非常に似ています...
目次1. 次のように、「rpm -ivh インストール パッケージ」コマンドを使用して rpm パッ...
目次1. プロトタイプとは何ですか? 2. プロトタイプ__プロト__ 4. コンストラクター5. ...
文字列を動的に連結する場合、文字連結を使用することが多いです。次のような連結の引用符の意味がわかりま...
1. 縦型テーブルと横型テーブル垂直テーブル: テーブル内のフィールドとフィールド値はキーと値の形式...
2 日前、Raspberry Pi サーバーを Ubuntu 20 にアップグレードしました。今日...
インストールパス: /application/mysql-5.7.18 1. 事前準備MySQL 依...
目次1. Tomcatコードをダウンロードする2. ダウンロード後のディレクトリ構造3. ソースコー...