JS配列の重い11の方法(まとめ編)

以下の例はこの配列をベースにしています.

var arr = [
  1, 1, 15, 15,
  'true', 'false',true,
  false, 'false', true, 0, 
  undefined,  null, null, 
  NaN, 'NaN', NaN, 'NaN', false, undefined,
  0, 'a', 'a', 'true', 
  {'name': 'jack', 'age': 18},
  {'age': 18, 'name': 'jack'},
  {'name': 'lucy', 'age': 20},
  {'name': 'lucy', 'age': 22}
];

1.セット
短所:対象は重くなりません.

function unique (arr) {
  return Array.from(new Set(arr))
}
console.log(unique(arr)) // length:16

// [1,15,"true","false",true,false,0,undefined,null,NaN,"NaN","a",{"name":"jack","age":18},{"age":18,"name":"jack"},{"name":"lucy","age":20},{"name":"lucy","age":22}]

または

[...new Set(arr)] //        

2.Map
短所:対象は重くなりません.

function unique(arr) {
  let map = new Map();
  let array = new Array();  //         
  for (let i = 0; i < arr.length; i++) {
    if(map.has(arr[i])) {  //     key 
      map.set(arr[i], true); 
    } else { 
      map.set(arr[i], false);   //      key 
      array .push(arr[i]);
    }
  } 
  return array ;
}

console.log(unique(arr)) // length: 16

// [1,15,"true","false",true,false,0,undefined,null,NaN,"NaN","a",{"name":"jack","age":18},{"age":18,"name":"jack"},{"name":"lucy","age":20},{"name":"lucy","age":22}]

3.for+splice
短所:対象が重くなりません.NaNは重くなりません.

function unique(arr){            
  for(var i = 0; i < arr.length; i++){
      for(var j = i + 1; j < arr.length; j++){
          if(arr[i] === arr[j]){
              arr.splice(j,1);
              j--;
          }
      }
  }
  return arr;
}

console.log(unique(arr)) // length: 17

// [1,15,"true","false",true,false,0,undefined,null,NaN,"NaN",NaN, "a",{"name":"jack","age":18},{"age":18,"name":"jack"},{"name":"lucy","age":20},{"name":"lucy","age":22}]

4.for+indexOf
短所:対象が重くなりません.NaNは重くなりません.

function unique(arr) {
  if (!Array.isArray(arr)) {
    console.log('type error!')
    return
  }
  var array = [];
  for (var i = 0; i < arr.length; i++) {
      if (array .indexOf(arr[i]) === -1) {
          array .push(arr[i])
      }
  }
  return array;
}

console.log(unique(arr)) // length: 17

// [1,15,"true","false",true,false,0,undefined,null,NaN,"NaN",NaN, "a",{"name":"jack","age":18},{"age":18,"name":"jack"},{"name":"lucy","age":20},{"name":"lucy","age":22}]

5.for+includes
短所:対象は重くなりません.

function unique(arr) {
  if (!Array.isArray(arr)) {
      console.log('type error!')
      return
  }
  var array =[];
  for(var i = 0; i < arr.length; i++) {
    if( !array.includes( arr[i]) ) {
        array.push(arr[i]);
    }
  }
  return array
}

console.log(unique(arr)) // length: 16

// [1,15,"true","false",true,false,0,undefined,null,NaN,"NaN","a",{"name":"jack","age":18},{"age":18,"name":"jack"},{"name":"lucy","age":20},{"name":"lucy","age":22}]

6.for+sort
短所:数字/アルファベットの並べ替えを有効にします.そうでないと、特定の条件に入ってきて並べ替える必要があります.

function unique(arr) {
  if (!Array.isArray(arr)) {
      console.log('type error!')
      return;
  }
  // todo         
  arr = arr.sort()
  var arrry= [arr[0]];
  for (var i = 1; i < arr.length; i++) {
      if (arr[i] !== arr[i-1]) {
          arrry.push(arr[i]);
      }
  }
  return arrry;
}

console.log(unique(arr)) // length: 21

7.filter+hasOwnProperty
短所:objectタイプを全部取り除いて、一つだけ残します.

