解构赋值的用途

Posted 2020-10-24 sminocence

所谓解构赋值，就是允许按照一定模式，从对象和数组从提取值，对变量进行赋值，这就是解构赋值。
注意：这里只能对数组和对象进行解构赋值。

//数组的解构赋值
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")

总结：
从解构赋值的定义说到解析的规则，还有一些很好用的用途。以后有新的发现再来补充。