ホームページ > 記事 > ウェブフロントエンド > JSの配列から重複した要素を削除する方法は何ですか
今回は、JSで配列の重複要素を削除する方法と、JSで配列の重複要素を削除する際の注意事項を紹介します。以下は実際的なケースですので、見てみましょう。
jsで配列の重複排除を実装する方法を5つ紹介し、デモとソースコードも添付します。
1.配列メソッドを走査する
重複を削除する最も簡単な方法
実装アイデア: 新しい配列を作成し、受信配列を走査し、値が新しい配列にない場合は値を追加します。 注: 値が配列内にあるかどうかを判断するメソッド「indexOf」は、ECMAScript5 メソッドです。 IE8 以前ではサポートされていません。それよりも低いバージョンのブラウザと互換性のあるコードを作成する必要があります。ソース コードは次のとおりです。
2. オブジェクトのキーと値のペアのメソッド このメソッドは他のメソッドよりも高速に実行されますが、より多くのメモリを消費します
。
実装アイデア: 新しい js オブジェクトと新しい配列を作成します。受信した配列を走査するときに、値が js オブジェクトのキーであるかどうかを判断し、そうでない場合は、キーをオブジェクトに追加し、新しい配列に入れます。気をつけて: それが JS オブジェクト キーであるかどうかを判断するときに、受信したキーに対して "toString()" が自動的に実行されます。たとえば、a[1]、a["1"] などです。 。上記の問題を解決するには、やはり「indexOf」を呼び出す必要があります。 りー
3. 配列の添え字判定方法 それでも「indexOf」を呼び出す必要がありますが、パフォーマンスは方法 1 とほぼ同じです
実装アイデア
: 現在の配列内の i 番目の項目の最初の出現が現在の配列内の i ではない場合、それは i 番目の項目が重複していることを意味し、無視されます。それ以外の場合は、結果の配列を保存します。 りー
4. ソートされた近隣の削除方法 ネイティブ配列の「sort」メソッドのソート結果はあまり信頼できませんが、この欠点は順序に注意を払わない重複排除には影響しません。
実装アイデア
: 受信した配列をソートします。ソート後、同じ値が隣接し、トラバースするときに、前の値と重複しない値のみを新しい配列に追加します。 りー
5. 配列トラバーサル方法を最適化する 外国のブログ投稿によると、このメソッドの実装コードは非常にクールです。
実装アイデア
: 重複せずに右端の値を取得し、それを新しい配列に置きます。 (重複値が検出された場合、現在のループは終了し、最上位ループの次のラウンドの判定に入ります) // 最简单数组去重法
function unique1(array){
var n = []; //一个新的临时数组
//遍历当前数组
for(var i = 0; i < array.length; i++){
//如果当前数组的第i已经保存进了临时数组,那么跳过,
//否则把当前项push到临时数组里面
if (n.indexOf(array[i]) == -1) n.push(array[i]);
}
return n;
}
// 判断浏览器是否支持indexOf ,indexOf 为ecmaScript5新方法 IE8以下(包括IE8, IE8只支持部分ecma5)不支持
if (!Array.prototype.indexOf){
// 新增indexOf方法
Array.prototype.indexOf = function(item){
var result = -1, a_item = null;
if (this.length == 0){
return result;
}
for(var i = 0, len = this.length; i < len; i++){
a_item = this[i];
if (a_item === item){
result = i;
break;
}
}
return result;
}
}
この記事の事例を読んだ後は、この方法を習得したと思います。情報については、PHP 中国語 Web サイトの他の関連記事にも注目してください。
推奨読書:
laravel5.3 vueを使用してお気に入り機能を作成するvue.jsのデータ転送とデータ配布手順の詳細な説明以上がJSの配列から重複した要素を削除する方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。