摘要：對(duì)于一個(gè)數(shù)組方法，我最關(guān)心的有兩個(gè)問(wèn)題，返回值是什么，會(huì)不會(huì)對(duì)原始數(shù)組造成影響，典型的例子就是和方法。若全部通過(guò)測(cè)試，函數(shù)返回值，中途退出，返回不對(duì)原數(shù)組產(chǎn)生影響。方法返回一個(gè)由原數(shù)組中的每個(gè)元素調(diào)用一個(gè)指定方法后的返回值組成的新數(shù)組。。

說(shuō)起來(lái)很搞笑，我在用 sublime 3 寫(xiě)排序算法的時(shí)候，準(zhǔn)備用 nodejs 來(lái)運(yùn)行，就用 sublime 3 提供的編譯功能。但問(wèn)題來(lái)了，我比較挫，寫(xiě)了個(gè)死循環(huán)，然后 sublime 3 也不給輸出提示，我很疑惑的連續(xù)跑了 3 遍，過(guò)了一會(huì)電腦發(fā)熱，風(fēng)扇開(kāi)始叫了，我察覺(jué)到，一看進(jìn)程，3 個(gè) node 進(jìn)程在狂吃內(nèi)存和 cpu，我在想，這個(gè) bug 該反饋給 sublime 3 還是 node 呢？

JavaScript 中的數(shù)組本身就很特別，不像 C 或 Java，搞了數(shù)組、list 一整套東西，JS 中的數(shù)組就完全可以當(dāng)作一個(gè)?；蜿?duì)列來(lái)使用，四大操作 pop、push、shift、unshift。

我今天寫(xiě)這篇博客，主要是寫(xiě)一篇總結(jié)，以備以后查看，因?yàn)槲野l(fā)現(xiàn)無(wú)論數(shù)組操作多熟，時(shí)間久了都會(huì)忘記。

對(duì)于一個(gè)數(shù)組方法，我最關(guān)心的有兩個(gè)問(wèn)題，返回值是什么，會(huì)不會(huì)對(duì)原始數(shù)組造成影響，典型的例子就是 splice 和 slice 方法。對(duì)于那些返回原數(shù)組的函數(shù)，我們可以直接調(diào)用數(shù)組的鏈?zhǔn)秸{(diào)用，很酷（array.filter().sort().reverse()）。

我想帶著這兩個(gè)疑問(wèn)，來(lái)總結(jié)下 Array 的數(shù)組方法。

Array.length 是數(shù)組的長(zhǎng)度，每個(gè)新建的數(shù)組對(duì)象都會(huì)有 length 對(duì)象，可以通過(guò) Array.prototype 修改原型，不過(guò)數(shù)組的基本使用和操作不是今天的重點(diǎn)，我們來(lái)看數(shù)組方法。

一般情況下，數(shù)組方法在最后都會(huì)帶有一個(gè) thisArg 的參數(shù)，這個(gè)參數(shù)會(huì)指定內(nèi)部 this 的指向。如果參數(shù)中有回掉函數(shù)，這個(gè)回掉函數(shù)一般接受 3 個(gè)參數(shù)，value、index 和 array，分別代表當(dāng)前傳入的值，當(dāng)前傳入值所在的索引和當(dāng)前的處理的數(shù)組。

目錄索引：

concat
every
filter
forEach
indexOf
join
lastIndexOf
map
reduce
reduceRight
push
pop
unshift
shift
reverse
slice
splice
some
sort
toString
copyWithin
find
findIndex
fill
keys
entries
includes

這個(gè)方法可以用于數(shù)組的拼接，參數(shù)是一個(gè)或多個(gè)數(shù)組，返回的結(jié)果是拼接數(shù)組。MDN array.concat。

concat 方法將創(chuàng)建一個(gè)新數(shù)組，然后將調(diào)用它的對(duì)象(this 指向的對(duì)象，即原數(shù)組)中的元素以及所有參數(shù)中的數(shù)組類型的參數(shù)中的元素以及非數(shù)組類型的參數(shù)本身按照順序放入這個(gè)新數(shù)組,并返回該數(shù)組。concat 方法并不修改原數(shù)組和參數(shù)數(shù)組，而且對(duì)非數(shù)組對(duì)象同樣有效果。

返回拼接的新數(shù)組；

不修改原數(shù)組和參數(shù)數(shù)組；

參數(shù)可以是非數(shù)組。

var a1 = [1, 2, 3],
  a2 = [4, 5, 6],
  a3 = [7, 8, 9];
var newarr = a1.concat(a2, a3);
newarr //[1, 2, 3, 4, 5, 6, 7, 8, 9]
a1 //[1, 2, 3]
newarr = a1.concat(4, a3);//[1, 2, 3, 4, 7, 8, 9]
newarr = a1.concat("hello");//[1, 2, 3, "hello"]

every() 方法測(cè)試數(shù)組的所有元素是否都通過(guò)了指定函數(shù)的測(cè)試。MDN array.every。

arr.every(callback) 會(huì)對(duì)每一個(gè)元素都執(zhí)行 callback 方法，直到 callback 返回 false。有時(shí)候 every 方法會(huì)和 forEach 方法相比較，因?yàn)?forEach 無(wú)法停止，而 every 方法返回 flase 時(shí)可以中途停止。

