首页 > 技术文章 > es6 解构

icecream-lling 2019-09-17 14:50 原文

使用解构存取和使用多属性对象,解构能减少临时引用属性。

// bad
function getFullName(user) {
    const firstName = user.firstName
    const lastName = user.lastName

    return `${firstName} ${lastName}`
}

// good
function getFullName(obj) {
    const { firstName, lastName } = obj
    return `${firstName} ${lastName}`
}

// best
function getFullName({ firstName, lastName }) {
    return `${firstName} ${lastName}`
}

 

 对数组使用解构赋值:

const arr = [1, 2, 3, 4]

// bad
const first = arr[0]
const second = arr[1]

// good
const [first, second] = arr

需要回传多个值时,使用对象解构,而不是数组解构。增加属性或者改变排序不会改变调用时的位置。

// bad
function processInput(input) {
    // then a miracle occurs
    return [left, right, top, bottom]
}

// 调用时需要考虑回调数据的顺序。
const [left, __, top] = processInput(input)

// good
function processInput(input) {
    // then a miracle occurs
    return { left, right, top, bottom }
}

// 调用时只选择需要的数据
const { left, right } = processInput(input)

 

推荐阅读