码迷,mamicode.com
首页 > 其他好文 > 详细

解构赋值的用途

时间:2018-02-16 23:35:22      阅读:318      评论:0      收藏:0      [点我收藏+]

标签:注意   输入   blog   UI   rip   code   模块   const   define   

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

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

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

解构赋值的用途

标签:注意   输入   blog   UI   rip   code   模块   const   define   

原文地址:https://www.cnblogs.com/sminocence/p/8451273.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!