第11屆鐵人賽 ✧ Day 8：Visit For Each Whitch Is Exist

## 前言 經過前面近 10 篇的內容之後，這次我們終於要正式進入 Array 的專屬方法了！！ 什麼？你說這樣前面不是都在講廢話？ 不不，要知道，雖然前面的東西是屬於觀念跟基礎內容，但是泛用型的方法也有好用的時候。 要知道，一切的東西都是工具，工具只有適不適合，沒有好不好的問題。 就像是，難道你學了 CSS 中的 flex 跟 grid 就不用學 float 跟 table 嗎？ 一切事物的演進跟脈絡，才能堆積出現在抬眼可見的面貌。 吊完書袋之後，便來看一下我們這次的主角 `forEach()` 吧！ 當然我是不會承認，以上全是寫到壓力太大開始抽風的產物 (遠目 ---- ## forEach ### Javascript 從 JS 的角度下去看的話，`forEach()` 它會將陣列中的所有內容都走過一遍 (傳入 function 中)。除非傳送 error 不然無法中途中斷。 原則上，會回傳 `undefined`，所以無法使用鍊式結構。 內部傳入的 callback function 最多可以承接三個參數，依序為一下面的內容： 1. value 2. index 3. this array ```javascript // 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 // 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 // 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 // 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()` 有兩種形式： 1. foreach($array as $value) 2. foreach($array as $key => $value) 這部分其實是因應 PHP 的陣列可以具有 key 值，所以它在承接參數的時候，可以單獨接 value 或是 key 跟 value 都接。(但是沒有只接 key 的選項) ```php // php <? $ary = array( 'one' => 'A', 'two' => 'B', 'three' => 'C', ); foreach($ary as $value) { echo $value . "
" } // > A // > B // > C foreach($ary as $key => $value) { echo $key . ": " . $value . "
" } // > one: A // > two: B // > three: C ?> ``` 遇到空插槽時，會報錯： ```php // php <? $ary = array(1, 2, , 4, 5); foreach($ary as $value) { echo $value . "
" } // > FATAL ERROR syntax error, unexpected ',', expecting ')' on line number 2 ?> ``` --- ## 比較

標題\分類	JS	PHP
對象	array	array
參數	value, index, array	key, value
未初始化資料	跳過	報錯

--- ## 參考資料 - [http://docs.php.net/](http://docs.php.net/) - [https://developer.mozilla.org/zh-TW/](https://developer.mozilla.org/zh-TW/) - [https://www.w3schools.com/](https://www.w3schools.com/)

第11屆鐵人賽 ✧ Day 7：Continue and From The Beginning

## 前言 今天要講的內容也是迴圈操作的一部份 `continue`。 `continue` 跟 `break` 不一樣的地方在於，`break` 會中止整個環圈或是執行去的操作，但是 `continue` 主要是**跳過**這次迴圈、執行序，之後直接進入下一輪的迴圈 / 進入指定的進入點。 接下來就是看 `continue` 的相關介紹吧。

第11屆鐵人賽 ✧ Day 6：Break and Go Next

## 前言 之前講了一些有關迴圈的內容，今天要來討論的，就是如何中斷、跳脫正在運行中的迴圈。 這次要看的是 `break`，`break` 的做用就跟他的名字一樣，用於中斷執行序、跳出迴圈或是作用區。

第11屆鐵人賽 ✧ Day 5：To Do Until The End

## 前言 其實之前有一段時間很排斥用 `while` / `do...while` 這兩種語句，因為對當時剛接觸迴圈的自己來說，`while` 的用法其實很不直觀，會把**宣告式**跟**遞增**的部分寫在別的地方，這樣的作法對於初學者來說，是相對的不不友善，也因此，有很長一段時間陷入只會使用 `for` 迴圈的地步。 一直到後來，真的很認真地去審視 `for` 到底是在做什麼，進一步理解並體會到它的變化型之後，才慢慢可以接受 `while` 的語句構成跟使用。 接下來，就讓我們來看看 `while` 跟 `do...while` 兩種語句的應用方式吧。

第11屆鐵人賽 ✧ Day 4.5：For Something Similar

## 前言 此篇的內容其實是上一篇的延伸，當然我是不會承認，拆成兩篇是因為我當下寫不完的原因。<<<被打飛 這次要講的是 for 的變化型 (自己覺得) for...in 跟 for...of。 那麼，因為這兩個主要是用於 JS object 的方法，所以這次的內容主要回著墨在 JS 身上。

第11屆鐵人賽 ✧ Day 4：For Something and Something Else

## 前言 不得不承認，今天名字取得超級文不對題，堂堂開啟命名困難模式 (就跟下 CSS class name 一樣 XDD)。 總之，今天要講的議題是有關於 for loop 跟 array 的關係。 For 迴圈應該是大部分的程式與語法中，會第一個接觸到有關資料處理的部分，我個人覺得，它語法易懂好上手(語句很直觀)。 但是它也是普遍上認定擁有最複雜結構的迴圈語法。

