本文內容涵蓋

• Web 應用程式生命週期
• 處理 HTML 以產生網頁
• JS 程式碼的執行順序
• 與事件互動
• 事件迴圈

Web 應用程式生命週期

Web 應用程式真正的生命起始於第四步驟：收到伺服器回傳的頁面時。

閱讀我吧！

RegExp in JavaScript

之前對正規表達式一直不太熟悉，也沒仔細去研究正則規則寫法是什麼種類，所以踩到支援性的雷。大多數正規式會支援正規表達式的原因是，它是一個對於文字操作非常強大的工具，本來要寫數十行複雜邏輯的判斷式，只要一行就能達成。

ES2018 新增的功能

正則表達式在 1999 年在 ECMAScript 標準第三版成為 JavaScript 的一部份，而在 ES2018 標準第九版時，新增了以下的功能，大幅改善對文字處理的能力。這邊文章要說明的是關於 assertions，大部分程式碼範例參考自此篇文章。

閱讀我吧！

記錄著關於初學 REACT 時，官方文件提及的主要概念，基本上都是文件上的內容，希望用自己是初心者的方式整理關於 JSX、生命週期、事件處理器、官方文件的觀念，可以更記得住。

1. Hello World

• 應用程式基本組成：元素與組件。

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));

往下瞭解其他概念之前，可以先閱讀「重新介紹 JavaScipt」，如果好幾年沒碰 JavaScript 的話，看一下「三個心法」。

閱讀我吧！

關於 Webpack

Webpack 是什麼？

它是一個「打包工具」。將眾多模組與資源打包成一包檔案，並編譯我們需要預先處理的內容，變成瀏覽器看得懂的東西，讓我們可以上傳到伺服器。

前端日新月異，我們寫的內容已不只是寫 HTML、CSS、JavaScript 單純的檔案。前端出現了許多預處理工具及框架，預處理工具如 PUG、SASS、Babel；框架如 Vue、React。不過瀏覽器並看不懂我們寫的預處理內容，每每都需要透過編譯才能使用，也因此出現了自動化工具，Webpack、Gulp、Grunt、Parcel、Browserify…等。

Webpack 能夠做什麼？為什麼？

閱讀我吧！

1. 使用 Array.includes 來處理多重條件

// 原始寫法
function test(fruit) {
  // 條件語句
  if (fruit === "apple" || fruit === "strawberry") {
    console.log("red fruit");
  }
}

乍看之下，寫法沒什麼錯誤。可是當我們有更多紅色水果的選項時，如 cherry（櫻桃）和 cranberries（蔓越莓），難道我們要增加更多的 || 邏輯運算子來判斷？

我們用 Array.includes 來改寫一次上面的判斷式：

// 改寫後
function test(fruit) {
  // 將選項提取出來，放入陣列當中
  const redFruits = ["apple", "strawberry", "cherry", "cranberries"];
  if (redFruits.includes("apple")) {
    console.log("red fruit");
  }
}

閱讀我吧！

Var

露出去的變數 i

for(var i = 0; i<10; i++) {
  console.log(i)
}
console.log(i) // 10

• 感謝 Reynold Cheng 於 2020/10/01 熱心指正第一個範例，結果為 10。

function scope：function 外就存取不到變數 i

閱讀我吧！

本篇文章翻譯自 How to clone an array in JavaScript - by Yazeed Bzadough on freeCodeCamp @medium，搭配 JS 的拷貝 by Kai @github 提及的概念，整理成筆記。

TL; TR

• 8. JSON.parse and JSON.stringify 是深拷貝。其他都是淺拷貝。
• 「call by reference」與「call by value」？
  • 基本型別 (Primitive Type) - number, string, boolean, null, undefined - 傳值
  • 物件 (Objects) - array, function, object - 傳址
  • array/object 當中若含有複合型別時，此複合型別是 call by reference 而不是 by value。
• 「淺拷貝」與「深拷貝」的定義與差異？
  • 淺拷貝在複製 object 時，會參考到同一個物件，並沒有將此物件拷貝到並建立出新的關聯。
  • 深拷貝在複製 object 時，會獨立出來不共用同一個記憶體位置，改動 newObject 時不會動到 oldObject。
• 這只是試看看能否用一個步驟就能深拷貝陣列的方式而寫的文章，網路上能找到其他更有趣的實作唷！
  • 更多深拷貝與淺拷貝的比較也可以參考 Larry Lu、ZHI-WEI
  • jquery - $.extend()
  • loadash - _.cloneDeep()

閱讀我吧！

目的

將 this 鎖在 function 當中。
為了取代舊有的.bind()（.bind() 會綁定 this 到指定的 obj）。

適合情境

只要 function 內的 this 還要再往下傳的時候，就適合使用 arrow function。

閱讀我吧！

安裝與設定環境

React 從一開始就被設計為逐步採用，可以根據需求來選擇使用 React 的範圍。

CDN

閱讀我吧！

Node.js 環境建置

• node.js

  • 不是程式語言，而是一個執行環境，能讓 JavaScript 運行於瀏覽器外。
  • 安裝：官網。LTS 是較穩定的版本，Current 是有其他新的功能。

透過 iTerm 建立 js 檔案，並用 node 執行寫好的程式。

1. 建立 JavaScript：vim index.js

// index.js 
console.log(123)

閱讀我吧！