# [JS101] 用 JavaScript 一步步打造程式基礎

###### Date : 2021 Apr. 16 - 2021 Apr. 22

- node.js 讓 Javascript 跑在瀏覽器以外

- 等於 (== & ===) 的誤區三本柱 ( 0, null, undefined)

> 0 == null
// false
> 0 == undefined
// false
> null == undefined
// true
> null === undefined
// false

> 上廁所時，可以好好思考🤣🤣🤣

- bool style guide

// good
var score = 60;
var isPass = score >= 60;

// bad
var score = 60;
var isPass = false;
if (score >= 60) {
    isPass = true;
} else {
    isPass = false;
}

- 三元判斷式 Ternary

console.log( 10 > 5 ? 'yes' : 'no') // yes

var score = 60;
var isPass = score >= 60 ? 'pass':'fail';

- 善用 Chrome 的 debugger

- 使用匿名函式 ( anonymous function )，增加效能

- 參數 ( parameter ) & 引數 ( argument )
引數 ( argument ) 為 Javascript 特有的，可以在 function 裡使用 ` argument[i]` 呼叫使用，很少用到，但實際上 argument 為 Object 非 Array。

- Array.sort() 原理

var arr = [1, 30, 4, 21];
arr.sort(function(a, b){
    if(a === b) return 0
    
    // -1 表示兩者不換位置
    if(b > a) return -1 
    
    // 1 表示兩者換位置
    return 1 
})
console.log(arr);
// 1, 4, 21, 30

- Array 的 metheds : slice, splice 有點搞混，以下整理
> slice(start, end) ，取出子矩陣。
> splice(start, number, replce)， 修改、刪除元素。

let arr1 = [1, 2, 3, 4];
let arr2 = [1, 2, 3, 4];
let arr3 = [1, 2, 3, 4];
let arr4 = [1, 2, 3, 4];
arr1.slice(2, 4);
console.log(arr1);
// [1, 2, 3, 4]

arr2 = arr2.slice(2, 4); // *Use this slice*
console.log(arr2);
// [3, 4]

arr3.splice(2, 1); // *Use this splice*
console.log(arr3);
// [1, 2, 4]

arr4 = arr4.splice(2, 1);
console.log(arr4);
// [3]

- Array 的 metheds : map

['1', '2', '3'].map(parseInt);
// 以為會是 [1, 2, 3] 嗎
// 其實是 [1, NaN, NaN]

function returnInt(element) {
  return parseInt(element, 10);
}
['1', '2', '3'].map(returnInt); // [1, 2, 3]

['1', '2', '3'].map( str => parseInt(str) ); // [1, 2, 3]
['1', '2', '3'].map( str => Number(str)); // [1, 2, 3]

['1', '2', '3'].map(Number); // [1, 2, 3]

// but unlike `parseInt` will also return a float (浮點數) or (resolved) exponential notation (科學記號) :
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
['1.1', '2.2e2', '3e300'].map( str => parseInt(str) ); // [1, 2, 3] ， 整數的 `.` 或 `e` 後面直接被捨去

- Array(n) 可產生 n 個空陣列

arr = Array(5);
// [ , , , , ]

arr = Array(5).fill(0);
// [0, 0, 0, 0, 0] ，搭配 fill 產生元素均為 `0` 的 n 陣列

arr = Array(5).fill(0).map( (e, idx) => idx + 1);
// [1, 2, 3, 4, 5] ，搭配 map 產生 1 ~ n 的陣列

- Immutable (不可改變型態) 觀念

var arr = 'hello';
arr.toUpperCase();
console.log(arr);
// hello

var arr = 'hello';
arr = arr.toUpperCase();
console.log(arr);
// HELLO

#### 延伸 : 請分別說明以下輸出是甚麼，並試著解釋

console.log('hello' ? true : false);
console.log('hello' == true);
console.log('hello' == false);

#### Ref.
- [浮點數 floor](http://blog.dcview.com/article.php?a=VmhQNVY%2BCzo%3D)
- [MDN : 引數 Arguments](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/arguments)
- [MDN : Array Map](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
- [深入探討 JavaScript 中的參數傳遞：call by value 還是 reference？](https://blog.techbridge.cc/2018/06/23/javascript-call-by-value-or-reference/)
- [JavaScript 資料結構及演算法實作 (暢銷回饋版)](https://www.tenlong.com.tw/products/9789864343522)

---
#### 心得
###### 2021 Apr. 22
這門課基本上都兩倍速看，可能因為前面基礎還可以，我知道也有很多有基礎的同學是跳著看甚至沒看得，但我還是堅持至少全部看過一輪，因為我認為 : **huli 老師這麼強的高手都願意再講一次了，我為什麼不願意再聽一次？** 而且絕對有你還沒熟悉的基礎，就算熟悉了，聽聽看 huli 老師是怎麼講解的這個觀念的，感覺又不一樣，受益良多。
練習題 25 題都解完了，都可以在不看解答的情況寫完，寫完之後再跟老師對答案，沒什麼大問題，也學到很多胡立老師的思考過程，很讚，對我來說這門課算是熱身，之後準備衝囉 GO GO GO