JS ES6数组操作大全【forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift】
文章目录
-
- 简介
- 1. forEach
- 2. map
- 3. filter
- 4. some
- 5. every
- 6. reduce
- 7. findIndex
- 8. find
- 9. slice
- 10.splice
- 11. push
- 12 unshift
简介
整理了一下ES6中数组常见的操作方法,包含:forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift
。
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) })
- 输出
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)
- 输出
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 => { if (e.age >= 18) { return e } }) console.log(newUsers)
- 输出
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)
- 输出
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)
- 输出
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))
- 输出
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)
- 输出
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)
- 输出
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)
- 输出
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)
- 输出
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)
- 输出
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)
- 输出