常用数组去重（九种）

常用数组去重（九种）

项目中数组去重应该是随处可见，今天稍作整理了下（vue）

data() {
   return {
      oldArray: ["我们的","我们的",'1','abc','abc', 1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, {},{}]
   };
}

方法一：两个for循环，然后splice去重（ES5中最常用）//NaN和{}没有去重

for() {
    for(var i=0; i<this.oldArray.length; i++){
        for(var j=i+1; j<this.oldArray.length; j++){
            //第一个等同于第二个，splice方法删除第二个
                if(this.oldArray[i] === this.oldArray[j]){
                    this.oldArray.splice(j,1);
                    j--;
                }
            }
        }
        console.log(this.oldArray); // {0: '我们的', 1: '1', 2: 'abc', 3: 1, 4: 'true', 5: true, 6: 15, 7: false, 8: undefined, 9: null, 10: NaN, 11: NaN, 12: 'NaN', 13: 0, 14: {…}, 15: {…}}
}

方法二：indexof NaN和{}没有去重

indexOf() {
      const newArray = [];
      this.oldArray.forEach((item) => {
        return newArray.indexOf(item) === -1 ? newArray.push(item) : ''
      })
      console.log(newArray); // ['我们的', '1', 'abc', 1, 'true', true, 15, false, undefined, null, NaN, NaN, 'NaN', 0, Proxy, Proxy]
},

方法三： Set去重：不考虑兼容性，这种去重的方法代码最少。(ES6写法，现在利用babel，基本都可以兼容了) 无法去掉“{}”空对象

set() {
      const newArray = Array.from(new Set(this.oldArray)) || [...new Set(this.oldArray)];
      console.log(newArray); // ['我们的', '1', 'abc', 1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, Proxy, Proxy]
},

方法三：indexof 无法去掉“{}和NaN”空对象

indexOf() {
      const newArray = [];
      this.oldArray.forEach((item) => {
        return newArray.indexOf(item) === -1 ? newArray.push(item) : ''
      })
      console.log(newArray); // ['我们的', '1', 'abc', 1, 'true', true, 15, false, undefined, null, NaN, NaN, 'NaN', 0, Proxy, Proxy]
},

方法四：利用 includes {}没有去重

includes() {
      const newArray = [];
      this.oldArray.forEach((item) => {
        return newArray.includes( item) ? '' :newArray.push(item);
      })
      console.log(newArray); // ['我们的', '1', 'abc', 1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, Proxy, Proxy]
},

方法五：利用 filter {}没有去除 ，NaN合并成字符串

filter() {
      const newArray = this.oldArray.filter((item, index, arr) => {  //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
        return arr.indexOf(item, 0) === index;
      })
      console.log(newArray); // ['我们的', '1', 'abc', 1, 'true', true, 15, false, undefined, null, 'NaN', 0, Proxy, Proxy]
},

方法六：利用 hasOwnProperty 注意：如果两个对象不一样，不能比较对象里的内容

hasOwnProperty() {
      const obj = {};
      const newArray = this.oldArray.filter((item) => {
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
      })
      console.log(newArray); // ['我们的', '1', 'abc', 1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, Proxy]
},

方法七：利用reduce+includes {}没有去除

reduce() {
      const newArray = this.oldArray.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
      console.log(newArray); // ['我们的', '1', 'abc', 1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, Proxy, Proxy]
},

方法八：利用Map数据结构去重,利用Map的两个方法has和set来判定数组中的每个元素（循环判定是否有该元素，没有的时候，set该元素为true。新数组再添加）在输出一下构造函数Map。 {}没有去除

map() {
      let map = new Map();
      const newArray = [];
      for (let i = 0; i < this.oldArray.length; i++) {
        if (!map.has(this.oldArray[i])) {
          map.set(this.oldArray[i], true);
          newArray.push(this.oldArray[i]);
        }
      }
      console.log(newArray); // ['我们的', '1', 'abc', 1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, Proxy, Proxy]
},

方法九：利用sort方法 {}和NaN没有去除

sort() {
        //存入排序过后的数组
        let formArr = this.oldArray.sort();
        //定义一个新数组，并使新数组中的第一个元素等于原数组中的第一个元素
        let newArray = [formArr[0]];
        for (let i = 1; i < formArr.length; i++) {
            if (formArr[i] !== formArr[i - 1]) {
                newArray.push(formArr[i]);
            }
        }
        console.log(newArray); // [0, '1', 1, 15, NaN, NaN, 'NaN', Proxy, Proxy, 'abc', false, null, 'true', true, '我们的', undefined]
},

如果有更好，或者不一样的方法，欢迎交流！