若全部通過(guò)測(cè)試，函數(shù)返回值 true，中途退出，返回 false；

不對(duì)原數(shù)組產(chǎn)生影響。

function isBigEnough(element, index, array) {
  console.log(index);
  return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// 0
// 1
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// 0 1 2 3 4
// passed is true

filter() 方法使用指定的函數(shù)測(cè)試所有元素，并創(chuàng)建一個(gè)包含所有通過(guò)測(cè)試的元素的新數(shù)組。MDN array.filter。

其實(shí)這個(gè)方法就是一個(gè)過(guò)濾方法，前面那個(gè) every 方法，只判斷不過(guò)濾，filter 會(huì)過(guò)濾掉一些不符合條件的，并返回新數(shù)組。

返回一個(gè)滿足過(guò)濾條件的新數(shù)組；

不會(huì)改變?cè)瓟?shù)組。

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var a1 = [19, 22, 6, 2, 44];
var a2 = a1.filter(isBigEnough);
a1 //[19, 22, 6, 2, 44]
a2 //[19, 22, 44]

forEach() 方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)(回調(diào)函數(shù))。MDN array.forEach。

函數(shù)沒(méi)有返回值，即 underfined；

不對(duì)原數(shù)組產(chǎn)生影響。

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}

// 注意索引2被跳過(guò)了，因?yàn)樵跀?shù)組的這個(gè)位置沒(méi)有項(xiàng)
var result = [2, 5, 9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 9
result //underfined

indexOf()方法返回給定元素能找在數(shù)組中找到的第一個(gè)索引值，否則返回-1。MDN array.indexOf。

返回值是找到元素的索引值或 -1；

不對(duì)原數(shù)組產(chǎn)生影響。

var array = [1, 2, 5];
array.indexOf(5); // 2
array.indexOf(7); // -1

join() 方法將數(shù)組中的所有元素連接成一個(gè)字符串。MDN array.join。

其實(shí)，對(duì)于 join 想到的第一個(gè)是字符串的 split 操作，這兩個(gè)經(jīng)常搭配用來(lái)處理字符串。

返回拼接的字符串；

不對(duì)原數(shù)組產(chǎn)生影響。

var a1 = [1, 2, 3];
var a2 = a1.join();
a1 //[1, 2, 3]
a2 //"1,2,3"
a2 = a1.join("");//"123"
a2 = a1.join("-");//"1-2-3"

lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或變量）在數(shù)組中的最后一個(gè)的索引，如果不存在則返回 -1。從數(shù)組的后面向前查找，從 fromIndex 處開(kāi)始。MDN array.lastIndexOf。

其實(shí)這個(gè)就是 indexOf 的翻版。

返回找到的第一個(gè)元素的索引；

不對(duì)原數(shù)組產(chǎn)生影響。

var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);

