那些被忽略的 JavaScript 数组方法细节

青湛(GitHub/mintsweet) 原文链接

前言

自以为还算一个比较高产的人吧～但是感觉好久都没有写点什么没有营养的东西了，这一篇本来是打算去年年底都要拿出来说一说的，但是年底事情太多了，加上我真的变懒了拖到现在才要把这个准备了好久的标题完善一下。

之所以会突然想讲一讲 JavaScript 中的数组，是因为我经历了好多次事后发现很傻的问题，所以就想说还是总结一下，这篇相当于总结一样的文章我也不想讲数组的方法是怎么用的，毕竟不管是在哪，数组方法的使用都有很多教程了，单纯的就来说一说那些我们可能忽略的细节。

抛砖引玉

在开始正式讲被我们忽略的一些数组方法之前，我还是想先举一个例子来说说我在其中躺过的一丢丢小坑～

现在我们随便来有一个小小的需求，写一个方法，有两个参数，一个是数组，另一个是需要添加到数组里面的元素。

function arrPush(arr, target) {
    return arr.push(target);
}

var arr_1 = [1, 2, 3];

console.log(arrPush(arr_1, 4));

上面的代码对你来说应该是很简单的吧，我们的需求就是把 [1, 2, 3] 变成 [1, 2, 3, 4] ，看起来好像没有错诶～大胆的推测一下最后的 console.log() 结果是什么呢，你可以自己试一下看看。

好了，不卖关子了，最后的结果是 4 ，诶？你可能已经清楚了这个点，你也可能完全不知道是怎么回事，没关系，清楚了你就当在复习一次，没清楚的话那你真的应该把这篇应该不长的总结看一下下。

意想不到数组方法

上面抛砖引玉之后你可能大概加估计应该也知道了我为什么想要做这样一个总结，尤其是对 JavaScript 掌握的不是那么好的同学来说，更是特别容易忽略的地方了。

我希望当你看到下面方法名字的时候，应该马上出现那个方法的用法，而且应该知道你可能没有经常用到的它剩下的参数还有它的返回值。

其实很多时候在 MDN 上面对一个方法的描述已经非常清楚了，但是我们还是会忽略到，所以结合例子来看，可能对你的记忆会更加有帮助。

array.push

上面抛砖引玉的原因，先来说说这个方法，解释一下出现上面情况的原因。

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度

这一句话其实已经把上面的答案解释了，我们在 return arr.push(target) 的时候，返回的是 arr.push() 函数的返回值，这个值是这个数组新的长度，所以结果是 4 ，来正确的使用一下这个方法。

function arrPush(arr, target) {
    arr.push(target)
    return arr;
}

var arr_1 = [1, 2, 3];

console.log(arrPush(arr_1, 4));

这个时候结果才是我们最后想要的 [1, 2, 3, 4] ，顺便就说说 push 方法可以同时接收多个参数，像这样 arr.push(1, 2, 3, 4) ，返回结果当然还是数组的新长度啦。

array.concat

接着来说说 concat 合并多个数组的方法，因为想要跟上面的 push 做一下对比，所以选择接着说这个方法，来看一下小例子。

function arrConcat(arr, arr2) {
    arr.concat(arr2);
    return arr;
}

var arr_1 = [1, 2];
var arr_2 = [3, 4];

console.log(arrConcat(arr_1, arr_2));

由于上面 push 方法的原因，我们依然选择 return arr ，这样的结果是什么呢，还是建议大家动手试一试，会发现得到的是 [1, 2] ，哇哦～怎么和 push 表现不一致呢，为什么又返回了 [1, 2] 。

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

当你理解了这个方法的时候，你就会发现 MDN 上面的表述真的很棒～忍不住想要夸一下它，很清楚了吧， concat 方法不会改变原来的数组，也就是当我们 return arr 的时候， arr 并没有发生改变，所以还是 [1, 2] ，改写一下我们的方法。

function arrConcat(arr, arr2) {
    return arr.concat(arr2);
}

var arr_1 = [1, 2];
var arr_2 = [3, 4];

console.log(arrConcat(arr_1, arr_2));

这时候在看就会得到预期的结果了～这个方法其实还有一个神奇的地方，就是它可以直接连接一个值，并且它也能同时连接多个值或者多个数组，或者多个值和多个数组的组合，像这样。

var arr = [1, 2];
arr.concat(3, 4, [5, 6], 7, [8, 9]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

arrary.map 和 array.forEach

因为这两个方法有丢丢类似，所以同时说一下，顺便讲讲它们的区别吧，先来看看它们的基本解释。

forEach() 方法对数组的每个元素执行一次提供的函数

从这两句解释来看，它们都是迭代数组的每一个元素，区别是 map 方法会返回新的数组，而 forEach 方法不会，那它有返回值吗？答案是有的...

var arr = [1, 2, 3];

var newArr = arr.map(item => {
    return item + 1; 
}); // [2, 3, 4];

var newArr2 = arr.forEach(item => {
   return item + 1; 
}); // undefined

var newArr3 = arr.map(item => {
    console.log(item + 1);
}); // [undefined, undefined, undefined]

// 2
// 3
// 4

var newArr4 = arr.forEach(item => {
    console.log(item + 1); 
}); // undefined

// 2
// 3
// 4

答案我已经写在上面了， map 方法必须显示的返回值，而 forEach 只是对数组的每一个元素执行内部内容。这两个方法的参数是一致的， 回调函数 和执行回调函数时使用的 this 值，回调函数中的参数也是一致的，分别是 数组当前元素 、 当前元素索引 和 数组本身 。

一般来说我们用的比较多的也就是回调函数和它的两个参数，很多人忽略了回调函数的第三个参数，其实还蛮好用的，先不表。最后就是改变 this 值的参数，因为真的很少用，也没有实际案例来说，所以就不多说了，大家知道还有这么个东西就行，如果有实际用到的情况，也可以给我分享一下，学习一下～

arrary.filter

在 es5 之后的新的数组迭代方法，参数几乎都与上述一致。

- 回调函数(数组当前值，当前值索引，数组本身)
- 执行回调函数的this值

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

本身这个数组过滤的方法使用很简单，我就说一丢丢在使用的时候的小技巧，比如数组去重就很好用。

var arr = [1, 2, 3, 4, 4, 5, 6, 6, 7, 8, 9];
var result = arr.filter((item, index, arr) => {
    return arr.indexOf(item) === index; 
});
console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

arrary.pop 和 arrary.shift

上面说了很多了～大家估计也大概知道我们容易忽略的一个是方法的返回值，还有就是没有经常使用的参数，所以我这两个方法就直接上说明了。

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度

这两个方法用法完全相同，区别就是一个弹出的是数组最后的元素，一个弹出的是数组最前面的元素，弹出这个大家看了上面方法的解释也应该知道我想表达的是方法返回值元素～

var arr = [1, 2, 3];

console.log(arr.pop()); // 3
console.log(arr.shift()); // 1

console.log(arr.length); // 1

结语

我并没有把所有的数组方法的拿出来说一下是觉得上述这些例子已经足以告诉大家平常我们在使用的时候容易忽略的地方，也不是什么很难理解的东西，所以就说到这里吧～剩下的方法就靠大家自己去仔细的使用了。