JS101 隨筆

發表於 更新於 文章字數： 2.2k 所需閱讀時間 ≈ 2 分鐘

前言

簡單紀錄我在這堂課學到甚麼東西，大部分的內容都能往下挖講更深，但我現在的目標是搞懂基礎並能夠運用，所以就不會講太多關於底層的觀念，哪天心血來潮再獨立個主題來寫。

&& || 的短路性質

&&(且)

簡單定義 : 必須左右兩側都是 true，才會回傳 true 。

1
console.log( true && true); // true

在 JS 中這些非布林值的資料(物件、陣列、數字、字串)，在放入判斷式比較時會自動幫你轉成布林值，如果想看值轉 boolean 是 true 還是 false 可以用 JS 內建的 Boolean() 去檢查。下方的 truly 和 falsely 就是說資料的布林值是透過轉型得到的，而非 primitive type (純值) 中的 true 和 false。

如果左側的值轉 boolean 是 truly 的話，不管右側為 truly 還是 falsey , 會回傳右側的值。

1
console.log(3 && 0); // 0

看結果有點難懂，可以想成 && 在背後有偷偷用 Boolean() 轉型。

1
2
3
4
console.log(3 && 0); // 0
---
3 && 0 // 我們看到的
true && false // JS 在背後做的

如果左側的值轉 boolean 是 falsely 的話會回傳左側的值，不會管右邊的值。

1
console.log(0 && 10); // 0

所以 && 在做的事情就是看左側的值，如果是 falsely，直接回傳左側的結果；是 truly 的話就回傳右側的結果。

||(或)

簡單定義 : 左右側兩側只要有個是 true，就會回傳 true。

1
console.log( false || true); // true

如果左側的值轉 boolean 是 truly 的話，直接回傳左側的值，不會管右邊的值。

1
console.log(3 || 0); // 3

如果左側的值轉 boolean 是 falsely 的話會回傳右側的值。

1
console.log(0 || 10); // 10

|| 在做的事情一樣先看左側的值，如果是 falsely，直接回傳右側的結果；是 truly 的話就回傳左側的結果。

仔細看的話 && 和 || 在背後運作的原理滿像的，都是先看左側的值，再決定要不要繼續看右邊的值。

短路性質就是在說程式只執行左側沒跑右側的情況。

1
0 && console.log('hi') // 0

先做再說：do…while

主要是 chrome 的 debug 教學，忘記能回去看。

使用 function 時的注意事項

關於 JS 是傳值(pass by value)還是傳參考(pass by reference)每個人都講的不一樣，還有聽過 pass by sharing 這樣的概念，就用例題解釋這個現象吧，這樣最快。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function changeStuff(a, b, c)
{
  a = a * 10;
  b.item = "changed";
  c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

changeStuff(num, obj1, obj2);

console.log(num); // 10
console.log(obj1.item); // "changed"
console.log(obj2.item); // "unchanged"

function 的參數會再複製一份參考，參數 a 和參數 c 的觀念差不多，這邊就只說參數 a ，參數 a 複製了 num = 10 的參考，只是最後用 a = a * 10，重新賦值改變了參數 a 的參考，所以最後才不會改到 num 的值；而參數 b 因為 b.item = "changed"; 直接改到參考的內容，所以最後變異(mutable)了物件內 item 的值。

等號的話可以想成是重新賦值，直接指派一個新的參考給變數，自然不會動到原本指向參考的內容。

參考資料:
Is JavaScript a pass-by-reference or pass-by-value language?
重新認識 JavaScript: Day 05 JavaScript 是「傳值」或「傳址」？

引數（Argument）與參數（Parameter）

1
2
3
4
function sayhi(name) {
  console.log('hi, ', name);
}
sayhi('MoreCoke'); // 'hi, MoreCoke'

參數就是 function 中的 name，參數是用來告訴使用者這個 function 可以塞甚麼東西。
引數就是使用者自己塞進去的東西(‘MoreCoke’)。

return 不 return，有差嗎？

在使用 google 開發者檢查工具常搞不懂為什麼會有 undefined。
在 function 能看到 :


在 宣告變數也能看到 :

現在才知道如果沒有 return 值的話，預設會回傳 undefined。

如果會回傳東西，自然就是印出回傳值了。