繼續學習 JavaScript 陣列(Array)還沒看完的方法吧!

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

Let's go

Array.prototype.map()

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

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])

• callback:為產生新陣列之元素的回呼函式，可傳入三個參數：
  • currentValue
    原陣列目前所迭代處理中的元素。
  • index
    原陣列目前所迭代處理中的元素之索引。
  • array
    呼叫 map 方法的陣列。
  • thisArg
    選擇性的參數。執行 callback 回呼函式的 this 值。

Array.prototype.map()

map的意思是映射，維基百科中對於映射的定義是:

設 A,B 是兩個非空集合，若對 A 中的任一元素 x , 依照某種規律（或法則）f , 恆有 B 中的唯一確定的元素 y 與之對應，則稱對應規律 f 為一個從 A 到 B 的映射」

要比較好記的方式可以想成當輸入一個x值時，會有一個對應的y值輸出

且若是一個稀疏的陣列，則使用map()時，會將稀疏的位置一樣回傳

// 一個稀疏陣列
const array = [1,2,,3];
const newArray = array.map(value => value * value);
// [1, 4, empty, 9]
console.log(newArray);
// [1, 2, empty, 3]
console.log(array);

Array.prototype.filter()

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

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

• callback:此函式為一個斷言，用於測試陣列中的每個元素。回傳值為 true 時將當前的元素保留至新陣列中，若為 false 則不保留。可傳入三個參數：
  • element
    原陣列目前所迭代處理中的元素。
  • index
    原陣列目前所迭代處理中的元素之索引。
  • array
    呼叫 filter 方法的陣列。
  • thisArg
    可選的。執行 callback 回呼函式的 this 值。

Array.prototype.filter()

且filter()會跳過稀疏陣列的空值部分，永遠只會是個密集陣列

const array = [1,2,3,4,,5,6];
const newArray = array.filter((element,index) => (index + 1) % 2);
// [1, 3, 6]
console.log(newArray);
// [1, 2, 3, 4, empty, 5, 6]
console.log(array);

Array.prototype.reduce()

回傳值，原陣列不改變

arr.reduce(callback[accumulator, currentValue, currentIndex, array], initialValue)

• accumulator(累加器):一開始執行時，若是有初始值，則將初始值作為 accumulator(累加器) 的第一個數值與陣列元素目前的值一併傳入函式運算
• currentValue: 當前的陣列元素值
• currentIndex: 當前陣列元素的索引值元素。若有初始值則從索引值0的位置開始，如果沒有，則從索引值1的位置開始
• array:使用 reduce() 方法的陣列

Array.prototype.reduce()

使用reduce()時，累加器與下一個元素值進行運算並得到一個值，且這個值會成為累加器的值並繼續跟下一個元素運算

而且處理陣列元素順序為由索引低至索引高(由左至右)

const array = [1,2,3];
const value = array.reduce((accumulator,currentValue) => accumulator * currentValue,1);
console.log(value);

執行步驟如下：

1. 初始值=1，此時 accumulator = 1,currentValue = 1 (陣列索引值0的值)，並帶入函式運算得到 1*1 = 1， accumulator 的值變為1
2. accumulator = 1,accumulator = 1,currentValue = 2，並帶入函式運算得到 1*2 = 2，accumulator 的值變為2
3. accumulator = 2,accumulator = 2,currentValue = 3，並帶入函式運算得到 2*3 = 6，accumulator的值變為6
4. 回傳最後運算的值 = 6

Array.prototype.reduceRight()

回傳值，原陣列不改變

和 reduce() 行為相同，但處理陣列元素順序為由索引高至索引低(由右至左)

const array = [1,2,3];
const value = array.reduceRight((accumulator,currentValue) => accumulator * currentValue,1);
console.log(value);
console.log(array);

執行步驟如下：

1. 初始值 = 1，此時 accumulator = 1,currentValue = 3(陣列索引值2的值)，並帶入函式運算得到 1*3 = 3，此時 accumulator 的值變為 3
2. accumulator = 3,currentValue = 2，並帶入函式運算得到 3*2 = 6，accumulator 的值變為6
3. accumulator = 6,currentValue = 1，並帶入函式運算得到 6*1 = 6，accumulator 的值變為6
4. 回傳最後運算的值 = 6

Array.prototype.every()

回傳布林值

