数组去重、过滤处理

本文介绍了三种常见的JavaScript数组去重与过滤方法:filter()与indexOf配合、forEach遍历与includes检查、Set数据结构的运用。还探讨了对象数组去重的不同策略,包括Map、filter、reduce和for循环。
摘要由CSDN通过智能技术生成

数组去重、过滤

都是基本数据类型

方法1:filter() + indexOf()

indexOf 返回第一个符合要求的元素索引;找到第一个全等于传入值的元素后,就会结束查找,返回索引;所以可以达到去重的效果

  const arr = [1, 1, "apple", 2, "apple", "banana", "banana"];
      const newArr = arr.filter((item, index, array) => {
        return array.indexOf(item) === index;
      });
      console.log(newArr);
方法2:forEach遍历+includes

includes也是全等,没找到则返回undefined

      let arr = [1, 2, 3, 6, 6, 6, 8, 8, 8];
      const re = [];
      arr.forEach((item) => {
        if (!re.includes(item)) {
          //或者 re.indexOf(item) === -1
          re.push(item);
        }
      });
方法3:Set + Array.from()或展开运算符es6
    const arr = [1, 1, "apple", 2, "apple", "banana", "banana"];
      const newArr = [...new Set(arr)];
      console.log(newArr);

或者这样使用Array.from()

    const arr = [1, 1, "apple", 2, "apple", "banana", "banana"];
      const newArr = Array.from(new Set(arr));
      console.log(newArr);

Array.from()方法可以将一个类数组对象或者可遍历对象转换成一个真正的数组

let arrayLike = {
    0: 'tom',  
    1: '65',
    2: '男',
    3: ['jane','john','Mary'],
    'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]

对象数组去重

eg:要去重同名项

      let arr = [
        {
          name: "如花",
          age: 10,
        },
        {
          name: "似玉",
          age: 20,
        },
        {
          name: "如花",
          age: 18,
        },
      ];
      const arr = uniqueFunc(arr, "name");  // uniqueFunc在下面
filter

&& 存在短路特性,只有前面一项为true才会执行后面的

利用一个数组或map来存储属性,已经存在就不添加了

filter返会为true的item项组成的新数组

     // 使用Map和filter
           function uniqueFunc(arr, keyName) {
           const res = new Map();
           return arr.filter((item) => {
             console.log(res);
             return !res.has(item[keyName]) && res.set(item[keyName], 1);
           });
          }
     // 用数组和filter
      function uniqueFunc(arr, keyName) {
        const res = [];
        return arr.filter((item) => {
          return !res.includes(item[keyName]) && res.push(item[keyName]);
        });
      }
reduce

reduce的归并初始值为空数组;obj对象用来临时存放属性,如果原来对象中没有这个属性,则存入这个属性,值为true,且将当前项push到结果数组中;如果已经存在了则不继续存,不做任何操作,直接将结果数组返回

      function uniqueFunc(arr, keyName) {
        let obj = {};
        return arr.reduce((prev, curv) => {
          obj[curv[keyName]]
            ? ""
            : (obj[curv[keyName]] = true && prev.push(curv));
          return prev;
        }, []);
      }
for循环

原理和前面差不多,但是运行耗时些

双重for循环

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

for搭配对象

      function uniqueFunc(arr, keyName) {
        let obj = {};
        let tempArr = [];
        for (var i = 0; i < arr.length; i++) {
          if (!obj[arr[i][keyName]]) {
            tempArr.push(arr[i]);
            obj[arr[i][keyName]] = true;
          }
        }
        return tempArr;
      }

for搭配map

      function uniqueFunc(arr, keyName) {
        let map = new Map();
        for (let item of arr) {
          if (!map.has(item[keyName])) 
            map.set(item[keyName], item);
          }
        }
        return [...map.values()];
      }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值