数组常用方法解释

1.push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

var arr =[1,2,3,4,5]
arr.push('6')
6
console.log(arr)
VM241:1 (6) [1, 2, 3, 4, 5, "6"]

2.unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

var arr =[1,2,3,4]
arr.unshift('1')
5
console.log(arr)
VM113:1 (5) ["1", 1, 2, 3, 4]

3.pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

var arr=[1,2,3]
arr.pop('1')
3
console.log(arr)
VM241:1 (2) [1, 2]0: 11: 2length: 2__proto__: Array(0)

4.shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

var arr =[1,2,3,4]
undefined
arr.shift('1')
1
console.log(arr)
VM292:1 (3) [2, 3, 4]

5.reverse() 方法用于颠倒数组中元素的顺序。该方法会改变原来的数组，而不会创建新的数组。

var arr =[1,2,3,4]
undefined
arr.reverse(arr)
(4) [4, 3, 2, 1]

6.find

find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined。
find()：返回通过测试的数组的第一个元素的值

在第一次调用 callback 函数时会确定元素的索引范围，因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。

array.find(function(value, index, arr),thisValue)
参数解析：
（1）.callback：必需，回调函数，它制定了对数组元素的检索规则。

      回调函数具有三个参数，介绍如下：          

      element：当前数组元素。

      index：当前数组元素的索引位置。

      array：当前进行检索的数组本身。

（2）.thisArg：可选，用来规定回调函数中this所指向的对象。

检索规则如下：

（1）.数组的每一个元素都会挨个作为参数传入回调函数。
（2）.如果当前回调函数执行的返回值为true（或者可以转换为true），那么find方法返回当前数组元素，并终止整个find方法的执行，如果最终没有找到符合条件的数组元素，那么find方法返回undefined。

特别说明：

（1）.find方法在首次调用回调函数时，就可以确定数组元素数量，后期添加的新元素会被回调函数无视。
（2）.数组的元素如果被修改，且修改时没有被回调函数所访问，那么回调函数会使用修改后的新值。

image.png

7.arr.findIndex(callback(element,index,array)[, thisArg])

findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。
参数解析：

（1）.callback:必需，对数组每一项所要执行的函数。

     element：当前遍历到的数组元素。

     index：当前遍历到的数组元素索引。

     array：数组本身。

（2）.thisArg:可选，规定callback回调函数this所指向的对象。

此方法会逐个对数组中的元素执行callback回调函数，如果回调函数返回值为true，那么就停止整个函数的执行，并返回当前数组元素的索引值，否则返回-1。

特别说明：

（1）.回调函数的返回值并不一定非要是true本身，只要可以转换为true即可。

（2）.当第一次调用callback函数时，数组arr元素数量就已经确定，那么findIndex方法执行后新增的元素不计算在内，也就是不会对它们执行callback函数。

（3）.如果未被callback函数访问到的元素的值改变，那么当callback函数访问到它时，使用当前值。

image.png

虽然11已经被追加到数组，并且大于10，但是findIndex方法的返回值依然是-1。
由此可见回调函数开始执行以后，添加的数组元素不会被回调函数访问到。

8.str.slice(start,end)

参数解析：
（1）.start：必需，规定开始截取字符串的位置，与数组类似，第一个字符的位置为0，以此类推。

（2）.end：可选，规定在何处结束截取字符串，此位置字符不在截取范围。

字符串字符的位置和数组元素的计算方式一样的，第一个元素位置是0，第二个是1，以此类推。

那么就是截取位置2（部）与位置为5（迎）之间的子字符串，但是不包括位置5处的字符。

9.arr.splice(start,num,element1,.....,elementN)

参数解析：
（1）.start：必需，规定从何处删除或者替换数组元素。
（2）.num：可选，规定要删除数组元素的数量。
（3）.elementN：可选，规定从start位置要插入的新元素。
代码运行效果截图如下：

方法有两个参数，也就是说仅规定了"剪"，而没有"接"上任何内容。
那么从效果上来看就是从指定位置删除指定长度的数组元素。
方法的返回值是由被删除元素构成的新数组。

如果省略第二个参数，那么就是"剪"掉从start位置开始以后的所有元素。

代码运行效果：

上面的代码不但进行"剪"了，也是用指定的元素进行"接"。

10.join

