JavaScript 配列から重複を削除する 6 つの方法のまとめ_JavaScript スキル

フロントエンドの面接官が準備しなければならない質問: Javascript 配列から重複を削除する方法。私の知る限り、Baidu、Tencent、Shanda などはすべてインタビューでこの質問をしています。 この質問は簡単そうに見えますが、実は隠れた危険を含んでいます。 このテストでは、この機能を理解するだけでなく、コンピューター プログラムの実行についての深い理解も試されます。

この目的を達成するために、合計 3 つのアルゴリズムを考え出しました:

Array.prototype.unique1 = function()
{
 var n = []; //一个新的临时数组
 for(var i = 0; i < this.length; i++) //遍历当前数组
 {
 //如果当前数组的第i已经保存进了临时数组，那么跳过，
 //否则把当前项push到临时数组里面
 if (n.indexOf(this[i]) == -1) n.push(this[i]);
 }
 return n;
}
Array.prototype.unique2 = function()
{
 var n = {},r=[]; //n为hash表，r为临时数组
 for(var i = 0; i < this.length; i++) //遍历当前数组
 {
 if (!n[this[i]]) //如果hash表中没有当前项
 {
  n[this[i]] = true; //存入hash表
  r.push(this[i]); //把当前数组的当前项push到临时数组里面
 }
 }
 return r;
}
Array.prototype.unique3 = function()
{
 var n = [this[0]]; //结果数组
 for(var i = 1; i < this.length; i++) //从第二项开始遍历
 {
 //如果当前数组的第i项在当前数组中第一次出现的位置不是i，
 //那么表示第i项是重复的，忽略掉。否则存入结果数组
 if (this.indexOf(this[i]) == i) n.push(this[i]);
 }
 return n;
}

1 番目と 3 番目のメソッドはどちらも配列の IndexOf メソッドを使用します。このメソッドの目的は、配列内で最初に出現する格納されたパラメーターを見つけることです。明らかに、このメソッドを実装するとき、JS エンジンはターゲットが見つかるまで配列を走査します。したがって、この関数は多くの時間を無駄にします。 2 番目の方法では、ハッシュ テーブルを使用します。出現箇所を添字の形式でオブジェクトに保存します。添字付き参照は、indexOf を使用して配列を検索するよりもはるかに高速です。

これら 3 つの方法の効率を判断するために、長さ 10,000 の乱数の配列を生成するテスト プログラムを作成し、いくつかの方法を使用して実行時間をテストしました。 結果は、2 番目の方法が他の 2 つの方法よりもはるかに高速であることを示しています。 ただし、メモリ使用量の観点からは、追加のハッシュ テーブルがあるため、2 番目の方法が使用される可能性が高くなります。これが時間の空間と呼ばれるものです。こちらはテストページですので、ぜひチェックしてみてください。

hpl 専門家の考えに従って、私は 4 番目のメソッドを書きました:

Array.prototype.unique4 = function()
{
 this.sort();
 var re=[this[0]];
 for(var i = 1; i < this.length; i++)
 {
 if( this[i] !== re[re.length-1])
 {
  re.push(this[i]);
 }
 }
 return re;
}

このメソッドの考え方は、まず配列を並べ替えてから、2 つの隣接する値を比較することです。 ソート時には JS ネイティブ ソート メソッドが使用されます。JS エンジンは内部でクイック ソートを使用する必要があります。 最終的なテスト結果では、このメソッドの実行時間は平均して 2 番目のメソッドの約 3 倍ですが、1 番目と 3 番目のメソッドよりもはるかに高速です。

5番目の方法

最近 [履歴の検索] 機能を使用し、indexOf メソッドを使用し始めました。このメソッドは ECMA5 でのみサポートされていますが、IE8 ではサポートされていません。

次のように、関数を自分で書くことができます (Array オブジェクトのメソッドはすべてプロトタイプ オブジェクトで定義されています)。

Array.prototype.unique = function(){
  var length = this.length;
  if(length <= 1){
    return this;
  }
  if(!Array.prototype.indexOf){    
    Array.prototype.indexOf = function(item){
      var l = this.length, i = 0, r = -1;
      if(l <= 0){
　　　　　　 　　return -1;
　　　　　　　}
      for(; i < l; i++){
        if(this[i] === item){
          r = i;
        }
      }
      return r;
    }
  }
  
  var result = []; //去重数组
  for(var i = 0; i < length; i++){
    if(result.indexOf(this[i]) === -1){
      result.push(this[i]);
    }
  }
  return result;
}

6番目の方法

配列型には重複排除メソッドがありません。配列から重複要素を削除したい場合は、自分で方法を見つける必要があります。

function unique(arr) {
  var result = [], isRepeated;
  for (var i = 0, len = arr.length; i < len; i++) {
    isRepeated = false;
    for (var j = 0, len = result.length; j < len; j++) {
      if (arr[i] == result[j]) {  
        isRepeated = true;
        break;
      }
    }
    if (!isRepeated) {
      result.push(arr[i]);
    }
  }
  return result;
}

一般的な考え方は、配列要素を 1 つずつ別の配列に転送することです。転送プロセス中に要素が重複しているかどうかを確認し、重複している場合はその要素を直接破棄します。ネストされたループからわかるように、この方法は非常に非効率です。ハッシュテーブル構造を使用して既存の要素を記録できるため、内部ループを回避できます。