JavaScript數組方法總結

JavaScript 中的陣列本身就很特別，不像C 或Java，搞了數組、list 一整套東西，JS 中的數組就完全可以當作一個棧或隊列來使用，四大操作pop、push、 shift、unshift。

對於一個數組方法，最關心的有兩個問題， 返回值是什麼，會不會對原始數組造成影響 ，典型的例子就是 splice 和 slice 方法。對於那些傳回原始數組的函數，我們可以直接調用數組的鍊式調用，很酷（ array.filter().sort().reverse() ）。

我想帶著這兩個疑問，來總結下 Array 的陣列方法。

Array

Array.length 是數組的長度，每個新建的數組對像都會有 length 對象，可以透過 Array.prototype 修改原型，不過數組的基本使用和操作不是今天的重點，我們來看數組方法。

一般情況下，陣列方法最後都會帶有一個 thisArg 的參數，而這個參數會指定內部 this 的指向。如果參數中有回掉函數，這個回掉函數一般接受 3 個參數，value、index 和 array，分別代表目前傳入的值，目前傳入值所在的索引和目前的處理的陣列。

目錄索引：

concat

這個方法可以用於數組的拼接，參數是一個或多個數組，傳回的結果是拼接數組。

concat 方法將建立一個新數組，然後將調用它的對象(this 指向的對象，即原始數組)中的元素以及所有參數中的數組類型的參數中的元素以及非數組類型的參數本身按照順序放入這個新數組,並傳回該數組。 concat 方法並未修改原數組和參數數組，而且對非數組物件同樣有效果。

1. 傳回拼接的新數組；

2. 不修改原始數組和參數數組；

3. 參數可以是非數組。

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

every() 方法測試數組的所有元素是否都通過了指定函數的測試。 

arr.every(callback) 會對每個元素都執行 callback 方法，直到 callback 回傳 false。有時 every 方法會和 forEach 方法相比較，因為 forEach 無法停止，而 every 方法返回 flase 時可以中途停止。

1. 若全部通過測試，函數回傳值 true，中途退出，回傳 false；

2. 不對原數組產生影響。

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

filter() 方法使用指定的函數測試所有元素，並建立一個包含所有通過測試的元素的新數組。

其實這個方法就是一個過濾方法，前面那個 every 方法，只判斷不過濾，filter 會過濾掉一些不符合條件的，並返回新數組。

1. 傳回一個滿足過濾條件的新陣列；

2. 不會改變原數組。

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

