解构赋值的用途

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

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

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值