数组、对象的解构赋值

1,065

前言

随着 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