forEach() 方法對數組的每個元素執行一次提供的函數(

forEach() 方法對數組的每個元素執行一次提供的函數(

forEach()。 
函數沒有回傳值，即 underfined；
不會對原數組產生影響。

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

// 注意索引2被跳过了，因为在数组的这个位置没有项
var result = [2, 5, 9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 9
result //underfined

indexOf

indexOf()方法返回給定元素能找在數組中找到的第一個索引值，否則返回-1。
回傳值是找到元素的索引值或 -1；
不會對原數組產生影響。

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

join

join() 方法將陣列中的所有元素連接成一個字串。

其實，對於 join 想到的第一個是字串的 split 操作，這兩個經常搭配用來處理字串。
傳回拼接的字串；
不會對原數組產生影響。

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

lastIndexOf() 方法返回指定元素（也存在不有效的 JavaScript 值或不存在1組（即存在1）的 JavaScript 組數，即存在數字類型的從陣列的後面向前查找，從 fromIndex 開始。 

其實這個就是 indexOf 的翻版。
回傳找到的第一個元素的索引；
不對原數組產生影響。

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

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。 

map reduce 这两个函数在处理数组上一直都是一把手，带来很大的便捷性。

1. 返回一个经过回掉函数处理的新数组；

2. 不对原数组产生影响。

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

reduce

reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始合并，最终为一个值。 

reduce 是一个合并的过程，从左到右，直到把所有元素合并到一起，并返回最终的结果。它接受两个参数，第一个参数是一个回掉函数，第二个参数是一个初始值，表示处理第一个元素时的前一个值。这个回掉函数接受四个参数，依次是 accumulator（上次处理的结果），currentValue（当前元素的值），index（当前元素索引），array（调用 reduce 的数组）。

1. 返回最终合并的结果，即回掉函数的输出，可以为字符串，对象，数组等任意结果；

2. 不对原数组产生影响。

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

reduceRight

reduceRight() 方法接受一个函数作为累加器（accumulator），让每个值（从右到左，亦即从尾到头）缩减为一个值。（与 reduce() 的执行方向相反）

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

push() 方法添加一个或多个元素到数组的末尾，并返回数组新的长度（length 属性值）。

如果把数组当作栈，push pop 操作是栈进和出，而往往很多人会忽略函数执行后的返回值。

1. 返回 push 操作执行之后数组的长度；

2. 肯定改变。

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

pop

pop() 方法删除一个数组中的最后的一个元素，并且返回这个元素。 

1. 返回删除的这个元素；

2. 肯定改变。

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

unshift

unshift() 方法在数组的开头添加一个或者多个元素，并返回数组新的 length 值。

1. 返回 length 值；

2. 肯定改变。

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

shift

shift() 方法删除数组的 第一个 元素，并返回这个元素。该方法会改变数组的长度。 

shift 方法和 push 方法可以组成一个队列的操作啦。

1. 返回删除的这个元素；

2. 肯定改变。

reverse

reverse() 方法颠倒数组中元素的位置。第一个元素会成为最后一个，最后一个会成为第一个。 

1. 函数返回值是修改了的原数组；

2. 原数组会修改。

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

slice

slice() 方法会浅复制（shallow copy）数组的一部分到一个新的数组，并返回这个新数组。 

slice 的参数包括拷贝的初识位置，结束位置（左闭右开），与 splice 有区别。由于不会改变原数组，这个数组可以用于前拷贝，比如经常看别人使用： arr.slice(0) ，表示拷贝数组。

1. 返回浅拷贝后的新数组；

2. 不会改变原数组。

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

splice

splice() 方法用新元素替换旧元素，以此修改数组的内容。 

如其名，分割，会修改原数组的内容，返回一个新数组，而且它的参数也比较多，第一个参数表示初始位置，第二个参数表示分割长度，第三个参数及以后表示分割后在分割处添加新元素。

1. 返回分割的元素组成的数组；

2. 会对数组进行修改，原数组会减去分割数组。

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

some() 方法测试数组中的某些元素是否通过了指定函数的测试。 

sort

sort() 方法对数组的元素做原地的排序，并返回这个数组。 sort 排序可能是不稳定的。默认按照字符串的Unicode码位点（code point）排序。 

sort 函数用于排序，比较常用，若没有制定排序函数，则按照 unicode 位点进行排序，而且数字会被转成字符串，所以 ‘123’ 要排在 ‘11’ 的后面。

我们会用 sort 做一些有意思的排序，比如汉字按照拼音排序。

1. 返回排序后的原数组；

2. 会对数组进行修改。

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 可以对汉字进行排序，当同时出现汉字和字母的时候会有 bug：

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

toString

toString() 返回一个字符串，表示指定的数组及其元素。 

显然，这个方法和 join 方法比较一下。

1. 返回拼接的字符串；

2. 不会改变原数组。

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

ES6 中新添的数组方法

上面的这些方法都是 ES5 的，来看看 ES6 添加了哪些新方法。

copyWithin

copyWithin() 方法会浅拷贝数组的部分元素到同一数组的不同位置，且不改变数组的大小，返回该数组。 

接受三个参数，分别是要拷贝到的位置 target，拷贝开始位置 start 和结束位置 end。

1. 返回修改了的原数组；

2. 会对数组进行修改，且是浅拷贝；

3. 参数可负，负值时倒推，且 end 为空表示数组长度。

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

find

如果数组中某个元素满足测试条件，find() 方法就会返回满足条件的第一个元素，如果没有满足条件的元素，则返回 undefined。 MDN array.find 。

1. 返回找到的那个元素，若未找到，返回 underfined

2. 不对原数组产生影响。

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

findIndex

findIndex()方法用来查找数组中某指定元素的索引, 如果找不到指定的元素, 则返回 -1。 

这个方法可以参考 find 方法，只是返回值是元素的索引而非元素本身。

fill

使用 fill() 方法，可以将一个数组中指定区间的所有元素的值, 都替换成或者说填充成为某个固定的值。 

fill 方法接受三个参数，第一个参数 value 表示要填充到值，后面两个 start 和 end 表示开始和结束位置，可选，且左闭右开。

1. 函数返回值是修改了的原数组；

2. 可对数组产生影响。

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

keys

数组的 keys() 方法返回一个数组索引的迭代器。 

这个方法会返回一个数组索引的迭代器，迭代器在 ES6 中有特殊的用途。

1. 函数返回一个迭代器对象；

2. 不会改变原数组。

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

entries() 方法返回一个 Array Iterator 对象，该对象包含数组中每一个索引的键值对。 

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

includes() 方法用来判断当前数组是否包含某指定的值，如果是，则返回 true，否则返回 false。 

该函数接受两个参数，第二个参数表示开始查找位置，起始位置为 0。这个方法与 indexOf 方法最大的区别不仅在于返回值一个是索引，一个是布尔值，indexOf 方法使用的是 === 来判断，无法判断 NaN 情况，而 includes 可以判断。

1. 返回 true 或 false；

2. 不会改变原数组。

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