文章目录
- 简介
- 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);
- 输出