map() 方法返回一個(gè)由原數(shù)組中的每個(gè)元素調(diào)用一個(gè)指定方法后的返回值組成的新數(shù)組。MDN array.map。

map reduce 這兩個(gè)函數(shù)在處理數(shù)組上一直都是一把手，帶來(lái)很大的便捷性。

返回一個(gè)經(jīng)過(guò)回掉函數(shù)處理的新數(shù)組；

不對(duì)原數(shù)組產(chǎn)生影響。

var a1 = [1, 4, 9];
var a2 = a1.map(Math.sqrt);
a1 //[1, 4, 9]
a2 //[1, 2, 3]

reduce() 方法接收一個(gè)函數(shù)作為累加器（accumulator），數(shù)組中的每個(gè)值（從左到右）開(kāi)始合并，最終為一個(gè)值。MDN array.reduce。

reduce 是一個(gè)合并的過(guò)程，從左到右，直到把所有元素合并到一起，并返回最終的結(jié)果。它接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)回掉函數(shù)，第二個(gè)參數(shù)是一個(gè)初始值，表示處理第一個(gè)元素時(shí)的前一個(gè)值。這個(gè)回掉函數(shù)接受四個(gè)參數(shù)，依次是 accumulator（上次處理的結(jié)果），currentValue（當(dāng)前元素的值），index（當(dāng)前元素索引），array（調(diào)用 reduce 的數(shù)組）。

返回最終合并的結(jié)果，即回掉函數(shù)的輸出，可以為字符串，對(duì)象，數(shù)組等任意結(jié)果；

不對(duì)原數(shù)組產(chǎn)生影響。

var getAdd = (pre, cur) => pre + cur;
var a1 = [1, 2, 3];
var a2 = a1.reduce(getAdd, 0);
a1 //[1, 2, 3]
a2 //6

reduceRight() 方法接受一個(gè)函數(shù)作為累加器（accumulator），讓每個(gè)值（從右到左，亦即從尾到頭）縮減為一個(gè)值。（與 reduce() 的執(zhí)行方向相反）MDN array.reduceRight。

var toStr = (pre, cur) => "" + pre + cur;
var a1 = [1, 2, 3];
var a2 = a1.reduce(toStr, "");
a2 //"123"
a2 = a1.reduceRight(toStr, "");
a2 //"321"

push() 方法添加一個(gè)或多個(gè)元素到數(shù)組的末尾，并返回?cái)?shù)組新的長(zhǎng)度（length 屬性值）。MDN array.push。

如果把數(shù)組當(dāng)作棧，push pop 操作是棧進(jìn)和出，而往往很多人會(huì)忽略函數(shù)執(zhí)行后的返回值。

返回 push 操作執(zhí)行之后數(shù)組的長(zhǎng)度；

肯定改變。

var a1 = [1, 2, 3];
var a2 = a1.push(4);
a1 //[1, 2, 3, 4]
a2 //4

pop() 方法刪除一個(gè)數(shù)組中的最后的一個(gè)元素，并且返回這個(gè)元素。MDN array.pop。

返回刪除的這個(gè)元素；

肯定改變。

var a1 = [1, 2, 3];
var a2 = a1.pop();
a1 //[1, 2]
a2 //3

unshift() 方法在數(shù)組的開(kāi)頭添加一個(gè)或者多個(gè)元素，并返回?cái)?shù)組新的 length 值。MDN array.unshift。

返回 length 值；

肯定改變。

var a1 = [1, 2, 3];
var a2 = a1.unshift(4);
a1 //[4, 1, 2, 3]
a2 //4

shift() 方法刪除數(shù)組的 第一個(gè) 元素，并返回這個(gè)元素。該方法會(huì)改變數(shù)組的長(zhǎng)度。MDN array.shift。

shift 方法和 push 方法可以組成一個(gè)隊(duì)列的操作啦。

返回刪除的這個(gè)元素；

肯定改變。

reverse() 方法顛倒數(shù)組中元素的位置。第一個(gè)元素會(huì)成為最后一個(gè)，最后一個(gè)會(huì)成為第一個(gè)。MDN array.reverse。

