Day 8：Visit For Each Whitch Is Exist

第 11 屆 iThome 鐵人賽

DAY 10

Modern Web

陣列大亂鬥系列第 10 篇

11th鐵人賽

Hina Hina

團隊Amos的推坑教2.0

2019-09-25 22:52:56

666 瀏覽

前言

經過前面近 10 篇的內容之後，這次我們終於要正式進入 Array 的專屬方法了！！

什麼？你說這樣前面不是都在講廢話？

不不，要知道，雖然前面的東西是屬於觀念跟基礎內容，但是泛用型的方法也有好用的時候。

要知道，一切的東西都是工具，工具只有適不適合，沒有好不好的問題。

就像是，難道你學了 CSS 中的 flex 跟 grid 就不用學 float 跟 table 嗎？

一切事物的演進跟脈絡，才能堆積出現在抬眼可見的面貌。

吊完書袋之後，便來看一下我們這次的主角 forEach() 吧！

當然我是不會承認，以上全是寫到壓力太大開始抽風的產物 (遠目

forEach

Javascript

從 JS 的角度下去看的話，forEach() 它會將陣列中的所有內容都走過一遍 (傳入 function 中)。除非傳送 error 不然無法中途中斷。

原則上，會回傳 undefined，所以無法使用鍊式結構。

內部傳入的 callback function 最多可以承接三個參數，依序為一下面的內容：

value
index
this array

// javascript

const ary = [1, 2, 3]

ary.forEach(function(a, b, c) {
    console.log(`a: ${a}`)
    console.log(`b: ${b}`)
    console.log(`c: ${c}`)
})

// > a: 1
// > b: 0
// > c: 1,2,3

// > a: 2
// > b: 1
// > c: 1,2,3

// > a: 3
// > b: 2
// > c: 1,2,3

針對已被刪除或是未初始化的元素會進行略過。

還記得之前在 length 的章節有提到，length 雖然可以增加 array 的長度，但是它建立的會是空插槽。

在 forEach() 的認知上，這就叫做未初始化 (沒有 index)，所以會跳過而不執行，就像下面這樣：

// javascript

const aAry = [1, 2, , 4, 5, , 7]

aAry.forEach(function(item) {
    console.log(item)
})

// > 1
// > 2
// > 4
// > 5
// > 7

const bAry = [1, 2, 3]

bAry.length = 10
console.log(bAry)
bAry.forEach(function(item) {
    console.log(item)
})

// > [1, 2, 3, , , , , , , ]

// > 1
// > 2
// > 3

forEach 的執行範圍，在傳入的當下就已經決定。因此，由 callback 新增的值不會被執行。

//  javascript

const ary = [1, 2, 3]

ary.forEach(function(item, i) {

    if(i === 1) {
        ary.push('new item')
    }

    console.log(item)
})
console.log(ary)

// > 1
// > 2
// > 3

// > [ 1, 2, 3, 'new item' ]

如果在 callback 中刪除部分元素，則已經執行過的索引不會再次執行。(有可能會導致部分資料被略過)

//  javascript

const ary = [1, 2, 3, 4, 5]
let shiftItem = '';

ary.forEach(function(item, i) {

    if(i === 2) {
       shiftItem = ary.shift()
    }

    console.log(item)
})
console.log(ary)
console.log(shiftItem)

// > 1
// > 2
// > 3    << i = 2
// > 5    << i = 4 => i = 3
// 因為陣列長度改變，導致 4 的 index 由 3 變成 2，然而 2 因為已經傳入過，所以不再再次執行。

// > [ 2, 3, 4, 5 ]
// > 1

PHP

在 PHP 中，foreach() 有兩種形式：

foreach($array as $value)
foreach($array as $key => $value)

這部分其實是因應 PHP 的陣列可以具有 key 值，所以它在承接參數的時候，可以單獨接 value 或是 key 跟 value 都接。(但是沒有只接 key 的選項)

// php

<?
    $ary = array(
        'one' => 'A',
        'two' => 'B',
        'three' => 'C',
    );

    foreach($ary as $value) {
        echo $value . "<br/>"
    }
// > A
// > B
// > C

    foreach($ary as $key => $value) {
        echo $key . ": " . $value . "<br/>"
    }
// > one: A
// > two: B
// > three: C
?>

遇到空插槽時，會報錯：

// php

<?
    $ary = array(1, 2, , 4, 5);

    foreach($ary as $value) {
        echo $value . "<br/>"
    }
    // > FATAL ERROR syntax error, unexpected ',', expecting ')' on line number 2
?>