iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
2
Modern Web

陣列大亂鬥系列 第 5

Day 4:For Something and Something Else

  • 分享至 

  • xImage
  •  

前言

不得不承認,今天名字取得超級文不對題,堂堂開啟命名困難模式 (就跟下 CSS class name 一樣 XDD)。
總之,今天要講的議題是有關於 for loop 跟 array 的關係。

For 迴圈應該是大部分的程式與語法中,會第一個接觸到有關資料處理的部分,我個人覺得,它語法易懂好上手(語句很直觀)。
但是它也是普遍上認定擁有最複雜結構的迴圈語法。


for loop

for 迴圈的結構,基本上可以分為四大塊,分別是:

  1. 初始化 (initialization)
  2. 驗證區 (condition)
  3. 更新區 (final-expression)
  4. 執行區 (statement)

初始化區塊:就是定義這組迴圈要執行的起始值,在 JS 中會採用 var 或是 let 進行宣告,PHP 就是採用常規的 $ 字號。 var 的作用域是 function 所以會產生外溢的情況,而 let 因為作用域是 scope 所以會被限制在 for 迴圈的大括號中。

驗證區:基本上就是一個判斷式,用以決定是否需要執行接下來 執行區 以及 更新區 的內容,此去區塊若設定錯誤,有可能形成無限迴圈,導致執行序無法終止。

更新區:雖然是放在第三塊,但是它其實是整個過程中最後才會執行的內容。主要的目的就是修改初始宣告 / 上次執行後的值,以讓下次驗證區再次執行判斷。此區塊若設計不慎,有可能形成無限迴圈

執行區:其實就是我們平常最常見的內容了,因為 for 迴圈的主要目的 / 行為,就是重複某項行為或是結構。因此,這邊會放的,就是需要重複執行的 function 或是重複輸出的內容。

接下來會針對基本結構進行說明。

JS

以 javascript 來說,for 迴圈只有一種結構,內含一種基本型跟三種變化型。

基本型

// javascript

// for 迴圈基本型

for (let i = 0; i < 10; i++) {
    // do something
}

變化型一

// javascript

// for 變化型一:去除初始化區塊
let i = 0

for (; i < 10; i++) {
    // do something
}

變化型二

// javascript

// for 變化型二:去除驗證區

for (let i = 0; ; i++) {
    if (i > 10) {
        break;
    }
    // do something
}

變化型三

// javascript

// for 變化型三:去除更新區

for (let i = 0; i < 10;) {
    // do something
    i++;
}

從以上四種結構可以發現,對 for loop 來說,只要你有做到指定的三件事(執行區不算),它其實並沒有強求一定要把相關內容放在預設好的位置上,但是要記得,「閱讀性」會影響到你的撰寫準則。
如過各位覺得以下的寫法很好閱讀的話,也歡迎多多使用。(偷笑~)

// javascript

let i = 0

for (;;) {
    if (i > 10) break;
    // do something
    i++;
}

(迷之音:結果你講了這麼長,阿陣列哩??)

這部分就要回憶起我們在之前有說過的,陣列的重點是什麼??當然就是索引值、長度阿。

因此,我們只要活用上一篇的內容就可以得到以下的結果:

// javascript
const ary = [1, 2, 3]

for (let i = 0; i < ary.length; i++) {
    console.log(ary[i]);
}
// > 1
// > 2
// > 3

這樣是不是很輕鬆愉快呢?

不過要額外注意的是,因為每次進行循環的時候都重新計算陣列長度會很消耗資源,所以會建議先在外部以變數進行儲存,以增加運行速度。

PHP

現在換來看 PHP 的部分,其實除了語言特性之外,兩者的寫法幾乎一模一樣。也因此,不可免俗地也分為以下四個區塊:

  1. 初始化
  2. 驗證區
  3. 更新區
  4. 執行區

以大括號的有無可以再分成兩種寫法,每種依舊有一種基本型、三種變化型。

基本型

// php

// for 迴圈基本型

<?
    for ($i = 0; $i < 10; $i++) {
        // do something
    }
?>

變化型一

// php

// for 變化型一:去除初始化區塊
<?
    $i = 0;

    for (; $i < 10; $i++) {
        // do something
    }
?>

變化型二

// php

// for 變化型二:去除驗證區

<?
    for ($i = 0; ; $i++) {
        if ($i > 10) {
            break;
        }
        // do something
    }
?>

變化型三

// php

// for 變化型三:去除更新區
<?
    for ($i = 0; $i < 10;) {
        // do something
        $i++;
    }
?>

也因此,也會出現底下這種潮到出水的結構:

// php

<?
    $i = 0;
    for (;;) {
        if ($i > 10) {
            break;
        }
        // do something

        $i++;
    }
?>

另一種寫法是冒號形式,以取代大括號,就像以下這樣:

基本型 - 冒號模式

// php

// for 冒號基本型

<?
    for ($i = 0; $i < 10; $i++):
        // do something
    endfor;
?>

所以接下來我們只需要運用到 count() 就可以進行陣列的操作了

<?
    $ary = ['A', 'B', 'C', 'D'];

    for ($i = 0; $i < count($ary); $i++) {
        echo $ary[$i];
    }
    // A
    // B
    // C
    // D
?>

不過要注意的是,其實 PHP 的 array 是可以帶 key 值的,因此以上的寫法,只能用來執行自動編碼 (不具有 key 值) 的 PHP 陣列。

另外就是,為了避免每次進行循環的時候都要重新計算陣列長度,所以會強烈建議先在外部以變數進行儲存,以優化效能。


比較

標題 \ 分類 JS PHP
寫法 1種 2種
變化型 3種 3種
用途 重複執行、重複輸出結構 重複執行、重複輸出結構
對象 數字、陣列 數字、不具 key 值的陣列

參考資料

以上內容將會不同步發佈在 blogger 中:第 11 屆鐵人賽系列文


上一篇
Day 3:This's Counting Time
下一篇
Day 4.5:For Something Similar
系列文
陣列大亂鬥30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言