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

---

---

简介

整理了一下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);

• 输出