解構陣列進行變數值的替換

/ bad
let a = 1,
    b = 2
let temp = a
a = b
b = temp

// good
let a = 1,
    b = 2
[b, a] = [a, b]

.解構物件

// bad
setForm (person) {
    this.name = person.name
    this.age = person.age 
}

// good
setForm ({name, age}) {
    this.name = name
    this.age = age 
}

解構時重新命名簡化命名有的後端返回的鍵名特別長，你可以這樣幹

// bad
setForm (data) {
    this.one = data.aaa_bbb_ccc_ddd
    this.two = data.eee_fff_ggg
}
// good
setForm ({aaa_bbb_ccc_ddd, eee_fff_ggg}) {
    this.one = aaa_bbb_ccc_ddd
    this.two = eee_fff_ggg
}

// best
setForm ({aaa_bbb_ccc_ddd: one, eee_fff_ggg: two}) {
    this.one = one
    this.two = two
}
 

解構時設定預設值

// bad
setForm ({name, age}) {
    if (!age) age = 16
    this.name = name
    this.age = age 
}

// good
setForm ({name, age = 16}) {
    this.name = name
    this.age = age 
}

||短路符設定預設值

let person = {
    name: '張三',
    age: 38
}

let name = person.name || '佚名'

&&短路符判斷依賴的鍵是否存在防止報錯'xxx of undfined'

et person = {
    name: '張三',
    age: 38,
    children: {
        name: '張小三'
    }
}

let childrenName = person.children && person.childre.name

字串拼接使用${}

let person = {
    name: 'LiMing',
    age: 18
}
// bad
function sayHi (obj) {
    console.log('大家好，我叫' + person.name = '，我今年' + person.age + '了')
}

// good
function sayHi (person) {
    console.log(`大家好，我叫${person.name}，我今年${person.age}了`)
}

// best
function sayHi ({name, age}) {
    console.log(`大家好，我叫${name}，我今年${age}了`)
}

.函式使用箭頭函式

let arr [18, 19, 20, 21, 22]
// bad
function findStudentByAge (arr, age) {
    return arr.filter(function (num) {
        return num === age
    })
}

// good
let findStudentByAge = (arr, age)=> arr.filter(num => num === age)

函式引數校驗

// bad
let findStudentByAge = (arr, age) => {
    if (!age) throw new Error('引數不能為空')
    return arr.filter(num => num === age)
}

// good
let checkoutType = () => {
    throw new Error('引數不能為空')
}
let findStudentByAge = (arr, age = checkoutType()) =>
    arr.filter(num => num === age)