前言
随着 es6 的普及,越来越多的浏览器都已经支持 es6 了, es6 中一个强大的地方就在于对变量的解构赋值,在避免重复使用 var 声明且赋值变量的同时,也让代码更简洁易读了。
一. 数组的结构赋值
1.基本使用
// 以前
var a = 1;
var b = 2;
var c = 3;
// es6
let [a, b, c] = [1, 2, 3]
2.使用扩展运算符
let [top, ...bottom] = [1, 2, 3]
top // 1
bottom // [2,3]
3.等号右边不具备iterator
接口
// 全都报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
因为等号右边的值转为对象后(前五个),或是本身不具备(最后一个)
iterator
接口
4.默认值
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
注意:只有等号右边的值全等于
undefined
默认值才生效 !
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null
因为 null !== undefined
, 所以默认值不生效
二. 对象的解构赋值
1.基本使用
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
左边的变量名必须与右边的属性名同名 !
2.变量名与属性名不一致
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
当变量名和属性名不一致时, 必须写成上面那样。真正赋值给的是冒号右边的变量
baz
而不是左边的foo
3.默认值
let {x: y = 3} = {x: 5};
y // 5
let { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"
注意:同数组一样, 只有等号右边的值全等于
undefined
默认值才生效 !
var {x = 3} = {x: undefined};
x // 3
var {x = 3} = {x: null};
x // null
4.解构失败的情况
let {foo} = {bar: 'baz'};
foo // undefined
若解构失败, 则变量值等于undefined
。