• ES6中的解构赋值


    前言

    从前我们对变量赋值时,都是通过赋值运算符,右边赋值给左边这样操作的。

    let a = 1;
    let b = 2;
    let c = 3;
    
    let obj = {};
    obj.name = 'mm';
    obj.age = 18;
    

    现在我们通过模式匹配的方式来赋值。
    左边是解构目标,右边是解构源。
    左右结构要保持一致。

    一、数组解构赋值:基本方式

    1.1 一一对应

    数组的解构是有顺序的,是一一对应的。(等号右边直接写数组的变量名也可以。)

    let [a,b,c] = [1,2,3];
    console.log(a,b,c);
    
    let arr = [4,5,6];
    let [x,y,z] = arr;
    

    1.2 可嵌套

    只要右边的模式和左边相同,那么左边对应的变量就会被赋予对应的值。

    let [a,[b,[c,d]],e] = [1,[2,[3,4]],5];
    console.log(a,b,c,d,e);
    

    1.3 不完全解构

    如果右边没有给值,就当做undefined处理。

    let [a,b,c] = [1,2]; // let [a,b,c] = [1,2,undefined];
    

    1.4 可忽略

    let [a, , b] = [1,2,3];
    

    二、数组解构赋值:剩余运算符

    2.1 定义

    语法:...变量名
    作用:可以将右边数组中剩余的值解构到左边,而且是以数组的形式保存。

    let [a, ...b] = [1,2,3,4,5,6];
    console.log('a为:', a);
    console.log('b为:', b);
    

    2.2 注意

    剩余运算符只能放在最后一个参数的位置上,否则报错。

    let [...b, a] = [1,2,3];
    console.log(b);
    

    三、数组解构赋值:默认值

    3.1 规则

    指定默认值,默认值产生的条件是:右边数组中对应的数据(====)严格等于undefined。

    例如下面,y=10就表示,y的默认值为10。

    let [x,y=10] = [1]; // let [x,y=10] = [1, undefined];
    console.log(x,y);
    

    3.2 特殊情况

    let [a=10, b=a] = []; // a=10,b=10
    let [a=10, b=a] = [1]; // a=1, b=1
    let [a=10, b=a] = [1,2]; // a=1, b=2
    let [a=b, b=20] = []; // 报错(在用b之前还没初始化值)
    

    分析:
    第一行:a和b匹配到undefined,所以采用默认值,a是10,b的值是a,也就是10;
    第二行:a匹配到1,b匹配到undefined,所以b的值就是a,也就是1;
    第三行:a和b均匹配到数值,因此a为1,b为2;(这里b不会是默认给到a的值,因为它自己有匹配的值)
    第四行:a=b,但是b还没有初始化,因此报错。

    四、对象解构赋值:基本方式

    4.1 映射对应

    只有左边对象的变量名和右边对象的属性名相同时,才会取到值。(等号右边写对象的变量名也可以。)

    let {a, b} = {a:'foo', b:'bar'}; // a='foo' b='bar'
    
    let obj = {
        name: 'mm',
        age: 18
    }
    let {name, age} = obj; // name='mm' age=18
    
    let {say} = {jump:'jump', sing:'sing'}; // say='undefined' (找不到对应的属性名,那就给undefined)
    

    4.2 可嵌套

    let obj = {p: ['hello', {y: 'world'}] };
    let {p: [x, { y }] } = obj; // x='hello' y='world'
    

    左边:p是一种模式匹配,真正解构的是后面的数组中的x和对象中的y。
    因此按照数组解构'hello'赋值给x,按照对象解构'world'赋值给y。
    那么要想获取对象中p的属性值呢,直接写p就行。

    let {p} = obj; // p=['hello', {y: 'world'}]
    

    4.3 不完全解构

    let {a,b,c} = {a:1,b:2}; // a=1 b=2 c=undefined
    

    4.4 可忽略

    let obj = {p: ['hello', {y: 'world'}] };
    let {p: [x, {  }] } = obj; // x='hello'
    

    五、对象解构赋值:剩余运算符

    剩下的属性以对象的形式保留。

    let {a, b, ...res} = {a:1, b:2, c:3, d:4, e:5}; // a=1 b=2 res={c:3, d:4, e:5}
    

    六、对象解构赋值:默认值

    指定默认值,默认值产生的条件是:对象属性名(====)严格等于undefined。

    let {a,b=10,c} = {a:1}; // a=1 b=10 c=undefined
    let {x=3} = {x:undefined}; // x=3
    let {y=4} = {y:null}; // y=null
    

    七、对象解构赋值:易错点

    对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

    例如,等号左边foo对应右边的同名属性是foo,它的值是'foo',这个值最后赋值给foo对应的变量f而非foo。
    简而言之,这个f和b相当于是一个别名

    let {foo:f, bar:b} = {foo:'foo', bar:'bar'}; // f='foo' b='bar'
    

    八、解构赋值的应用

    8.1 交换变量

    let x=1, y=2;
    [x, y] = [y, x];
    console.log(x,y); // 2 1
    

    8.2 接收返回值

    function foo() {
          return [1,2,3];
    }
    let [a,b,c] = foo();
    console.log(a,b,c); // 1 2 3
    
    function bar() {
          return {
                b1: 'bar1',
                b2: 'bar2'
          }
    }
    let {b1, b2} = bar();
    console.log(b1, b2); // 'bar1' 'bar2'
    

    8.3 获取JSON数据

    var json = {
          name: 'mm',
          age: 18
    }
    let {name, age, say='暂无数据'} = json;
    console.log(name, age); // 'mm' 18 '暂无数据'
    

    8.4 获取模块数据

    导出模块时用export,导入模块时用import。

    模块导出:(文件名为:module.js)

    let [a,b,c] = [1,'second',true];
    export {
        a,b,c
    }
    

    模块导入:

    import {a,b,c} from './module.js';
    console.log(a,b,c); // 1,'second',true
    

    总结

    1. 等号左右结构和形式要对应;
    2. 数组解构赋值时,左边变量的顺序和右边变量值的顺序是一一对应的;对象结构赋值时,左右两侧的顺序不重要,只要找到就行;
    3. 如果左边没有匹配到右边的值,那么当做undefined处理,把undefined赋值给左边;
    4. 剩余运算符要放在参数末尾的位置上,如果是数组,那么会以数组的形式赋值给左边的变量,如果是对象,则以对象形式赋值。
    5. 默认值生效的前提是,右边对应数组位置或者对象属性名的数据严格等于undefined。(===)
    6. 用途:ajax后台大量的json数据传递到浏览器客户端,用解构赋值可以方便地获取数据。
    7. 用途:功能模块导入。
  • 相关阅读:
    动态更新活动条件
    使用本地服务异步执行自定义活动业务逻辑
    隐藏自定义复合活动的内部实现
    如何开发一个基本的复合活动
    HTML5性能之争 —— 单线程:缺点还是特点?
    CDNJS —— Web 上最快的 JavaScript 资源库
    Comfusion 4.1 发布,桌面 Linux 发行
    FreeBSD 9.1 正式版已经可以下载
    Squid Analyzer 5.0 发布,Squid日志统计
    MemSQL 1.8 发布,号称最快的关系数据库
  • 原文地址:https://www.cnblogs.com/buildnewhomeland/p/12828784.html
Copyright © 2020-2023  润新知