第11屆鐵人賽 ✧ Day 3：This's Counting Time

## 前言 接下來要討論的，就是可以說是陣列命脈的長度議題。 這點在 PHP 中相對比較不明顯，因為就如同之前所述的，PHP 的標準陣列是具有 key 值的，也因此，在 key 值不動的形況下，順序的重要性就不明顯了。 這點如果各位有組過 JS 的 object 應該也會發現到，今天你在程式中所排定的參數順序，不一定能代表從 console 打回來的內容順序。 但是在 JS 的陣列終究不是如此了，因為它只擁有索引值，所以任何會影響到索引值的行為、動作，如：排序、新增、刪除……等，皆會對該陣列造成重大的影響。 所以接下來，我們就來看一下兩者分別用什麼方式來計算自身的長度吧。

第11屆鐵人賽 ✧ Day 2：Is Array or Not

## 前言 這一段要講的是有關於資料型別的問題，今天當收到一段 / 一組資料的時候，絕對不會隨隨便便的就開 function 下去操作它，總歸是要先瞭解說：資料結構長怎樣？它是哪種型別、可以怎樣操作？有沒有跟其他相關聯？……種種的問題。 甚至於會有資料有沒有符合規範(指定形式、型別)的問題。所以今天會需要去檢查這些資料是不是我們要的內容。 以下的敘述中，基本上還是以 JS 為主要切入點，這點還請多多包涵。

第11屆鐵人賽 ✧ Day 1：關於那個 array

## 前言 接下來我們要進入本篇(？？)了。既然主題是要聊有關於 array 的事情，那我們第一步當然是要先看看 array 的組成。 如果各位看倌有在網路上蒐過相關文章的話，依據翻譯的不同，大致上會有「陣列」、「數組」兩種說法，我自己本身是喜歡稱呼它為陣列，不過還是建議都要了解一下不同的名詞，這樣在看資料的時候會痛比較小一點。當然，如果習慣性看原文的同志們，就不會有這個困擾了。 陣列基本上，是程式語法在處理資料的時候最常運用的格式之一，再加上他接受巢狀的行程多維，所以既是最簡單；也是最複雜的資料型態。 當然，畢竟接下來都是簡單的帶過，所以我們主要要看的範圍會是一維陣列，如果對於多維陣列有興趣的各位，可以在自行從下方三個網站中，查看並精進相關細節。

第11屆鐵人賽 ✧ Day 0：在開始之前

## 前言 在主題文章開始之前，其實可以先聊聊當初為麼會想做這個主題。 說白點，其實這個內容充斥著滿滿的私心。

JavaScript 1 + 1 ✧ 累加

## 題目 計算 1 到 100 加總的結果。

JavaScript 1 + 1 ✧ 統計字母

## 題目 計算陣列中各個字母出現的次數。 ['L','o','r','e','m','i','p','s','u','m','d','o','l','o','r','s','i','t','a','m','e','t','c','o','n','s','e','c','t','e','t','u','r','a','d','i','p','i','s','i','c','i','n','g','e','l','i','t','A','d','c','u','l','p','a','m','a','g','n','a','m','p','r','a','e','s','e','n','t','i','u','m','e','t','q','u','a','s','i','s','t','e','r','e','p','r','e','h','e','n','d','e','r','i','t','p','e','r','s','p','i','c','i','a','t','i','s','i','u','r','e','a','d','i','p','i','s','c','i','r','e','p','e','l','l','a','t']

webpack 設定筆記 ✧ 多個進入點設定

## 目的 處理多個檔案進入點，使程式執行的時候可以同時針對多個檔案進行打包。

webpack 設定筆記 ✧ 用watch持續監測檔案變化

## 目的 之前 scripts 中的設定內容，是進行單次執行續，意思也就是說，當在進行任何的程式更新後，都需要重新執行一次 start 或 deploy 的指令。 其實這對於開發過程是一件很不方便的事情，因此可以增加「--watch」的指令，要求 webpack 持續偵測檔案內容的變化，並及時完成編譯。

webpack 設定筆記 ✧ 設定 NODE_ENV 環境變數

markdown ## process.env 為 node.js 的原生對象，然只在 MAC 中可以順利運行

webpack 設定筆記 ✧ 打包模式設定簡易版

markdown 未設定 mode 的情況下，預設為 production 模式。 在 production 模式下，webpack 會執行壓縮跟優化。(但打包時間較長)

webpack 設定附錄 ✧ 設定檔豆知識

markdown ## package.json 設定檔

webpack 設定筆記 ✧ 打包檔案路徑轉換

markdown ## PATH 檔案路徑設定

webpack 設定筆記 ✧ 入口參數、檔案設定

markdown ## 設定 webpack 入口參數 檔案名稱：webpack.config.js

webpack 設定筆記 ✧ 基礎環境架設

markdown ## 確認 Node.js 版本 請於終端機下進行操作