function unique(arr) {
    var obj = {};
    return arr.filter(function(item, index, arr){
        console.log('typeof item + item', typeof item + item，'>>>>', obj.hasOwnProperty(typeof item + item))
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}
console.log(unique(arr)) // length: 13

8.filter+indexOf
短所:対象が重くなりません.NaNとNaNを識別できません.

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //    ，            ==     ，        
    return arr.indexOf(item, 0) === index;
  });
}
console.log(unique(arr)) // length: 15

// [1,15,"true","false",true,false,0,undefined,null,"NaN","a",{"name":"jack","age":18},{"age":18,"name":"jack"},{"name":"lucy","age":20},{"name":"lucy","age":22}]

9.reduce+includes
短所:対象は重くなりません.

function unique(arr){
  return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}

console.log(unique(arr)); // length: 16

// [1,15,"true","false",true,false,0,undefined,null,NaN,"NaN","a",{"name":"jack","age":18},{"age":18,"name":"jack"},{"name":"lucy","age":20},{"name":"lucy","age":22}]

10.lodash工具庫
結果:完璧に重い
Lodash：一貫性、モジュール化、高性能JavaScriptユーティリティライブラリ

var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.async = true;
oScript.src="https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js";
document.body.append(oScript)

_.uniqWith(arr, _.isEqual); // length: 15

11.比較
方法
長所
欠点
セット
コード量が少ない
オブジェクトを重くしてはいけません
Map
オブジェクトを重くしてはいけません
for+splice
対象が重くなりません.NaNは重くなりません.
for+indexOf
対象が重くなりません.NaNは重くなりません.
for+includes
オブジェクトを重くしてはいけません
for+sort
数字/アルファベットが有効です.
特定の条件を入力して順序を付ける必要があります.
filter+hasOwnProperty
objectタイプを全部外して、一つだけ残します.
filter+indexOf
対象が重くなりません.NaNとNaNは識別できません.
reduce+includes
オブジェクトを重くしてはいけません
lodash.js
工具庫、使うのは便利で、完璧に重いです.
締め括りをつける
以上の方法は自由に組み合わせられます.対象の重量除去には特殊な処理が必要ですが、基本的には適用されます.配列にオブジェクトが添加されている場合、対象の種類だけを判断し、対象に対して特殊な処理をすればいいです.
配列オブジェクトの削除
以下の例はこの配列を前提としています.

var arr = [
  {'id': 1, 'name': 'jack', 'age': 18},
  {'id': 1, 'age': 18, 'name': 'jack'},
  {'id': 2, 'name': 'lucy', 'age': 20},
  {'id': 3, 'name': 'lucy', 'age': 22},
  {'id': 3, 'name': 'lucy', 'age': 22},
  {'id': 4, 'name': 'lucy', 'age': 22}
]

1.reduce

function unique(arr){
  let obj = {}

  return arr.reduce((prev,cur) => {
    obj[cur.id] ? "" : obj[cur.id] = true && prev.push(cur);
    return prev
  },[]); //    prev        ，          
}

console.log(unique(arr));

2.Map

function unique(arr){
    let map = new Map();
    for (let item of arr) {
        if (!map.has(item.id)) {
            map.set(item.id, item);
        }
    }
    return [...map.values()];
}
console.log(unique(arr));

3.Map+Object.values()

function unique(arr){
  let obj = {}
  arr.map(item => {
    obj[item.id] = item
  })
  console.log(obj)
  return Object.values(obj)
}

console.log(unique(arr));

4.二重循環

var temp = []
function unique(arr){
  arr.forEach(function(a) {
      var check = temp.every(function(b) {
          return a.id !== b.id;
      })
      check ? temp.push(a) : ''
  })
  return temp;
}

console.log(unique(arr));

5.発泡体の並べ替え方法

function unique(arr){
  for (var i = 0; i < arr.length - 1; i++) {
      for (var j = i + 1; j < arr.length; j++) {
          if (arr[i].id == arr[j].id) {
              arr.splice(j, 1);
              j--;
          }
      }
  }
  return arr;
}

console.log(unique(arr));