1、解构的含义
允许按照一定的模式,从数组和对象中取值,对变量进行赋值,称为解构。
解构赋值时,只要等号右边的值不是对象,就先将其转换成对象。
本质上,这种写法属于 “模式匹配”,只要两边模式相同,左边的变量就会被赋予对应的值。
let [head,...tail]=[, , , ]; //不完全解构,左边的模式,只匹配一部分的等号右边的数组
解构后: head=1,tail=[2,3,4]。
2、解构的限制。
(1)undefined与null 无法转换成对象,解构赋值就会报错。
let { y } = null; // Cannot match against 'undefined' or 'null'.
(2)如果等号的右边不是数组,转换对象以后不具备 Iterator接口,或本身就不具备Iterator接口,
即某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值。
let [foo]=; //undefined is not a function,报错的行数会指向上一行代码 let [foo1,foo2]=new Set(['a', 'b', 'c']);
3、解构赋值时, 左边参数允许默认值。
(1)ES6内部使用严格相对运算符,因此,若defaultValue!==undefined,默认值失效。
var [x=]=[undefined]; //x=1
var [y=]=[null]; //y=2
(2)赋予默认值时,左边参数 可以引用解构赋值的其他变量,但该变量必须已经声明.
let [x1=y1,y1=]=[]; //error,因为此时y1还没有值,应该如此写: let[y=1,x=y]=[];
4、对象解构赋值
对象属性没有次序,变量名必须与属性相同。
let { fishInstance,dogInstance}={
dogInstance: {
name: 'dog',
moveType: 'run'
},
fishInstance{
name:'fish'
}
}
5、变量名与属性名不一致,必须写成下面这样。
真正被赋值的是后者,而不是前者。
let { oldName:newName}={oldName: '', bar: 'barTest'}
6、
let tree = {
root: {
leaf: {
left: ,
right:
}
}
}
var { root:{leaf:{left}} }=tree; //此时, root 与 leaf 都是模式,不会被赋值,只有leaf是变量
console.log(root); /*root is not defined*/
7、对象的解构也可以指定默认值,生效的条件是对象的属性严格等于 undefined
如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,则error。
let {x=}={}; let { foo: { name }}={bar: 'bar'};
将一个已经申明的变量用于解构赋值,必须非常小心。
let temp;
{temp}= {x: }; /error ( { temp }={x: } ); //使用圆括号,避免JS引擎将 "{ }" 解释为代码块
8、字符串解构赋值,会将字符串转换成类似数组的对象。
const [a,b,c,d,e]='hello world';
let { length:strLen }='world';
9、解构 数值和布尔值时,先转换成对象
let { toString:s1 } =; //s1===Number.prototype.toString let { toString: s2}=true; //s2===Boolean.prototype.toString
解构使用场景
(1)可以很方便的将 现有对象的方法,赋值给某个变量.
let { log: selfLog}=console;
selfLog('test log');
(2)交换变量.
[x,y]=[y,x];
(3)从函数返回多个值
function getPerson() {
return {
name: 'jack',
age:
}
} var {name,age}=getPerson();
(4) 定义函数参数后,可以不按顺序传入
function setPerson({name,age,address}) { } setPerson({age: , address: 'china', name: 'Tom'});
(5)提取JSON对象中的数据
let jsonData = {
age: ,
name: 'Tom',
son: [
'little Jack',
'little Tom'
]
}; let { son:child }=jsonData;
(6)遍历map结构
var map =new Map(); for(let [key,value] of map) { } for(let [,value] of map ) { }
(7)获取模块的指定方法
const { SourceMapConsumer }= require('');