當元素都回傳 true 時，才會回傳 true ，如果有任一個元素為 false 則回傳 false並停止走訪陣列

every()最終會回傳的值是一個布林值

const array = [1,3,5];
// 檢查是否有餘數，餘數不為0時回傳 true
const checkRemainder = array.every(value => value % 2 );
   
console.log(checkRemainder); 

Array.prototype.some()

回傳布林值

當元素都回傳 false 時，才會回傳 false ，如果有任一個元素回傳 true ，則回傳 true ，並停止走訪整個陣列

const array = [1,3,5];
// 檢查是否有餘數，餘數為0時回傳 true
const checkRemainder = array.some(value => !value % 2);
console.log(checkRemainder);

Array.prototype.foreach()

走訪陣列

逐一將陣列元素值傳入自定義的函式中運算

沒有提供方法可以停止foreach走訪陣列，如果需要停止則需要丟出(throw)例外

mdn:除非是拋出異常，否則並沒有中止 forEach() 迴圈的辦法。如果你需要這樣做，forEach() 就是錯誤的用法，相反的，應該要用簡單的迴圈。如果你要測試陣列裡面的元素並回傳布林值，可以用 every() 或 some()。如果可以的話，新的方法 find() 或 findIndex() 也可以用於 true 值之後提前終止。

const array =[1,2,3];
array.foreach(function(value,index){
    console.log(value);
    console.log(index);
});

Array.prototype.indexOf()

回傳索引值或元素值

arr.indexOf(searchElement[, fromIndex])

• searchElement:欲在陣列中搜尋的元素。
• fromIndex:陣列中搜尋的起始索引。

Array.prototype.indexOf()

在陣列中由左至右找尋元素並回傳第一個被找到的元素索引值，沒有的話回傳-1

const array = ['a','b','c'];
// 回傳 index = 0
console.log(array.indexOf('a'));
// 在索引值2的位置開始找元素a，所以找不到元素，index = -1
console.log(array.indexOf('a',2));

Array.prototype.lastIndexOf()

回傳索引值或元素值

arr.lastIndexOf(searchElement, fromIndex)

• searchElement:欲在陣列中搜尋的元素。
• fromIndex:要由陣列尾部向後（即向前）搜尋的啟始索引。

Array.prototype.lastIndexOf()

行為和 indexOf()相反，從陣列最後面找尋元素並回傳第一個符合的索引值

const array = ['a','b','b','c'];
// 回傳 index = 0
console.log(array.lastIndexOf('a'));
// 回傳 index = 2
console.log(array.lastIndexOf('b',2));

ES6: Array.prototype.copyWithin()

原陣列會改變

copyWithin() 方法會對陣列的一部分進行淺拷貝至同一陣列的另一位置並回傳此陣列，而不修改其大小。

arr.copyWithin(target)
arr.copyWithin(target, start)
arr.copyWithin(target, start, end)

• target: 要複製序列（sequence）至該位置的索引（起始為 0）。若為負數，target 將會自陣列末項開始計算。
• start: 開始拷貝的起始元素索引（起始為 0。若為負數，start 將會自陣列末項開始計算。
• end : 結束拷貝的結尾元素索引（起始為 0）。若為負數，end 將會自陣列末項開始計算。

Array.prototype.copyWithin()

這邊要注意的是要拷貝的陣列不包含end索引值上的值

讓我們看看下面的例子加速理解

Ex:

var array = ['a', 'b', 'c', 'd', 'e'];

// 被拷貝的陣列元素:b,c，從元素a的位置開始取代
// ['b', 'c', 'c', 'd', 'e']
console.log(array.copyWithin(0,1,3));

Ex2:

var array1 = ['a', 'b', 'c', 'd', 'e'];
// 被拷貝的陣列元素:b,c,d,e，從元素a的位置開始取代
// ['b', 'c', 'd', 'e', 'e']
console.log(array1.copyWithin(0,1));

Ex3:

var array2 = ['a', 'b', 'c', 'd', 'e'];
// 被拷貝的陣列元素:c,d，從元素e的位置開始取代
// 要注意的是如果要取代的位置後方已經沒有元素，則只會取代存在的元素
// ['a', 'b', 'c', 'd', 'c'];
console.log(array2.copyWithin(-1,-3,-1));

對於陣列方法的介紹還有一天

明天見~