函數(shù)返回值是修改了的原數(shù)組；

原數(shù)組會(huì)修改。

var a1 = [1, 2, 3];
var a2 = a1.reverse();
a1 //[3, 2, 1]
a1 === a2; //true

slice() 方法會(huì)淺復(fù)制（shallow copy）數(shù)組的一部分到一個(gè)新的數(shù)組，并返回這個(gè)新數(shù)組。MDN array.slice。

slice 的參數(shù)包括拷貝的初識(shí)位置，結(jié)束位置（左閉右開(kāi)），與 splice 有區(qū)別。由于不會(huì)改變?cè)瓟?shù)組，這個(gè)數(shù)組可以用于前拷貝，比如經(jīng)?？磩e人使用：arr.slice(0)，表示拷貝數(shù)組。

返回淺拷貝后的新數(shù)組；

不會(huì)改變?cè)瓟?shù)組。

var a1 = [1, 2, 3, 4, 5];
var a2 = a1.slice(1, 3);
a1 //[1, 2, 3, 4, 5]
a2 //[2, 3]

splice() 方法用新元素替換舊元素，以此修改數(shù)組的內(nèi)容。MDN array.splice。

如其名，分割，會(huì)修改原數(shù)組的內(nèi)容，返回一個(gè)新數(shù)組，而且它的參數(shù)也比較多，第一個(gè)參數(shù)表示初始位置，第二個(gè)參數(shù)表示分割長(zhǎng)度，第三個(gè)參數(shù)及以后表示分割后在分割處添加新元素。

返回分割的元素組成的數(shù)組；

會(huì)對(duì)數(shù)組進(jìn)行修改，原數(shù)組會(huì)減去分割數(shù)組。

var a1 = [1, 2, 3, 4];
var a2 = a1.splice(1, 2);
a1 //[1, 4]
a2 //[2, 3]
a1 = [1, 2, 3, 4];
a2 = a1.splice(1, 2, 5, 6);
a1 //[1, 5, 6, 4]

some() 方法測(cè)試數(shù)組中的某些元素是否通過(guò)了指定函數(shù)的測(cè)試。MDN array.some。

sort() 方法對(duì)數(shù)組的元素做原地的排序，并返回這個(gè)數(shù)組。 sort 排序可能是不穩(wěn)定的。默認(rèn)按照字符串的Unicode碼位點(diǎn)（code point）排序。MDN array.sort。

sort 函數(shù)用于排序，比較常用，若沒(méi)有制定排序函數(shù)，則按照 unicode 位點(diǎn)進(jìn)行排序，而且數(shù)字會(huì)被轉(zhuǎn)成字符串，所以 ‘123’ 要排在 ‘11’ 的后面。

我們會(huì)用 sort 做一些有意思的排序，比如漢字按照拼音排序。

返回排序后的原數(shù)組；

會(huì)對(duì)數(shù)組進(jìn)行修改。

var big = function(a, b){
  return a - b;
}
var a1 = [2, 4, 77, 1];
var a2 = a1.sort(big);
a1 //[1, 2, 4, 77]
a1 === a2; //true

localeCompare 可以對(duì)漢字進(jìn)行排序，當(dāng)同時(shí)出現(xiàn)漢字和字母的時(shí)候會(huì)有 bug：

var sort_py = function(a, b){
  return a.localeCompare(b);
}
var a1 = ["北京", "上海", "南京", "合肥"];
a1.sort(sort_py);
//["北京", "合肥", "南京", "上海"]

toString() 返回一個(gè)字符串，表示指定的數(shù)組及其元素。MDN array.toString。

顯然，這個(gè)方法和 join 方法比較一下。

返回拼接的字符串；

不會(huì)改變?cè)瓟?shù)組。

var a1 = [1, 2, 3];
var a2 = a1.toString();
a2 //"1,2,3"

上面的這些方法都是 ES5 的，來(lái)看看 ES6 添加了哪些新方法。

copyWithin() 方法會(huì)淺拷貝數(shù)組的部分元素到同一數(shù)組的不同位置，且不改變數(shù)組的大小，返回該數(shù)組。MDN array.copyWithin。

