ES6 新增語法糖與語法

語法糖 - 常見縮寫（不會影響運作）

縮寫

// 原本物件內函式寫法
const obj1 = {
    fn: function(){
        console.log('hi')
    }
}

// 縮寫
const obj2 = {
    fn(){ // 可以省略 : 和 function
        console.log('hi')
    }
}

// 原本物件內引用變數
const person = {
    person: 'Tom'
}

// 傳統寫法
const people = {
    person: person
}

// 縮寫
const people = {
    person // 變數同名稱屬性時，可以省略 key 值
}

展開與其餘參數

參見：展開與其餘參數

解構賦值

參見：構賦值 Destructuring Assignment

function 預設值

function fn(a = 1){ // 沒有代入參數時會自動代入 1
    console.log(a);
}

可選串連運算子（Optional Chaining）

當值不存在時會回傳 undifined

const obj = {};
console.log(obj.person.child); // Uncaught TypeError: Cannot read properties of undefined (reading 'child')
console.log(obj?.person?.child); // undefined

空值合併運算符（Nullish Coalescing Operator）

當左側為 null 或 undefined 時會回傳右側的值，反之則回傳左側的值。

const empty = null;
const a = empty ?? 1;
console.log(a); // 1

const obj = {};
const b = obj.person ?? 'John';
console.log(b); // 'John'

參考資料

• 可選串連運算子（optional chain）
• 想知道嗎：可選串連 跟 雙問號語法

新增語法（會影響運作）

• 箭頭函式 Arrow Function
• Promise