看完影片 youtube - 5 Must Know JavaScript Features That Almost Nobody Knows 整理紀錄下內容所說的東西。

Nullish Coalescing

參考連結：Nullish coalescing operator (??)

當前者為 null 或是 undefined 時，使用後面的值做為預設值

example
  • js
1
2
3
4
5
6
7
 
const foo = null ?? '當前者為 null 或是 undefined 時，賦予後面這個值給 foo';
console.log(foo);
// 輸出：當前者為 null 或是 undefined 時，賦予後面這個值給 foo

const bar = undefined ?? '當前者為 null 或是 undefined 時，賦予後面這個值給 bar';
console.log(bar);
// 輸出：當前者為 null 或是 undefined 時，賦予後面這個值給 bar

若想使用 true or false 決定是否要使用預設值，(??) 就不適用，可改用 ||

example
  • js
1
2
3
4
5
6
7
8
 
const baz = 0 ?? 9527;
console.log(baz);
// 輸出：0，因為 0 不是 null or undefined

const boom = 0 || 9527;
console.log(boom);
// 輸出：9527，因為 0 可被返回成 false，
// 等同 if (0) { boom = 0; } else { boom = 9527 }，空字串也算是 false 的一種

Styling Console Log

為你的 consloe.log 添加 css 樣式，有興趣請參考影片試試，不詳述。

Optional Chaining

參考連結：Optional chaining (?.)

當你需要取用物件成員值，例如 smallming.mobile_phone[0].number，或者是某個 js 字串方法，例如 smallming.contact.address.toUpperCase()，但因為可能該成員、元素不存在，須事先判斷是否存在，以避免拋出例外，舉例如下：

example
  • js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
const smallming = {
  name: 'Small Ming',
  mobile_phone: [
      {number: '0800-000-000'},
  ],
  home: {
      address: 'No. 9527, Little Book Boy Park, Taiwan'
  }
};

// 正常輸出
console.log(smallming.mobile_phone[0].number);
console.log(smallming.home.address.toUpperCase());

// 拋出例外
// console.log(smallming.mobile_phone[1].number); // Error: Cannot read property 'number' of undefined
// console.log(smallming.home.country.toUpperCase()); // Error: Cannot read property 'toUpperCase' of undefined

// 補上 ?，輸出 undefined
console.log(smallming.mobile_phone[1]?.number); // undefined
console.log(smallming.home.country?.toUpperCase()); // undefined

Object Shorthand

參考連結：Object initializer

物件成員的 key 若沒有給值，會去匹配同名變數值，若該變數不存在，則拋出例外

example
  • js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
const hohahe = { ho: 'hoho', ha: 'haha', he: 'hehe' };

console.log(hohahe.ho);
// 輸出：hoho

const ho = 'hoho';
const ha = 'haha';
const he = 'hehe';
const hohahe2 = { ho: ho, ha: ha, he: he };

console.log(hohahe2.ha);
// 輸出：haha

const hohahe3 = { ho, ha, he };

console.log(hohahe3.he);
// 輸出：hehe

另外，也蠻常用在 $.ajax 傳遞參數寫成這樣，比較簡潔

example
  • js
1
2
3
4
5
6
7
8
9
10
11
 
const login = function (id, username, action) {
    $.ajax({
        type:'POST',
        url:'/test.php',
        data: {
            id,
            username,
            action
        }
    });
}

Defer/Async Loading

參考連結：＜script＞: The Script element 參考連結：HTML Living Standard

加載 script 可宣告 defer 在所有 DOM 載入完成後才執行 script。

來源 https://html.spec.whatwg.org/images/asyncdefer.svg 來源 https://html.spec.whatwg.org/images/asyncdefer.svg

Defer 常用來解決以下場景

你不確定你操作的 DOM 是否已經被 HTML 解析渲染完成，若 sciprt 搶先載入並執行，很有可能因為找不到 element / DOM 而拋出例外。

Async 目前實務上還沒使用過，哪天有使用再來補充。

最後

有任何問題或想法，歡迎留言交流，如果寫的內容有錯誤的地方，希望能不吝指點，感謝。


文章作者: littlebookboy
永久鏈結: https://littlebookboy.github.io//2021/06/learn-javascript-5-features-you-dont-know/
許可協議: 署名-非商業性使用-相同方式共享 4.0 國際(CC BY-NC-SA 4.0)