解构

发表于 2018-08-14 更新于 2024-03-02 分类于前端

ES6新增的解构特性简化了JavaScript操作对象和数组。

对象解构

基本用法

let node = {
    type: "Indentifier",
    name: "foo"
}

let { type, name } = node

console.log(type) // Indentifier
console.log(type) // foo

解构赋值

let node = {
    type: "Indentifier",
    name: "foo"
}
let type = 'Literal'
let name = 5

({ type, name } = node)

console.log(type) // Indentifier
console.log(name) // foo

** 注： ** 一定要用小括号包裹解构赋值语句，JavaScript引擎将一对开放的花括号视为一个代码块，而语法规定，代码块语句不允许出现在解构赋值语句左侧，添加小括号后可以将块语句转化为一个表达式，从而实现整个解构赋值的过程。

给函数解构赋值

let node = {
    type: "Indentifier",
    name: "foo"
}
let type = 'Literal'
let name = 5

function outputInfo(value) {
    console.log(value === node) // true
}

outputInfo({ type, name } = node)

console.log(type) // Indentifier
console.log(name) // foo

默认值

let node = {
    type: "Indentifier",
    name: "foo"
}
let type = 'Literal'
let name = 5

let { type, name, value } = node

console.log(type) // Indentifier
console.log(name) // foo
console.log(value) // undefined

let node = {
    type: "Indentifier",
    name: "foo"
}
let type = 'Literal'
let name = 5

let { type, name, value = true } = node

console.log(type) // Indentifier
console.log(name) // foo
console.log(value) // true

非同名局部变量赋值

let node = {
    type: "Indentifier",
    name: "foo"
}

let { type: localType, name: localName } = node

console.log(localType) // Indentifier
console.log(localName) // foo

默认值

let node = {
    type: "Indentifier"
}

let { type: localType, name: localName = "bar" } = node

console.log(localType) // Indentifier
console.log(localName) // bar

嵌套对象解构

let node = {
    type: "Indentifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
}

let { loc: { start } } = node

console.log(start.line) // 1
console.log(start.column) // 1

非同名局部变量赋值

let node = {
    type: "Indentifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
}

let { loc: { start: localStart } } = node

console.log(localStart.line) // 1
console.log(localStart.column) // 1

数组解构

基本用法

let colors = [ "red", "green", "blue" ]

let [ firstColor, secondColor ] = colors

console.log(firstColor) // red
console.log(secondColor) // green

取特定位置

let colors = [ "red", "green", "blue" ]

let [ , , thirdColor ] = colors

console.log(thirdColor) // blue

解构赋值

let colors = [ "red", "green", "blue" ]
let firstColor = 'black'
let secondColor = 'purple'

let [ firstColor, secondColor ] = colors

console.log(firstColor) // red
console.log(secondColor) // green

交换变量

ES5

let a = 1
let b = 2
let tmp

tmp = a
a = b
b = tmp

ES6

let a = 1
let b = 2

[ a, b ] = [ b, a ]

默认值

let colors = [ "red" ]

let [ firstColor, secondColor = 'green' ] = colors

console.log(firstColor) // red
console.log(secondColor) // green

嵌套数组解构

let colors = [ "red", [ "green", "lightgreen" ], "blue" ]

let [ firstColor, [ secondColor ] ] = colors

console.log(firstColor) // red
console.log(secondColor) // green

不定元素

let colors = [ "red", "green", "blue" ]

let [ firstColor, ...restColors ] = colors

console.log(firstColor) // red
console.log(restColors) // [ "green", "blue" ]

克隆

let colors = [ "red", "green", "blue" ]

let [ ...cloneColors ] = colors

console.log(cloneColors) // [ "red", "green", "blue" ]

混合解构

let node = {
    type: 'Identifier',
    name: 'foo',
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        },
        range: [0, 3]
    }
}

let { loc: { start }, range: [startIndex] } = node

console.log(start.line) // 1
console.log(start.column) // 1
console.logs(startIndex) // 0

参考

深入理解ES6 – 作者: 【美】Nicholas C. Zakas

0%