解构

对象解构

基本用法

1
2
3
4
5
6
7
8
9
let node = {
type: "Indentifier",
name: "foo"
}

let { type, name } = node

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

解构赋值

1
2
3
4
5
6
7
8
9
10
11
let node = {
type: "Indentifier",
name: "foo"
}
let type = 'Literal'
let name = 5

({ type, name } = node)

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

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

给函数解构赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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

默认值

1
2
3
4
5
6
7
8
9
10
11
12
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
1
2
3
4
5
6
7
8
9
10
11
12
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

非同名局部变量赋值

1
2
3
4
5
6
7
8
9
let node = {
type: "Indentifier",
name: "foo"
}

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

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

默认值

1
2
3
4
5
6
7
8
let node = {
type: "Indentifier"
}

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

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

嵌套对象解构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

非同名局部变量赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

数组解构

基本用法

1
2
3
4
5
6
let colors = [ "red", "green", "blue" ]

let [ firstColor, secondColor ] = colors

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

取特定位置

1
2
3
4
5
let colors = [ "red", "green", "blue" ]

let [ , , thirdColor ] = colors

console.log(thirdColor) // blue

解构赋值

1
2
3
4
5
6
7
8
let colors = [ "red", "green", "blue" ]
let firstColor = 'black'
let secondColor = 'purple'

let [ firstColor, secondColor ] = colors

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

交换变量

ES5

1
2
3
4
5
6
7
let a = 1
let b = 2
let tmp

tmp = a
a = b
b = tmp

ES6

1
2
3
4
let a = 1
let b = 2

[ a, b ] = [ b, a ]

默认值

1
2
3
4
5
6
let colors = [ "red" ]

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

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

嵌套数组解构

1
2
3
4
5
6
let colors = [ "red", [ "green", "lightgreen" ], "blue" ]

let [ firstColor, [ secondColor ] ] = colors

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

不定元素

1
2
3
4
5
6
let colors = [ "red", "green", "blue" ]

let [ firstColor, ...restColors ] = colors

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

克隆

1
2
3
4
5
let colors = [ "red", "green", "blue" ]

let [ ...cloneColors ] = colors

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

混合解构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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
Disqus 加载中...

如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理