• 解构赋值的用途


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

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

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

  • 相关阅读:
    图片压缩后,依然很大的解决方案
    怎么使用javascript实现类的功能
    javascript实现像java、c#之类的sleep暂停的函数功能
    用ajax和asp.net实现智能搜索功能
    insert into 和insert into select性能比较
    百度编辑器
    document.selection.createRange()
    CSS设置透明效果
    class中一个小技巧
    asp.net中 解析JSON
  • 原文地址:https://www.cnblogs.com/sminocence/p/8451273.html
Copyright © 2020-2023  润新知