ES6学习（二）——变量的解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

一、数组解构

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

let [foo, [[bar], baz]] = [1, [[2], 3]]
foo // 1
bar // 2
baz // 3

let [ , , third] = ['foo', 'bar', 'baz'];
third // baz

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // 'a'
y // undefined
z // []

上面是一些使用嵌套数组进行解构的例子

如果解构不成功，变量的值就等于undefined

let [foo] = [];
let [bar, foo] = [1];

还有一种情况是不完全解构，即等号左边的模式只匹配等号右边数组的一部分。这种情况（等号左边的项数比右边的少）解构依然可以成功

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

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

默认值：

解构赋值允许指定默认值

let [foo = true] = [];
foo // true

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

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

function f() {
	console.log('aaa');
}
let [x = f()] = [1];

let x;
if ([1][0] === undefined) {
	x = f();
} else {
	x = [1][0];
}

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

二、对象的解构赋值

let {bar, foo} = { foo: 'aaa', bar: 'bbb' };
foo // 'aaa'
bar // 'bbb'

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

var { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };

let foo;
let { foo } = { foo: 1 } // SyntaxError: Duplicate declaration 'foo'
let baz;
let { bar: baz } = { bar: 1 } // SyntaxError: Duplicate declaration 'baz'

解构也可用于嵌套结构的对象

var obj = {
	p: [
		'Hello',
		{
			y: 'World'
		}
	]
};
let { p: [x, { y }] } = obj;
x // 'Hello'
y // 'World'

上面的代码中，p只是属性名，不是变量，所以不会被赋值。再看下面这个例子

var node = {
	loc: {
		start:{
			line: 1,
			column: 5
		}
	}
}
var { loc: { start: { line } } } = node;
line // 1
loc  // error: loc is undefined
start // error: start is undefined

嵌套赋值

let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
obj // {prop:123}
arr // []

var { message: msg = 'Something went wrong' } = {};
msg // 'Something went wrong'
var { x = 3 } = { x: undefined };
x // 3
var { x = 3 } = { x: null }
x // null

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

var x;
{ x } = { x: 1 }; // SyntaxError: syntax error

var x;
({ x } = { x: 1 }); // SyntaxError: syntax error

对象的解构赋值可以很方便的将现有对象的方法赋值到摸个变量。

let { log, sin, cos } = Math;

三、字符串的解构赋值

字符串也可以解构赋值，这是因为，此时字符串被转换成了一个类似数组的对象

const [a, b, c, d, e] = 'hello';
a // h
b // e
c // l
d // l
e // o

let { length: len } = 'hello';
len // 5

四、数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值或布尔值，则会先转换为对象（解构赋值的规则是，只要等号右边的值不是对象，就先将其转换为对象）。由于undefined和null无法转为对象，所以对它们进行解构赋值都会报错。

五、函数参数的解构赋值

function move({ x = 0, y = 0 } = {}) {
	return [x, y];
}
function move({ x, y } = { x: 0, y: 0 }) {
	return [x, y];
}

// 全部报错
var [(a)] = [1];
var { x: (c) } = {};
var { o:  ({ p: p }) } = { o: { p: 2 } };

// 报错
function f([(z)]) {
	return z;
}

// 全部报错
({ p: a }) = { p: 42 };
([a]) = [5];
[({ p: a }), { x: c }] = [{}, {}];

// 全部正确
[(b)] = [3];
({ p: (d) } ={});
[(parseInt.prop)] = [3];