所谓解构赋值,就是允许按照一定模式,从对象和数组从提取值,对变量进行赋值,这就是解构赋值。
注意:这里只能对数组和对象进行解构赋值。
//数组的解构赋值
let a,b,rest;
[a,b] = [1,2];
[a,b,...rest] = [1,2,3,4,5];
//对象的解构赋值
({a,b} = {a:1,b:2});
({a,b,...rest} = {a:1,b:2,c:3,d:4})
//注意:rest必须是解构赋值参数列表的最后一个参数
let [foo,[[bar],baz]] = [1,[[2],3]];
let [x,y='b'] = ['dd',undefined];
let [a,b,c] = new Set(["f","ff","fff"]);
对于数组进行解构赋值,只要某种数据解构具有Iterator接口,都可以采用数组形式进行解构赋值。
对于对象进行解构赋值,要注意书写的形式。
//错误的写法
var x;
{x} = {x:1};//error
这里因为声明了x变量,{x}放在开头,会被JavaScript引擎解释成代码块。
可以对解构赋值的语句加上圆括号。
({x} = {x:1});
不仅可以对数组和对象进行解构赋值,还可以对字符串、数值和布尔值、函数参数进行解构赋值。
对字符串进行解构赋值、
const [a,b,c] = 'hel';
之所以能够进行解构赋值,因为此时字符串被转换成了一个类似数组的对象。
解构赋值的规则:
只要等号右边的值不是对象,先将其转化成对象,由于undefined和null无法转化成对象,所以对它们进行解构赋值都会报错。
解构赋值的用途:
- 变换变量:交换两个变量的值
- 解析一个从函数返回的数组:有了解构赋值,函数可以返回多个值,但是现在有更多的灵活性。
- 忽略某些返回值
- 将剩余数组赋值给一个变量
- 用正则表达式匹配提取值
- 函数参数的定义
- 提取JSON数据
解构赋值对提取JSON对象中的数据尤其有用
var jsonData = {
id:42,
status: "ok",
data:[74,444]
}
let {id,status,data:number} = jsonData;
console.log(id,status,number);
//42,ok,[74,444]
- 遍历Map结构
任何部署了Iterator接口的对象,都可以用for...of循环遍历,Map解构原生支持Iterator接口,配合变量的解构赋值,获取键名和健值就非常方便。
var map = new Map();
map.set('first','hello');
map.set('second','world');
for (let [key,value] of map){
console.log(key+"is"+value);
}
//first is hello
//second is world
//只想获取键名
for(let [key] of map){
//...
}
//获取键值
for(let [,value] of map){
//...
}
- 输入模块的指定方法
加载模块时,往往需要指定输入哪些方法,解构赋值使得输入语句很清晰
const {SourceMapConsumer,SourceNode} = require("source-map")
总结:
从解构赋值的定义说到解析的规则,还有一些很好用的用途。以后有新的发现再来补充。