全面感知ES6（5）解构赋值

最新推荐文章于 2021-10-21 08:30:00 发布

原创最新推荐文章于 2021-10-21 08:30:00 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#解构 #解构赋值

ES6 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了ES6中的解构赋值功能，包括数组解构和对象解构的基本用法，通过实例展示了如何使用解构赋值来简化变量赋值的过程。

ES6中的解构赋值

解构绝对不是结构（拼音没有过8级的，绝对说不好这两个词的区别）

 
     /*
        解构    
            分为
                数组解构
                对象解构
            作用
                更快速，更方便的从数组和对象中提取值。
            规则
                1.等号两边结构必须一样
                2.等号右边必须是个东西
                    这个东西指的是JS中的合法数据类型
                3.声明和赋值必须在同一句话中完成
    */

下面我们就详细说下例子

数组解构

    
    let arr = [1, 2, 3];
    //常规写法
    let a = arr[0];
    let b = arr[1];
    let c = arr[2];
    // 解构写法
    let [a, b, c] = arr;
    console.log(a, b, c);//1, 2, 3
    //是不是很方便

再来看看对象解构

    
    let {
        e,
        d
    } = {
        e: 1,
        d: 2
    };
    console.log(e, d);//1 2

在来看个复杂点的

    let [{
            a
        },
        [
            [b, c, d]
        ], num, str
    ] = [{
            a: 1
        },
        [
            [1, 2, 3]
        ], 4, 'abc'
    ];
    console.log([{
            a
        },
        [
            [b, c, d]
        ], num, str
    ]);
    //[{a:1},[1,2,3],2:4,3:"abc"]

是不是也很简单。

但是如果解构配合着运算符用的话会更简单

    
    let arr1 = [1, 2, 3];
    let arr2 = [...arr1];
    console.log(arr1); //[1, 2, 3]
    console.log(arr2); //[1, 2, 3]

是不是跟简单了，

所以只要记住上面的三条规则，解构掌握很轻松的，

arr2 = [...arr1]

解构的值被解构的值

补充：如果解构的值和被解构的值数量不相等，解构多余的值为空；

关于ES6的解构我能分享给大家大概就是这么多了，

如果上述代码有错误和不足，请评论或私信，我好及时改正。