jas0nhuang

[筆記] 搞懂 JS 還不懂的部分 - 1

JavaScript 基礎概念

  • 一定要執行環境：瀏覽器（document、console……）、Node.js（fs、console……）、Deno

基本語法

快速看過一次影片，就不再多作筆記了，可以參考 N 年前跟著 Learn JavaScript Properly 一系列的筆記：Learn JavaScript Properly 1-1 Introduction
不要卡在位元運算的地方 XD

一些還不太清楚的基礎

  1. 邏輯運算之短路性質：
  • or 
    true || true === true
    false || false === false
    ture || false === true
    false || true === true
    13 || 13 === 13
    13 || 10 === 13
    10 || 13 === 10
    10 || false === 10
    false || 10 === 10
    true || 10 === true
    0 || 10 === 10
    10 || 0 === 10
    結論：如果第一個值為 true 則結果為第一個值，不會考慮第二個值。（數字 0 會被當成 false）
  • and 
    13 && 10 === 10
    10 && 13 === 13
    結論：兩者皆為 true，結果為第二個值。如果第一個值為 false，則結果為 false，不考慮第二個值。

  1. 位移運算子
    針對位元操作
    >> 與 << 

    10 << 1 === 20
    10 << 3 === 80
    1 << 10 === 1024
    10 >> 1 === 5
    9 >> 1 === 4

    可以看成乘以 2 或 除以 2，「通常」位元運算的效能會比較好。

  2. 位元運算
    針對每一個位元做邏輯處理
    and &，or| 

    10 & 15 === 10 // 1010 and 1111 === 1010 // true false true false
    10 && 15 === 15
    10 | 15 === 15 // 1010 or 1111 === 1111 // true true true true
    10 || 15 === 10

    xor（exclusive or）^（caret）
    兩個位元相同則回傳 0，不同則回傳 1

    10 ^ 15 === 5 // 1010 xor 1111 === 0101
    2 ^ 4 === 6 // 10 xor 100 === 110

    not ~
    會處理整個數字轉換為二進位時的所有位元（包含前面所有的 0）
    測試了一下，在 2 的 32 次方減 1 與 2 的 負 32 次方之間的整數，都會被輸出為其負數減 1 ，因為行為實在太古怪，在這裡就不多花時間了

    ~1 === -2
    ~2147483647 === -2147483648
  • 位元運算應用：
    判斷偶數 
    A & 1 === 1 // 二進位之最後一位為 1
    A & 1 === 0 // 二進位之最後一位為 0
    10 & 1 === 0
    11 & 1 === 1

  1. 「蛇式」與「駝峰式」
    查了一下英文
    this_variable：snake case
    thisVariable：camel case

  2. 有關 ++ 與 --
    大神 Crockford 在大概 10 年前有一段演講：Crockford on JavaScript - Part 5: The End of All Things，裡面有提到使用 ++ 或 -- 的壞處，不知道現在他是不是有改變，總之，想不想用各人自已決定囉！
    我自已是覺得用在 for 迴圈裡應該是不至於有什麼嚴重的安全性問題吧？！如果沒有安全性問題，又已經變約定俗成，大家都看的懂，那我就實在想不到有什麼不能用的理由了。
    ++i 與 i++ 的差異，執行順序不同
    不要多重 ++ 或 --

  3. 變數型態
    可以用 typeof 查看型態

    typeof true // boolean
    typeof 10 // number
    typeof "hello" // string
    typeof [1] // object // array is an object
    typeof {XXX} // object
    typeof null // object // old bug
    typeof undefined // undefined
    typeof function // function

  4. 變數運算
    parseInt(X, Y) 將 X 轉換為 Y 進位的數字
    Number(X) 將 X 轉為數字
    浮點數誤差問題

  5. 物件之間是否相等？
    直接比較兩個物件不會相等！因為底層存取時物件反應的其實是記憶體位置。 

    ([1] === [1]) === false
    ({a:2} === {a:2}) === false

    賦值、改值的行為要注意： 

    let a = [1, 2]
    let b = a
    b.push(3)
    a === b // true a === [1, 2, 3]，b === [1, 2, 3]
    b = [3, 4]
    a === b // false a === [1, 2]，b === [3, 4]

  6. 比較少用的 switch 

    switch(month){
      case 1:
        return '一月'
        break
      case 2:
        return '二月'
        break
      default:
        return '幾月啦？'
    }

  7. 三元運算子 Ternary Operator
    可代替簡單的 if else（就不要搞成巢狀了……） 

    yourScore >= 60 ? '及格' : '不及格'

  8. 沒用過的 do while

    do {
      
    } while()

    break 與 continue 的行為：
    break：跳出迴圈
    continue：跳過迴圈內以下的其它動作，重頭再檢查條件並執行一次迴圈
    可以使用 Chrome Devtool 一步一步跑，關鍵字：debugger

  9. 參數與引數
    argument and parameter
    在函式中可以取用 arguments 物件，類陣列物件

  10. pass by …
    pass by value
    pass by reference：JavaScript 沒有這一種方式
    pass by sharing

  11. 常用內建函式整理：

  • 數字：
    Number()、parseInt(想轉換的資料, 進位方式)、parseFloat()、parseFloat.toFix(小數點後幾位)、MAX_VALUE、Math.PI、Math.ceil()、Math.floor()、Math.round()、Math.squrt()、Math.pow()、Math.random()、.toString()
  • 字串：
    toUpperCase()、toLowerCase()、.charCodeAt()、String.fromCharCode()、.indexOf()、.replace(X, Y)（這裡的 X 可以寫正規表達式）、.split()、.trim()
  • 陣列：
    .join()、.map()、.filter()、.slice()、.splice(位置， 0 或 1，'內容')、.sort()（可加入比較用的 function）
    瞭解內建函式回傳的型態

關於 immutable、課程中提到的浮點數誤差問題（使用浮點數最最基本的觀念）以及參數傳遞的問題（深入探討 JavaScript 中的參數傳遞）就留到明、後天筆記吧！感覺都要比較長的時間消化。