其他分享
首页 > 其他分享> > 常用数组去重(九种)

常用数组去重(九种)

作者:互联网

常用数组去重(九种)

项目中数组去重应该是随处可见,今天稍作整理了下(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]
},

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

标签:常用,oldArray,NaN,item,newArray,数组,九种,true,Proxy
来源: https://blog.csdn.net/MoXinXueWEB/article/details/122347414