数组操作首先注意且牢记splice、sort、reverse这个3个常用方法是对数组自身的操作,会改变数组自身。其他会改变自身的方法是增删push/pop/shift/unshift/fill/copyWithin。
数组常用方法
添加/删除元素:
- push(...items) -结尾添加元素
- pop() -结尾删除元素
- shift() -开头删除元素
- unshift(...items) -开头添加元素
- splice(pos, deleteCount, ...items) -从index开始,删除元素并在当前位置插入元素items
- slice(start, end) -从索引start复制元素到end返回新数组
- concat(...items) -复制当前数组并添加items返回新数组
查询元素:
- indexOf/lastIndexOf(item, pos) -从pos开始找到item,找到返回索引值,否则返回-1
- includes(value) -数组有value返回true,否则返回false
- find/filter(func) -通过函数过滤元素,返回true条件的符合find函数的第一个值或符合filter函数的全部值
- findIndex -返回true条件的符合函数的索引值
转换数组:
- map(func) -每个元素调用func的结果返回新数组
- sort(func) -返回倒叙排列的数组
- reverse() -返回颠倒的数组
- split/join -将字符串转为数组返回
- reduce(func, initial) -每个元素调用func计算单个值,调用之间传递中间结果
迭代元素:
- forEach(func) -每个元素调用func,不返回任何东西
其他:
- Array.isArray(arr) -检查arr是否是一个数组
- arr.some(fn)/arr.every(fn) -类似于map,检查数组,每个元素调用函数fn,如果任何/所有结果为true,则返回true,否则返回false
- arr.fill(value, start, end) -从索引start到end用value重复填充数组
- arr.copyWithin(target, start, end) -复制索引start到end的元素到target上 需要注意的是,sort、reverse和splice方法修改数组本身。
数组常用遍历
- forEach
- every
- some
- filter
- map
- reduce
- reduceRight
- find
- findIndex 很多方法可以达到同样的效果,数组方法不仅要会用,还要会用好,知道什么时候用什么方法。
数组使用误区
array.includes()和array.indexOf()
- array.includes()返回布尔值,array.indexOf()返回数组子项的索引,indexOf一定要在需要索引值的情况下使用。
- array.indexOf找不到NaN,返回-1。
- array.includes()能找到NaN,返回true
array.find()/array.findIndex()/array.some()
- array.find()返回值是第一个符合条件的数组子项
- array.findIndex()返回值是第一个符合条件的数组子项的下标
- array.some()返回值是布尔值,如果有符合条件的子项,返回true,否则返回false
- 三个方法都是短路操作,即找到符合条件的子项之后就不再继续遍历
- 建议在只需要布尔值的时候和数组子项是字符串或数字的时候使用array.some()
array.find()和array.filter()
- array.find()只返回第一个符合条件的子项,是短路操作
- array.filter()返回的是所有符合条件的子项组成的数组,会遍历所有数组项
合理使用Set数据解构
- 由于es6原生提供了Set数据解构,而Set可以保证子项不重复,且和数组转换十分方便,所以在一些可能会涉及重复添加的场景下可以直接使用Set代替Array,避免多个地方重复判断是否已经存在该子项
强大的reduce
- array.reduce遍历并将当前次回调函数的返回值作为下一次回调函数执行的第一个参数
- 利用array.reduce替代一些需要多次遍历的场景,可以极大提高代码运行效率