0. 前言
但如果今天我們有多筆數值要進行處理,無論是篩選或合併透過迴圈都會增加閱讀的複雜度,而此時我們就能使用 JS 提供的高階方法,簡單的處理這些事項了。
1. 重點
2. 內容
2.1. 陣列迴圈
在之前 004 我們提過的迴圈相當多種,基本都能套用,雖然能夠限制運行的條件,但容易造成架構冗長。這邊我們就複習下 forEach 以及學習 Spread Operator 方法吧。
2.1.1. forEach
JavaScript
{
let array = [3, 5, 7];
array.macro = "polo";
console.log(array);
array.forEach((element) => { console.log(element); })
}
// 3
// 5
// 7
2.1.2. Spread Operator
展開運算符(…)本質上不算迴圈結構,只是逐一將陣列中的元素讀取,但這種方式可以讓我們透過簡短一句搭配 filter 或 map 等陣列方法進行處理,省去不少的迴圈架構。
而 map() 的主要用途是建立個新的陣列,避免覆蓋到原始的資料。
JavaScript
{
let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = [...numbers.map(number => number * 2)];
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
}
2.2. 陣列合併
但如果我們今天有兩個陣列要合併,迴圈數值再各自 push 是很低效的方法,加長太多繁瑣的架構,為此 JS 有推出下面兩種方式,快速的將陣列進行合併。
那我個人比較偏好 Spread Operator,因為其架構類似乎 n-D 陣列的建立且使用方法廣泛。
2.5.1. concat
透過 concat 我們能直接在母陣列的後方加入的元素。
JavaScript
{
let array1 = [1, 2];
let array2 = [3, 4];
let array3 = [5, 6];
let newArray = array1.concat(array2, array3, 7, 8, [9, 10]);
console.log(newArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
2.5.2. Spread Operator
展開運算符允許我們展開陣列中的元素,逐一丟入新的陣列之中。
JavaScript
{
let array1 = [1, 2];
let array2 = [3, 4];
let array3 = [5, 6];
let newArray = [...array1, ...array2, ...array3, 7, 8, ...[9, 10]];
console.log(newArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
2.3. 陣列篩選
在前篇我們主要講到單筆資料的塞選結果,而此時我們則要透過 filter 方法進行處理整個陣列。
JavaScript
{
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.filter(element => element > 5));
}
3. 後話
透過上述這接方法都能簡化我們處理陣列時的複雜度,雖然有些方法反而會增加處理時間,但對於初學來說,可讀性會更為重要。
而我們的基礎教學大概也只到這邊就結束了,希望各位都能吸收到並妥善使用 ~~