關於陣列(Array)方法的介紹迎來最後一天，趕緊來看看吧!

為了方便閱讀，所以撰寫的格式基本上會以下圖所示:

Let's go

ES6: Array.prototype.keys()

回傳索引值或元素值

keys 方法會回傳一個包含陣列中的 每一個索引鍵(keys) 的新 Array Iterator 物件。

關於 Array Iterator 物件，在 MDN 中有這麼一段解釋:

可迭代協議: 可迭代（iterable）協議允許 JavaScript 物件定義或客制他們的迭代行為，例如哪些值可在 for..of 語法結構中被迭代出來。部分內建型別為擁有預設迭代行為的可迭代內建物件（built-in iterables），如 Array 或 Map，而其他型別（如 Object）則否。
可迭代協議

所以我們必須透過 for..of 將索引值取出。

const array = [1,2,3,4];
const iterator = array.keys();

for(let key of iterator){
    console.log(key);
}

ES6: Array.prototype.values()

回傳索引值或元素值

values() 方法會回傳一個包含陣列中的 每一個索引之對應值（values) 的新 Array Iterator 物件。

const array = ['aa','bb','cc','dd'];
const iterator = array.values();

for(let value of iterator){
    console.log(value);
}

ES6: Array.prototype.entries()

entries() 方法會回傳一個包含陣列中 每一個索引之鍵值對（key / value pairs) 的新 Array Iterator 物件。

const array = ['aa','bb','cc','dd'];
const iterator = array.entries();

for(let [key,value] of iterator){
    console.log(`索引值為:${key}，值為: ${value}`);
}

ES6: Array.prototype.find()

回傳索引值或元素值

arr.find(callback[, thisArg])

• callback:會處理陣列中每個元素的函數，它使用三個參數：
  • element
    在陣列中正被處理的元素。
  • index
    在陣列中正被處理的元素的索引。
  • array
    呼叫 find 的陣列。
  • thisArg
    執行 callback 函式時被當作 this 的物件。

Array.prototype.find()

find 方法會回傳第一個滿足所提供之測試函式的元素值。否則回傳 undefined。

const array = [1,-5,55,4,5];
const value = array.find(value => value >= 3);
console.log(value);

ES6: Array.prototype.findIndex()

回傳索引值或元素值

與 Array.prototype.find() 一樣，只是回傳的為元素的索引值

const array = [1,-5,55,4,5];
const value = array.findIndex(value => value >= 3);
console.log(value);

ES6: Array.prototype.fill()

原陣列會改變

arr.fill(value[, start[, end]])

• value:欲填入陣列的值。
• start:起始的索引值，預設為 0。
• end:結束的索引值

Array.prototype.fill()

fill 方法會將陣列中索引的第一個到最後一個的每個位置全部填入一個靜態的值。

const array = [1,-5,55,4,5];
//從索引值2的位置將值取代為4
const value = array.fill(4,2);
//[1, -5, 4, 4, 4]
console.log(value);

//將索引值2至索引值3(不包含)間的元素值取代為4
//[1, -5, 8, 4, 5]
const value2 = array.fill(8,2,3);
console.log(value2);

ES7: Array.prototype.includes()

回傳布林值

arr.includes(searchElement[, fromIndex])

• searchElement:要搜尋的元素。
• fromIndex:要於此陣列中開始搜尋 searchElement 的位置

Array.prototype.includes()

includes 方法會判斷陣列是否包含特定的元素，並以此來回傳 true 或 false。

const array = [1,-5,55,4,5];
const value = array.includes(-5);
console.log(value);

const value2 = array.includes(-9);
console.log(value2);

ES10: Array.prototype.flat()

回傳新陣列，原陣列不改變

var newArray = arr.flat([depth]);

• depth:指定巢狀陣列展開的深度。預設為1。

Array.prototype.flat()

flat 函數以遞迴方式將特定深度的子陣列重新串接成為一新的陣列

透過這個方法我們可以很快速地攤平多維陣列，變成一維陣列

const array = [1,-5,[55,33,1],4,[[5,7,9]]];
const value = array.flat();
console.log(value);

const value2 = array.flat(2);
console.log(value2);

在這之前的方法是運用 reduce() 搭配 concat() 完成

var arr1 = [1, 2, [3, 4]];
arr1.reduce((acc, val) => acc.concat(val), []);

ES10: Array.prototype.flatMap()

回傳新陣列，原陣列不改變

var new_array = arr .flatMap（function callback（currentValue [，index [，array]]）{
    //返回new_array的元素
} [，thisArg ]）

• callback:會處理陣列中每個元素的函數，它使用三個參數：
  • currentValue
    在陣列中正被處理的元素值。
  • index
    在陣列中正被處理的元素的索引。
  • array
    呼叫flatMap的陣列。
  • thisArg
    執行callback函式時被當作this的物件。

Array.prototype.flatMap()

是將** flat() 與 map() 合併運用**，先透過 map() 映射每個元素後再透過 flat() 將多維陣列攤平成一維陣列。

這邊要注意的是flat()的預設深度= 1，意思是只能將二維陣列攤平成一維陣列

var array = [1, 2, 3, 4];
const newArray = array.flatMap(value => [value * value]);
console.log(newArray);

以上是陣列的方法，相信如果能妥善運用的話，肯定在陣列的操作上功力會大增!!

速記表

但是...這麼多的方法是要怎麼記啊!!!

所以底下我整理了一個表格，記憶方式的參考依據為使用這個陣列方法後所得到的結果

對於我來說，我可以很快速地了解使用哪種方法會得到什麼值，可以更好記憶

關於陣列方法的介紹就到這裡囉！

明天見~