經常使用數組方法

前言

我平時都是須要用到數組時再去搜方法，沒想到面試中好幾回都被問到對數組的一些操做，因此每次都黑人問號，基本只記得什麼pop/push/shift，就想着找點資料好好總結一下。

Array數組方法

forEach

語法：arr.forEach(callback[, thisArg]);

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

• 函數沒有返回值，即 underfined；
• 不對原數組產生影響。

var array1 = ['a', 'b', 'c'];

array1.forEach(function(element) {
  console.log(element); //"a"、"b" 、"c"
});

複製代碼

indexOf

indexOf()方法返回給定元素能找在數組中找到的第一個索引值，不然返回-1。

• 返回值是找到元素的索引值或 -1；
• 不對原數組產生影響

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

concat

concat()方法用於數組的拼接，參數是一個或多個數組，返回的結果是拼接數組。

• 返回拼接的新數組；
• 不修改原數組和參數數組；
• 參數能夠是非數組

var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2)); // Array ["a", "b", "c", "d", "e", "f"]
複製代碼

join & toString

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"
複製代碼

toString() 返回一個字符串，表示指定的數組及其元素。

• 返回拼接的字符串；
• 不會改變原數組

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

every

every() 方法測試數組的全部元素是否都經過了指定函數的測試。

arr.every(callback)會對每個元素都執行 callback 方法，直到 callback 返回 false。

和 forEach 方法相比較： forEach 沒法中止，而 every 方法返回 flase 時能夠中途中止。

map

map() 方法返回一個由原數組中的每一個元素調用一個指定方法後的返回值組成的新數組。

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

reduce

reduce() 方法接收一個函數做爲累加器（accumulator），數組中的每一個值（從左到右）開始合併，最終爲一個值。

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

push & pop

push() 方法添加一個或多個元素到數組的末尾，並返回數組新的長度（length 屬性值）。

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

pop() 方法刪除一個數組中的最後的一個元素，而且返回這個元素。

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

注意push和pop方法執行以後的返回值

shift & unshift

shift() 方法刪除數組的 第一個 元素，並返回這個元素。該方法會改變數組的長度。

var a1 = [1, 2, 3];
var a2 = a1.shift();
a1 // [2, 3]
a2 // 1
複製代碼

unshift() 方法在數組的開頭添加一個或者多個元素，並返回數組新的 length 值。

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

slice & splice

slice() 方法會淺複製（shallow copy）數組的一部分到一個新的數組，並返回這個新數組。

參數包括拷貝的初識位置，結束位置（左閉右開），與 splice 有區別。

• 返回淺拷貝後的新數組；
• 不會改變原數組。

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

splice() 方法用新元素替換舊元素，以此修改數組的內容。

參數： 第一個參數表示初始位置，第二個參數表示分割長度，第三個參數及之後表示分割後在分割處添加新元素。

• 返回分割的元素組成的數組；
• 會對數組進行修改，原數組會減去分割數組。

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]
複製代碼

ES6中新增的數組方法

find

若是數組中某個元素知足測試條件，find() 方法就會返回知足條件的第一個元素，若是沒有知足條件的元素，則返回 undefined。

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

includes

includes() 方法用來判斷當前數組是否包含某指定的值，若是是，則返回 true，不然返回 false。

該函數接受兩個參數，第二個參數表示開始查找位置，起始位置爲 0。這個方法與 indexOf 方法最大的區別不只在於返回值一個是索引，一個是布爾值，indexOf 方法使用的是 === 來判斷，沒法判斷 NaN 狀況，而 includes 能夠判斷。

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

fill

使用 fill() 方法，能夠將一個數組中指定區間的全部元素的值, 都替換成或者說填充成爲某個固定的值。

參數：第一個參數 value 表示要填充到值，後面兩個 start 和 end 表示開始和結束位置，可選，且左閉右開。

• 返回修改了的原數組；
• 會對數組進行修改，且是淺拷貝；
• 參數可負，負值時倒推，且 end 爲空表示數組長度。

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
複製代碼

copyWithin()

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

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
複製代碼

entries() & keys() & values()

均可以用於遍歷數組，且都返回一個遍歷器對象，能夠用for...of循環進行遍歷，惟一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

for (let index of ['a', 'b'].keys()) {
  console.log(index); //0 1
}

for (let elem of ['a', 'b'].values()) {
  console.log(elem); // 'a' 'b'
}

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem); // 0 "a", 1 "b"
} 
複製代碼

flat() & flatMap()

數組的成員有時仍是數組，Array.prototype.flat()用於將嵌套的數組「拉平」，變成一維的數組。該方法返回一個新數組，對原數據沒有影響。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
複製代碼

參考：

MDN中的數組方法

Array數組方法

ES6入門-阮一峯

漁人的博客