那些被忽略的 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

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

map() 方法建立一个新数组，其结果是该数组中的每一个元素都调用一个提供的函数后返回的结果

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

上面说了不少了～你们估计也大概知道咱们容易忽略的一个是方法的返回值，还有就是没有常用的参数，因此我这两个方法就直接上说明了。

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

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

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

var arr = [1, 2, 3];

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

console.log(arr.length); // 1
复制代码

结语

我并无把全部的数组方法的拿出来讲一下是以为上述这些例子已经足以告诉你们日常咱们在使用的时候容易忽略的地方，也不是什么很难理解的东西，因此就说到这里吧～剩下的方法就靠你们本身去仔细的使用了。