es6 怎么根据某个属性合并数据 es6操作数组

转载

mob64ca140ee96c 2024-03-18 21:49:12

文章标签 es6 怎么根据某个属性合并数据 javascript 前端 typescript es6 文章分类 架构后端开发

文章目录

简介
1. 常用方法

1.1. forEach
1.2. map
1.3. filter
1.4. some
1.5. every
1.6. reduce
1.7. findIndex
1.8. find
1.9. slice
1.10.splice
1.11. push
1.12 unshift

2. 数组去重

2.1 set去重（简单暴力）
2.2 filter()+indexOf()

简介

整理了一下ES6中数组常见的操作方法，包含：forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift。

1. 常用方法

1.1. forEach

遍历数组元素，没有返回值
案例：打印输出数组中的用户

const users = [
      {
        id: 1,
        age: 15,
        name: "王大锤"
      },
      {
        id: 2,
        age: 18,
        name: "二狗子"
      },
      {
        id: 3,
        age: 23,
        name: "路飞"
      }
    ]
    users.forEach(e => {
      console.log(e)
    })

输出

1.2. map

有返回值，返回一个新数组,我们可以用map改变数组的格式
案例：在users中，我们希望返回一个新的数组，里面只包含每个人的名称

const users = [
      {
        id: 1,
        age: 15,
        name: "王大锤"
      },
      {
        id: 2,
        age: 18,
        name: "二狗子"
      },
      {
        id: 3,
        age: 23,
        name: "路飞"
      }
    ]
    const newUsers = users.map(e => {
      return e.name
    })
    console.log(newUsers)

输出

1.3. filter

对元素进行过滤，有返回值，返回一个新数组
案例：在users中，我们希望返回年龄大于等于18的用户

const users = [
      {
        id: 1,
        age:15,
        name: "王大锤"
      },
      {
        id: 2,
        age:18,
        name: "二狗子"
      },
      {
        id: 3,
        age:23,
        name: "路飞"
      }
    ]
    const newUsers = users.filter(e => {
      return e.age >= 18
    })
    console.log(newUsers)

输出

1.4. some

有返回值，类似匹配，只要有一项满足条件就是true
案例：是否包含年龄大于22的用户

const users = [
      {
        id: 1,
        age: 15,
        name: "王大锤"
      },
      {
        id: 2,
        age: 18,
        name: "二狗子"
      },
      {
        id: 3,
        age: 23,
        name: "路飞"
      }
    ]
    const b = users.some(e => {
      return e.age > 22
    })
    console.log(b)

输出

1.5. every

有返回值，返回一个bool，匹配所以值，只要有一个不符合，就返回false
案例：是否全部成年人

const users = [
      {
        id: 1,
        age: 15,
        name: "王大锤"
      },
      {
        id: 2,
        age: 18,
        name: "二狗子"
      },
      {
        id: 3,
        age: 23,
        name: "路飞"
      }
    ]
    const b = users.every(e => {
      return e.age >= 18
    })
    console.log(b)

输出

1.6. reduce

累加器，有返回值，可以累加数值
案例：计算平均年龄，保留2为小数

const users = [
      {
        id: 1,
        age: 15,
        name: "王大锤"
      },
      {
        id: 2,
        age: 18,
        name: "二狗子"
      },
      {
        id: 3,
        age: 23,
        name: "路飞"
      }
    ]
    // (ageSum, e) 中两个参数分别为：累计器和当前值
    // reduce函数的第二个参数0，表示初始值
    const ageSum = users.reduce((ageSum, e) => {
      return ageSum += e.age
    }, 0)
    console.log('平均年龄为：', (ageSum / users.length).toFixed(2))

输出

1.7. findIndex

返回一个索引下标位置，没有则返回-1
案例：寻找二狗子在数组中的位置

const users = [
      {
        id: 1,
        age: 15,
        name: "王大锤"
      },
      {
        id: 2,
        age: 18,
        name: "二狗子"
      },
      {
        id: 3,
        age: 23,
        name: "路飞"
      }
    ]

    const index = users.findIndex(e => {
      return e.name === "二狗子"
    })
    console.log(index)

输出

1.8. find

有返回值，返回找到的第一个值
案例：寻找数组中年龄大于16的首个用户

const users = [
      {
        id: 1,
        age: 15,
        name: "王大锤"
      },
      {
        id: 2,
        age: 18,
        name: "二狗子"
      },
      {
        id: 3,
        age: 23,
        name: "路飞"
      }
    ]
    const user = users.find(e => {
      return e.age > 16
    })
    console.log(user)

输出

1.9. slice

截取数组中的数据返回一个新的数组，不会影响原数组
案例：截取下标2和3的用户，并不影响原数组

const users = [
      {
        id: 1,
        age: 15,
        name: "王大锤"
      },
      {
        id: 2,
        age: 18,
        name: "二狗子"
      },
      {
        id: 3,
        age: 23,
        name: "路飞"
      }
    ]
    // 从1开始，到3结束，不包含3
    const newUsers = users.slice(1,3)
    console.log(newUsers)

输出

1.10.splice

截取数组中的数据返回一个新的数组，会影响原数组，常用于按下标删除数组中的值
案例：删除下标从1开始的2个用户

const users = [
      {
        id: 1,
        age: 15,
        name: "王大锤"
      },
      {
        id: 2,
        age: 18,
        name: "二狗子"
      },
      {
        id: 3,
        age: 23,
        name: "路飞"
      }
    ]
    // 下标开始位置，要删除的数量
    users.splice(1,2)
    console.log(users)

输出

1.11. push

在数组尾插入数据
案例：在数组尾插入一个用户

const users = [
      {
        id: 1,
        age: 15,
        name: "王大锤"
      },
      {
        id: 2,
        age: 18,
        name: "二狗子"
      },
      {
        id: 3,
        age: 23,
        name: "路飞"
      }
    ]
    users.push({id: 4, age: 25, name: "柯南"})
    console.log(users)

输出

1.12 unshift

在数组头插入数据
案例：在数组头插入一个用户

const users = [
      {
        id: 1,
        age: 15,
        name: "王大锤"
      },
      {
        id: 2,
        age: 18,
        name: "二狗子"
      },
      {
        id: 3,
        age: 23,
        name: "路飞"
      }
    ]
    users.unshift({id: 4, age: 25, name: "柯南"})
    console.log(users)

输出

2. 数组去重

2.1 set去重（简单暴力）

数组转Set去重后再转成数组

const arr = [1,2,1,2,2,3,4,5]
 // 转Set
 const newArr= Array.from(new Set(arr))
 console.log(newArr);

输出

2.2 filter()+indexOf()

利用下标原理去重
缺点：输出结果中会去掉NaN，因为indexOf()无法对NaN进行判断，部分需用到NaN的业务场景不可用

const arr = [1,2,1,2,2,3,4,5]
const newArr = arr.filter((item, index) => {
    // 判断当前值的下标值是否在前面出现过，若前面有相同值，则arr.indexOf(item)必然小于index
    return arr.indexOf(item) === index
  })
console.log(newArr);