ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
eg.
let [a, b, c] = [1, 2, 3];
a//1
b//2
c//3
let [a] = [1,2,3];
a//1
let [a,b] =[1];
a//1
b//undefined
let {a} = {a:1,b:2,c:3}
a//1
可见,当 = 左边的格式与右边的格式一致时,左边的变量就会被赋值,
本质上是模式匹配
let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"
只要某种数据结构具有Iterterator接口都可以采用数组形式的解构赋值
解构赋值允许指定默认值
let [a=1,b] = [2,2];
a//2
b//2
let [a=1,b] = [undefined,2];
a//1
b//2
let [a=1,b] =[null,2];
a//null
b//2
数组成员是null 默认值不会生效,因为null 不严格等于undefined
function f() {
console.log('aaa');
}
let [x = f()] = [1];
x//1
当默认值为一个表达式时,这个表达式时惰性求值的,即只在用到的时候,才回去求值
function f() {
console.log('aaa');
}
let [x = f()] = [1];
x//1
解构可以用于对象,数组的解构是按次序排列的,对象则按照变量名。
当解构失败是变量的值为undefined ,对对象解构,也可以很方便的将现有对象的方法,赋值到某个变量
如果变量名与属性名不一致,可以使用 对象属性名:变量名 来获取
let {a:b} = {a:1};
b//1
let {a:a} ={a:1};
a//1
这实际的说明了对象的解构赋值详细的写法,也说明了对象的解构赋值的内部机制,是先找到同名属性,然后赋值给对应
的变量,真正赋值的是后者而不是前者
let obj = {
arr: [
'Hello',
{ c: 'World' }
]
};
let {arr:[b,{c}]} =obj;
b//Hello
c//World
与数组一样解构也可以用于嵌套解构的对象,arr是模式模式不是变量,所以不会被赋值
let obj = {
arr: [
'Hello',
{ c: 'World' }
]
};
let {arr,arr:[b,{c}]} =obj;
arr//[
'Hello',
{ c: 'World' }
]
b//Hello
c//World
这样则是赋值
let obj =[];
let{a:obj.b} ={a:'a'};
obj.b//'a'
当然也可以这样赋值
let obj ={};
let obj1 ={a:1};
Object.setPrototypeOf(obj, obj1);
let{a} =obj;
a//1
obj的原型对象是obj1 a不是obj的自身属性,而是继承自obj1的属性,解构赋值是可以获取的。
所以解构赋值可以获取到继承的属性。
注意事项
- 如果要将一个已经声明的变量用于解构赋值。
// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error
//正确的写法
let x;
({x} ={x:1});
x//1
- 解构赋值允许左边的模式之中不放置任何变量名
({} ={a:1};)
- 由于数组是特殊的对象,因此可以对数组进行对象属性的解构
let {0:a} = [1];
a//1
字符串解构赋值
let [a,b,c] = 'def';
a//d
b//e
c//f
let {length:len} ='abc';
len//3
此时字符串被转换成了一个类似数组的对象
数组都有length 属性,所以可以从字符串中解构赋值到length属性
数值和布尔值的解构赋值
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
解构赋值时,如果右边是数值或布尔值,则会先转化为对象
数组和布尔值转化的包装对象都有toString属性,因此可以解构赋值
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
解构赋值规则,只要=右边不是对象或者数组就先将其转化为对象,null 和 undefined 不能转化为对象,所以对他们进行
解构赋值会报错
函数参数的解构赋值
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
函数add 参数传入为一个数组,在传入的那一刻参数被解构赋值为x,y 两个变量