JS数组方法大汇总(ES5和ES6)，是时候检测你对数组的了解了

0 前言

---

本文的内容将ES5提供的比较经常使用方法和ES6中新增的方法进行了汇总，同时列举出了各个方法的特色、使用方法、注意事项、是否改变原数组、返回值等信息。这是一个汇总大纲，不会详细讲解每一个方法的使用，只是列举出了要点。方便记忆以及查询。同时能够检测本身是否对该方法了如指掌了。

若是你都掌握如下列举的方法，那边你对JS的数组算是了如指掌了。

本文如有错误之处，还望不吝指正！

1 正文

---

如下是ES5中的已有的方法：

1. Array.isArray(value)

• ES5提供的判断一个值是否为数组的方法
• 该方法没有instanceof因为环境不一样致使准确的问题。可能有兼容性问题
• Object.prototype.toString.call(value) == "[object Array]"。使用该方法没有兼容性，也是经常使用的方法

2. map( (item, index, array) => {})

• 对数组每一项运行给定的函数，返回每次调用函数的结果组成的数组
• 不会改变原数组，返回值是一个新数组
• 若是数组元素是对象，那么是浅拷贝过去，修改对象属性会影响到原数组对象的属性

3. filter((item, index, array) => {})

• 对数组进行过滤，对数组每一项运行给定的函数，返回该函数返回true的项组成的数组
• 返回是一个新数组，不会影响到原数组
• 一样，对于对象元素，是浅拷贝

4. forEach( (item, index, array) => {})

• 遍历函数，不会修改原数组，该方法没有返回值
• 没法使用break终止循环，意味着forEach是没法终止循环的
• for循环可以使用continue跳过本次循环，forEach中能够return false 来跳过本次循环

5. some((item, index, array) => {})

• 用于查询数组中的项是否知足某个条件
• 只要有一项返回true，则调用结束，返回true。所有返回false，则调用结果为false
• 不会改变原数组

6. every((item, index, array) => {})

• 用于查询数组中的项是否知足某个条件
• 只要有一项返回false，则调用结束，返回false。所有返回true，则调用结果为true
• 不会改变原数组

7. reduce( (prev, cur, index, array) => {}, init)

• 数组的归并方法
• 第二个参数可选，做为归并的起始值，默认是数组第一个元素
• 第一次归并是，prev是数组第一个元素，cur为第二个元素，返回值为下次归并的prev。以此类推
• 返回值是最后一次归并的回调函数返回值
• 不会改变原数组

8. reduceRight

• 同reduce，reduce是从左边开始归并，reduceRight是从右边开始归并

9. splice(deleteIndex, deleteNum, addValue1, addValue2, ...)

• 该方法算是最强大的数组方法了，在指定位置开始(deleteIndex，包括该位置)，删除相应个数(deleteNum)，并在该位置插入相应值(从第三个参数开始，依次插入)
• 该方法能够实现对数组的删除、插入、替换
• 返回值为一个数组，包含从原数组删除的想，没有删除则返回空数组
• 该方法会修改原数组

10. indexOf(value, start)

• 查找某个元素的索引
• 内部使用全等符号，必须严格相等
• 第二个参数指定查找起点
• lastIndexOf()从右到左，indexOf从左到右
• 可使用ES6中includes、find、findIndex代替

11. slice(start, end)

• 返回新数组，不会改变原数组
• 截取原数组一段返回，从start（包括）位置，到end（不包括）结束位置

12. concat

• 合并数组，返回新数组，不会改变原数组
• 没有传参，返回当前调用该方法的数组(浅拷贝)
• 若是参数不是数组，依次加入到数组末尾，若是是数组，将数组拆开(只能拆开一层)依次加入到末尾

13. sort(function)

• 数组各项比较时会先调用数组项的toString()方法，因此比较时字符串的比较，

14. reverse()

• 顾名思义，就是对数组进行倒序，该方法是在原数组上进行的，会修改原数组
• 返回值是原数组

15. join(symbol)

• 以给定的符合将数组链接起来，返回值为字符串
• 如何元素中有数组，会把元素数组合并放入该位置

数组的shift、unshift、push、pop会改变原数组，shift返回第一个元素、pop返回最后一个元素、unshift在首部加入一个元素，返回值为添加后数组长度、push在末尾加入一个元素，返回值为添加后的数组长度。

如下是ES6新增方法：

1. Array.from(targeObj, mapFunction, mapThis)

• 生成数组的方法，返回值为一个新数组
• 从类数组对象、数组、实现了iterator接口的对象生成一个数组
• 是对原对象的拷贝，且是浅拷贝，意味着修改新的数组元素会影响到原对象
• 若是数组元素为非对象类型，修改新数组不会影响到原对象
• 能够接受第二个参数，一个函数，至关于map函数，对每一个元素进行相应处理再放入新数组中
• 第三个参数，指定第二个参数函数内this

2. Array.of(val1, val2, val3, ....)

• 生成数组的方法，返回一个新的数组
• 经过将一组数据生成数组
• 解决Array()因为参数不一样产生不一样行为的问题
• 当参数为空时，返回一个空数组

3. copyWithin(target, start = 0, end = this.length)

• 在当前数组内部，将指定位置的成员复制到其余位置（会覆盖原有成员），而后返回当前数组
• 该方法会修改当前数组
• 结束参数不包括end位置
• 数组长度不变，数组start到end-1的元素会从target(包括该位置)开始依次覆盖数组原有成员
• 参数能够是负数，表示倒数

4. find((value, index ,arr) => {})

• 找出第一个符合条件的数组成员，当回调函数中返回true，则符合条件；若是都没有，则返回undefined
• 接受第二个参数，用来绑定回调函数的this对象

5. findIndex

• 使用与find一致，该方法返回数组成员的位置

6. fill(value, start, end)

• 将给定的值，填充数组
• 第二个参数，指定填充的起始位置(包括该位置)
• 第三个参数，指定填充的结束位置(不包括该位置)
• 若是填充的对象是对象，那么赋值的是同一个内存地址的对象，也就是浅拷贝(嗯，浅拷贝，就知道会发生什么事)

7. entries()

• 用于遍历数组
• 返回值为数组，里面的元素也是数组，第一元素是下标，第二个是元素值。[[0, 'a'], [1, 'b'], [3, 'c']]

8. keys()

• 用于遍历数组
• 返回数组的键名组成的数组

9. values()

• 用于遍历数组
• 返回数组键值组成的数组

10. includes(start = 0)

• 返回值一个布尔值，判断数组是否包含给定的值
• ES2016引入该方法，相似于字符串的includes方法
• 第二个参数指定搜索的起始位置，若是是负数，表示倒数位置
• 相对于indexOf，该方法更加语义化。另外NaN.includes(NaN)返回true，而indexOf不能判断。
• 可使用ES5中的some方法实现该功能

11. flat()

• 对数组内嵌套的数组“拉平”，就是把数组中的数组的元素挨个拿出来，放数组元素所在位置，返回一个新的数组，不会影响到原来的数组
• 接收第二个参数，只能拉平的层数，默认只有一层。想无限拉平能够传入Infinity关键字

12. flatMap(function)

• 同flat同样，先执行map函数再进行拉平
• 只能拉平一层