接受三個(gè)參數(shù)，分別是要拷貝到的位置 target，拷貝開(kāi)始位置 start 和結(jié)束位置 end。

返回修改了的原數(shù)組；

會(huì)對(duì)數(shù)組進(jìn)行修改，且是淺拷貝；

參數(shù)可負(fù)，負(fù)值時(shí)倒推，且 end 為空表示數(shù)組長(zhǎng)度。

var a1 = [1, 2, 3, 4, 5];
var a2 = a1.copyWithin(0, 2, 4);
a1 //[3, 4, 3, 4, 5]
a2 //[3, 4, 3, 4, 5]
a1 === a2; //true

如果數(shù)組中某個(gè)元素滿足測(cè)試條件，find() 方法就會(huì)返回滿足條件的第一個(gè)元素，如果沒(méi)有滿足條件的元素，則返回 undefined。MDN array.find。

返回找到的那個(gè)元素，若未找到，返回 underfined

不對(duì)原數(shù)組產(chǎn)生影響。

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var a1 = [8, 18, 14];
var num = a1.find(isBigEnough); //18

findIndex()方法用來(lái)查找數(shù)組中某指定元素的索引, 如果找不到指定的元素, 則返回 -1。MDN array.findIndex。

這個(gè)方法可以參考 find 方法，只是返回值是元素的索引而非元素本身。

使用 fill() 方法，可以將一個(gè)數(shù)組中指定區(qū)間的所有元素的值, 都替換成或者說(shuō)填充成為某個(gè)固定的值。MDN array.fill。

fill 方法接受三個(gè)參數(shù)，第一個(gè)參數(shù) value 表示要填充到值，后面兩個(gè) start 和 end 表示開(kāi)始和結(jié)束位置，可選，且左閉右開(kāi)。

函數(shù)返回值是修改了的原數(shù)組；

可對(duì)數(shù)組產(chǎn)生影響。

var a1 = [1, 2, 3, 4, 5];
var a2 = a1.fill(6, 1, 4);
a1 //[1, 6, 6, 6, 5]
a2 //[1, 6, 6, 6, 5]
a1 === a2; //true

數(shù)組的 keys() 方法返回一個(gè)數(shù)組索引的迭代器。MDN array.keys。

這個(gè)方法會(huì)返回一個(gè)數(shù)組索引的迭代器，迭代器在 ES6 中有特殊的用途。

函數(shù)返回一個(gè)迭代器對(duì)象；

不會(huì)改變?cè)瓟?shù)組。

var arr = ["a", "b", "c"];
var iterator = arr.keys();

console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

entries() 方法返回一個(gè) Array Iterator 對(duì)象，該對(duì)象包含數(shù)組中每一個(gè)索引的鍵值對(duì)。MDN array.entries。

var arr = ["a", "b", "c"];
var eArr = arr.entries();

console.log(eArr.next().value); // [0, "a"]
console.log(eArr.next().value); // [1, "b"]
console.log(eArr.next().value); // [2, "c"]

includes() 方法用來(lái)判斷當(dāng)前數(shù)組是否包含某指定的值，如果是，則返回 true，否則返回 false。MDN array.includes。

該函數(shù)接受兩個(gè)參數(shù)，第二個(gè)參數(shù)表示開(kāi)始查找位置，起始位置為 0。這個(gè)方法與 indexOf 方法最大的區(qū)別不僅在于返回值一個(gè)是索引，一個(gè)是布爾值，indexOf 方法使用的是 === 來(lái)判斷，無(wú)法判斷 NaN 情況，而 includes 可以判斷。

返回 true 或 false；

不會(huì)改變?cè)瓟?shù)組。

var a1 = [1, NaN];
a1.indexOf(NaN);//-1
a1.includes(NaN);//true

本文重在總結(jié)，沒(méi)啥干貨。共勉！

MDN Array
ES6 入門(mén)-數(shù)組的擴(kuò)展
Array 數(shù)組方法

歡迎來(lái)我的博客交流。