标签：常用 oldArray NaN item newArray 数组 九种 true Proxy

常用数组去重（九种）

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。