改变原数组 ：push()、unshift()、pop()、shift()、reverse()、splice()、sort()
1、介绍
-
操作
| api名 | 基本用法 | 返回值 |
|---|---|---|
| push() | 在后添加一项 | 新数组的长度 |
| unshift() | 在开头加一项 | 新数组的长度 |
| pop() | 删除最后一项 | 被删除的项 |
| shift | 删除开头一项 | 被删除的项 |
| concat(数组) | 多个数组变成一个 | 新数组 |
| join(连接符) | 数组变成字符串，之间多了连字符 | 被连接后的字符串 |
| reverse() | 反转数组 | 新数组 |
| slice(start, end) | 截取，[start,end) | 子数组 |
| splice(index, count, value1, value2....) | 参数：在哪删，删几个，在后添加什么 | 新数组 |
| sort() | 排序 | 新数组 |
| toString() | 逗号拼接成字符串 | 拼接后的字符串 |
| from() | 从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例 | 数组 |
-
查询
| api名 | 基本用法 | 返回值 |
|---|---|---|
| includes() | 查询数组（相对indexOf优先考虑） | 有true，没有false |
| indexOf(value) | 查询数组 | 有索引，没有-1 |
| find() | 查询数组 | 返回某一项 |
| some() | 是否存在满足return条件的一项（相对find优先考虑） | 一项满足为true，否则为false |
| lastIndexOf(value) | 从后查询 | 有索引，没有-1 |
-
遍历
| api名 | 基本用法 | 返回值 |
|---|---|---|
| forEach() | 遍历 | 没有返回值 |
| filter() | 过滤，满足return条件 | 满足过滤条件组成的数组 |
| every() | 判断数组中每一项都是否满足return条件 | 全部满足为true，否则为false |
| reduce() | 接收一个函数作为累加器（下面有实用例子） | 数组 |
注意: reduce() 对于空数组是不会执行回调函数的
2、使用骚操作
-
object.keys加forEach
Object.keys(对象).forEach(item=>{
newArr[item].push(对象[item])
})
-
map加filter，加工过返回的数组，比较是否满足某一个条件
//目的根据年级，知道等级1有多少个
classArr.map(item=>{ //classArr存储每个班级信息
return this.getGradeLevel(item.grade_id)//函数是根据年级返回等级
}).filter(value =>{
return value === 1
}
-
用reduce替换map加filter
语法：array.reduce(function(previousValue, currentValue, currentIndex, arr), initialValue)
//过滤添加新属性
const colors = [ { name: 'blue', env: '蓝色' },
{ name: 'lightblue', env: '蓝色' },
{ name: 'yellow', env: '黄色' } ];
console.log(
colors.filter(color => color.env === '蓝色').map( color =>Object.assign({}, color, { isLove: true }))
);
// [ { name: 'blue', env: '蓝色', isLove: true },
// { name: 'lightblue', env: '蓝色', isLove: true } ]
colors.reduce((acc, color) => {
return color.env === '蓝色' ? acc.concat(Object.assign({}, color, { isLove: true })) : acc; }
, [])
// [ { name: 'blue', env: '蓝色', isLove: true },
// { name: 'lightblue', env: '蓝色', isLove: true } ]
本文内容未经过校验，如有错误欢迎指出
感谢一下博主总结，材料来源,有比较详细例子 (juejin.cn/post/684490…)
