常用陣列方法

yvonneit發表於2019-04-07

前言

我平時都是需要用到陣列時再去搜方法,沒想到面試中好幾次都被問到對陣列的一些操作,所以每次都黑人問號,基本只記得什麼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入門-阮一峰

漁人的部落格

相關文章