JavaScript 探險方針 006 – 陣列沿伸

0. 前言


但如果今天我們有多筆數值要進行處理,無論是篩選或合併透過迴圈都會增加閱讀的複雜度,而此時我們就能使用 JS 提供的高階方法,簡單的處理這些事項了。

1. 重點


concat 可以新增陣列 / 數字,而利用 spread operator 代表逐一推入數字
List item
List item

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. 後話


透過上述這接方法都能簡化我們處理陣列時的複雜度,雖然有些方法反而會增加處理時間,但對於初學來說,可讀性會更為重要。

而我們的基礎教學大概也只到這邊就結束了,希望各位都能吸收到並妥善使用 ~~

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.