js配列を操作して重複を削除する方法

配列から重複を削除することはよくある質問であり、面接でも仕事でも、重複を削除する方法はたくさんありますが、どれが良いか、どちらが悪いかを判断することはできません。実際のニーズに応じて。この記事では、いくつかの一般的な重複削除方法と、その方法の長所、短所、および適用可能な状況をリストします。間違いがあれば修正してください。

1. 二重ループの比較方法:

const array = [1, NaN, '1', null, /a/, 1, undefined, null, NaN, '1', {}, /a/, [], undefined, {}, []];function uniqueByCirculation(arr) {
  const newArr = [];  let isRepet = false;    for(let i=0;i < arr.length; i++) {    for(let j=0;j < newArr.length; j++) {      if(arr[i] === newArr[j]) {
        isRepet = true;
      }
    };    if(!isRepet) {
      newArr.push(arr[i]);
    };
  };  return newArr;
}const uniquedArr = uniqueByCirculation(array);
console.log(uniquedArr);

結果: 結果から、Array、Object、および RegExp が保持され、NaN が重複排除されていないことがわかります。 === メカニズムは整っています。詳細については、お読みください:
このメソッドの時間計算量は O(NlogN) で、空間計算量は O(N) です。適用可能なケース: 単純なデータ型と少量のデータ。
2.indexOfメソッド:

const array = [1, NaN, '1', null, /a/, 1, undefined, null, NaN, '1', {}, /a/, [], undefined, {}, []];function uniqueByIndexOf(arr) {  return arr.filter((e, i) => arr.indexOf(e) === i);
}const uniquedArr = uniqueByIndexOf(array);console.log(uniquedArr);

結果:
結果から判断すると、NaNがなくなり、Array.indexOf(NaN)が残っているためです。は常に - 1 を返します。他の複合型によって返される値は常にそれ自体のインデックスと等しいため、この結果が得られます。この方法の時間と空間の複雑さは二重ループの場合と同じであり、適用できる状況も同様です。もちろん、この方法と比較すると、コードが短いため、この方法が最初に推奨されます。
3. Object[key]メソッド: (Personal Depth Enhanced version)

const array = [1, '1', NaN, 1, '1',NaN, -0, +0, 0, null, /a/, null, /a/, [], {}, [], {}, [1,2,[2,3]], [1,2,[2,3]], [1,2,[3,2]], undefined,
  {a:1,b:[1,2]}, undefined, {b:[2,1],a:1}, [{a:1},2], [2,{a:1}], {a:{b:1,d:{c:2,a:3},c:1},c:1,d:{f:1,b:2}}, {a:{b:1,d:{c:2,a:3},c:1},c:1,d:{f:1,b:2}}];function uniqueByObjectKey(arr) {
  const obj = {};  const newArr = [];  let key = '';
  arr.forEach(e => {    if(isNumberOrString(e)) { // 针对number与string和某些不适合当key的元素进行优化
      key = e + typeof e;
    }else {      if(e&&isObject(e)){  // 解决同key同value对象的去重
        e = depthSortObject(e);
      }
      key = JSON.stringify(e) + String(e); //JSON.stringify(e)为了应对数组或对象有子内容，String(e)为了区分正则和空对象{}
    }    if(!obj[key]) {
      obj[key] = key;
      newArr.push(e);
    }
  });  return newArr;
}function isNumberOrString(e){
  return typeof e === 'number' || typeof e === 'string';
}function isObject(e){
  return e.constructor === Object;
}function depthSortObject(obj){
    if(obj.constructor !== Object){      return;
    }    const newobj = {};    for(const i in obj){
        newobj[i] = obj[i].constructor === Object ? 
        sortObject(depthSortObject(obj[i])) : obj[i]; 
    } 
    return newobj;
}function sortObject(obj){
  const newObj = {};  const objKeys = Object.keys(obj)
  objKeys.sort().map((val) => {
      newObj[val] = obj[val];
  });  return newObj;
}const uniquedArr = uniqueByObjectKey(array);
console.log(uniquedArr);

結果: このメソッドは、キーを直接変更する関数に型判定を追加したため、「深い重複排除*」の結果を得ました。 object [original key] は数値と文字列を四捨五入するため、多くの型はキーとして使用できません。私は関数を作成する過程で JSON.stringify(/a/) に騙されました。 {}・~・の問題。後でキーを出力するときに、JSON.string(/a/) === '{}'、String([]) === "であることがわかったので、変換する必要がありました空間計算量は O (N)、時間計算量は O(N) で、深度を繰り返したい場合に適しています (*: 私自身も名前を繰り返したいので、オブジェクトは本質的に無秩序です。つまり、{a:1,b: 2} は {b:2,a:1} と同等である必要があるため、オブジェクトの内部 key:value が同じ)
4. ES6 Set メソッド:

const array = [1, NaN, '1', null, /a/, 1, undefined, null, NaN, '1', {}, /a/, [], undefined, {}, []];function uniqueByES6Set(arr) {
  return Array.from(new Set(arr))  // return [...new Ser(arr)]}const uniquedArr = uniqueByES6Set(array);
console.log(uniquedArr);

結果:
結果から、Array、Object、および RegExp が保持されることがわかります。このメソッドの原理は、順序付けされておらず、繰り返しのないデータ構造です。データの Set 構造の詳細については、Set and Map-Ruan Yifeng、空間複雑さ O(N)、時間複雑さの位置を参照してください。このメソッドは非常に高速です。複雑なオブジェクトを保持する場合は、これを直接使用するのが最適です
5 . ES6 Map メソッド:

const array = [1, NaN, '1', null, /a/, 1, undefined, null, NaN, '1', {}, /a/, [], undefined, {}, []];function uniqueByES6Map(arr) {
  const map = new Map();  return arr.filter(e => {    return map.has(e) ? false : map.set(e, 'map')
  })
}const uniquedArr = uniqueByES6Map(array);
console.log(uniquedArr);

結果: 結果は Set を使用した場合と同じで、主に ES6 の構造マップを使用して、キーをキーと値のグループにマッピングして保存できるのが特徴です。任意のタイプであり、データはハッシュ アドレスを通じてマッピングされます。ただし、アドレスの実際のコストは Set よりも高くなります。複雑なオブジェクトを保持する場合にも適しています。

この記事では、配列を重複排除する 5 つの一般的な方法を説明します。オブジェクト配列を削除する場合は、原則として、最初の 3 つの方法を使用します。 . もちろん、3 番目のタイプの結果は、少し変更すると次のものと同じになります

配列の重複排除は、面接や作業に関係します。 重複排除には多くの方法があります。この記事では、実際のニーズに応じて選択できます。また、その方法の長所と短所、および適用可能な場合についても説明します。

PHP 配列の削除。より高速な実装方法

JS 配列の重複排除方法の概要

JS 配列の重複排除の例の詳細な説明

以上がjs配列を操作して重複を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。