arr.join(separator)
参数解析：

（1）.separator：可选，规定用何种字符将数组元素连接起来。
代码效果：

上述代码可以指定特定字符连接数组中的元素生成一个字符串。

11.forEach

array.forEach(callbackfn[, thisArg])
参数解析：

（1）.callbackfn：必需，回调函数，此函数会针对数组的每一个元素执行一次。

      回调函数可以有三个参数：
        第一个参数是当前数组元素值。
        第二个参数是当前数组元素的索引。
        第三个参数就是数组对象本身。

（2）.thisArg：可选，规定回调函数中this所指向的对象，省略，this指向window对象。
代码运行效果：

可以看到forEach方法会对数组的每一个元素执行一次回调函数。

12.map

map()：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，map()方法按照原始数组元素顺序依次处理元素

map方法会给原数组中的每个元素都按顺序调用一次callback函数，callback每次执行后的返回值（包括undefined）组合起来形成一个新数组。callback函数只会在有值的索引上被调用，那些从来没被赋过值或者使用delete删除的索引则不会被调用。

使用map方法处理数组时，数组元素的范围是在callback方法第一次调用之前就已经确定了。在map方法执行的过程中，原数组中新增加的元素将不会被callback访问到，若已经存在的元素被改变或删除了，则他们传递到callback的值是map方法遍历到他们的那一刻的值，而被删除的元素将不会被访问到。

array.map(callbackfn[, thisArg])
参数解析：
（1）.callbackfn：必需，回调函数，此函数会针对数组的每一个元素执行一次。

      回调函数可以有三个参数：
        第一个参数是当前数组元素值。
        第二个参数是当前数组元素的索引。
        第三个参数就是数组对象本身。

（2）.thisArg：可选，规定回调函数中this所指向的对象，省略，this指向window对象。

.map方法对数组元素以索引从小到大的顺序逐个对其执行回调函数。
（2）.回调函数针对数组元素执行完毕后会返回一个值。
（3）.回调函数返回的值作为新数组的元素，顺序与原数组元素顺序一一对应。

13.filter使用回调函数对数组元素进行筛选，并将符合条件的元素存入一个新数组。

filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了，则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。

array.filter(callbackfn[, thisArg])
参数解析：

（1）.callbackfn：必需，回调函数，此函数会针对数组的每一个元素执行一次。

      如果回调函数的返回值为true（或者可以转换为true），那么就将元素组中对应的元素存入新数组
      回调函数可以有三个参数：
        第一个参数是当前数组元素值。
        第二个参数是当前数组元素的索引。
        第三个参数就是数组对象本身。

（2）.thisArg：可选，规定回调函数中this所指向的对象，省略，this指向window对象。

代码运行效果截图如下：

代码分析如下：
（1）.上述代码可以筛选出元素组中的偶数，并返回存放偶数的新数组。
（2）.当数组元素为偶数的时候，回调函数返回true，那么就会将当前数组元素写入新数组。
特别说明：返回值不一定分的是true本身，只要能够转换为true即可，

14.indexOf

此方法可以检索指定字符或者子字符串在源字符串中首次出现的位置。
str.indexOf(substring [,start])
参数解析：

（1）.substring：必需，要检索的字符或者子字符串。

（2）.start：可选，规定开始检索的位置，如果此参数省略，将从起始位置开始检索。
代码运行效果截图如下：

上述代码查询字符"n"在源字符串的索引位置（1）。

代码运行效果截：

返回值为-1，说明在字符串"antzone"中没有检索到字符"a"。

这是因为方法的第二个参数规定了检索开始的位置，由于从索引位置2开始检索，也就是从字符"t"处从左向右检索，很明显后面没有字符"a"的出现。
此方法对字符大小写是敏感的.

15.includes

ES2015新增includes方法可以非常轻松的检测数组中是否含有指定元素。
如果包含则返回true，否则返回false。

arr.includes(ele[, start])
参数解析：

（1）.ele：必需，要检测的元素。
（2）.start：可选，规定从何处开始进行检索，默认从起始位置开始检索。
代码运行效果截图如下：

因为数组中不存在数字5，所以返回值为false。

16.isArray

此方法功能非常简单，用来判断参数是否是一个数组，ES5新增。
如果是，返回true，否则返回false。

代码运行效果截图如下：