ES6 新增語法糖與語法


Posted by Calon on 2022-04-26

語法糖 - 常見縮寫(不會影響運作)

縮寫

// 原本物件內函式寫法
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)

當左側為 nullundefined 時會回傳右側的值,反之則回傳左側的值。

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

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

參考資料


新增語法(會影響運作)


#javascript #ES 6







Related Posts

關於 React 小書:PropTypes 和 Component 參數驗證

關於 React 小書:PropTypes 和 Component 參數驗證

Binary Search模板

Binary Search模板

Python Table Manners - 管理繁瑣任務

Python Table Manners - 管理繁瑣任務


Comments