ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构,解构的本质属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。如果解构不成功,变量的值就等于undefined。
数组解构
等号左边的变量放到中括号内部,匹配右侧数组中的元素。
let [a, b, c] = [1, 2, 3];
不完全解构
let [a, [b], d] = [1, [2, 3], 4]; //a = 1; b = 2; d = 4
集合解构
let [head, ...tail] = [1, 2, 3, 4]; //head = 1; tail = [2, 3, 4]
默认值(当匹配值严格等于undefined时,默认值生效)
let [x, y = 'b'] = ['a']; // x='a', y='b’
默认值也可以为函数
function f() { console.log('aaa'); }
let [x = f()] = [1];
对象解构
等号左边的变量放到大括号内部,匹配右侧数组中的元素。对象的属性没有次序,变量必须与属性同名,才能取到正确的值
let { foo, bar } = { foo: “aaa”, bar: “bbb” }; // foo = "aaa”; bar = "bbb”
如果变量名与属性名不一致,必须写成下面这样。
var { foo: baz } = { foo: 'aaa', bar: 'bbb' }; //baz = "aaa”
这实际上说明,对象的解构赋值是下面形式的简写。
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
嵌套解构
let obj = { p: [ ‘Hello’, { y: ‘World’ } ] };
let { p: [x, { y }] } = obj; //x = "Hello”; y = "World”
默认值(默认值生效的条件是,对象的属性值严格等于undefined)
var {x: y = 3} = {}; y // 3
字符串解构
数组解构:从字符串里提取字符
let [a, b, c] = 'hello'; a='h' b='e' c='l'
对象解构:从字符串原型中解构属性和方法
let { length, toString } = 'hello'
number解构
let { valueOf } = 12 valueOf === Number.prototype.valueOf()
boolean解构
let { valueOf } = true valueOf === Boolean.prototype.valueOf()