ES6 逐点突破系列 -- 变量的解构赋值

ES6 逐点突破系列 – 变量的解构赋值

ES6系列
ES6 逐点突破系列 – 变量声明

数组解构

let [x, , y] = [1, 2, 3];
x // 1
y // 3

解构赋值允许指定默认值

let [ x = true ] = []
x // true

只有当一个数组成员严格等于undefined，默认值才会生效。

let [ x = 1 ] = [ null ] 
x // null

默认值允许为表达式，但如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

对象结构

如果解构失败，变量的值等于undefined。
对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' }
baz // 'aaa'
foo // error: foo is not defined

注意，最后一次对 line 属性的解构赋值之中，只有 line 是变量， loc 和 start 都是模式，不是变量。
对象的解构也可以指定默认值。
默认值生效的条件是，对象的属性值严格等于undefined。

注意点

1. 如果要将一个已经声明的变量用于解构赋值，必须非常小心。

// 错误的写法
let x
{x} = {x:1};
// SyntaxError: syntax error

JavaScript会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号卸载行首，才能解决这个问题。

// 正确的写法
let x
({x} = {x:1})

2. 由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

let arr = [1, 2, 3]
let {0: first, [arr.length - 1]: last} = arr
first // 1
last // 3

字符串解构

const [a, b, c] = 'Jax'
a // 'J'
b // 'a'
c // 'x'

const { length: len } = 'Jax'
len // 3 

数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转化为对象。

let {toString: s} = 123;
s === Number.prototypr.toString // true

数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。
解构赋值的规则时，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对他们进行解构赋值，都会报错。

let { prop: x } = undefined // TypeError 
let { prop: y } = null // TypeError 

函数解构

函数参数的解构也可以使用默认值。

function move({x = 0, y = 0} = {}) {
	return [x, y]
}
move({x: 3, y:8}) // [3, 8]
move({x: 3}) // [3, 0]
move({}) // [0, 0]
move() // [0, 0]

其他用途

1. 交换变量的值

let x = 1;
let y = 2;
[x, y] = [y, x]

2. 提取 JSON 数据
3. 从函数返回多个值
4. 函数参数的定义
5. 函数参数的默认值
6. 遍历 Map 结构
7. 输入模块的指定方法