> 文档中心 > JS ES6数组操作大全【forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift】

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)    })
  • 输出
    JS ES6数组操作大全【forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift】

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)
  • 输出
    JS ES6数组操作大全【forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift】

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)
  • 输出
    JS ES6数组操作大全【forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift】

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)
  • 输出
    JS ES6数组操作大全【forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift】

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)
  • 输出
    JS ES6数组操作大全【forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift】

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))
  • 输出
    JS ES6数组操作大全【forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift】

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)
  • 输出
    JS ES6数组操作大全【forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift】

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)
  • 输出
    JS ES6数组操作大全【forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift】

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)
  • 输出
    JS ES6数组操作大全【forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift】

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)
  • 输出
    JS ES6数组操作大全【forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift】

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)
  • 输出
    JS ES6数组操作大全【forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift】

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)
  • 输出
    JS ES6数组操作大全【forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift】