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)

• 输出