JavaScript

本文內容涵蓋

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

Web 應用程式生命週期

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

閱讀我吧!

Can I Use 涵蓋率 68.88%

RegExp in JavaScript

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

ES2018 新增的功能

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

閱讀我吧!

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");
}
}

閱讀我吧!

本篇文章翻譯自 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 LuZHI-WEI
    • jquery - $.extend()
    • loadash - _.cloneDeep()

閱讀我吧!

目的

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

適合情境

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

閱讀我吧!

Node.js 環境建置

  • node.js

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

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

1. 建立 JavaScriptvim index.js

1
2
// index.js 
console.log(123)

閱讀我吧!

1. array

複數

  • 像火車車廂的概念。
  • 有順序性,可以放各種資料,但建議資料類型相似的一組資料結構/格式。
  • 適合資料處理。
  • 表達複數的概念,多個相同的複類別。
  • 可以放不一樣型別的值,而強型別語言中都會相同型別的值。(2019-7-16 更新)

2. object

單數

閱讀我吧!