ES6(解构赋值)

解构赋值,分为左右两种解构

  • 数组解构赋值 左右两边都是数组
  • 对象解构赋值 左右两边都是对象
  • 字符串解构赋值 左边是数组,右边是字符串
  • 布尔解构赋值(就是对象解构赋值)
  • 函数解构赋值
  • 数值解构赋值(就是对象解构赋值)
//数组解构赋值
{
    //用let 声明三个变量
    let a, b, rest;
    //相当于a=1 b=2
    [a, b] = [1, 2];
    console.log(a, b);// 1 2
}

//数组解构赋值
{
    let a, b, rest;
    [a, b, ...rest] = [1, 2, 3, 4, 5, 6];
    console.log(a, b, rest);// 1 2 [3,4,5,6]
}

//对象解构赋值
{
    let a, b;
    ({a, b} = {a: 1, b: 2});
    console.log(a, b);// 1 2
}

//数组解构赋值 默认值
{
    let a, b, c, rest;
    [a, b, c = 3] = [1, 2];
    console.log(a, b, c);// 1 2 3
}

//数组解构赋值 若没有在解构上成功配对,那么变量相当于只声明未赋值
{
    let a, b, c, rest;
    [a, b, c] = [1, 2];
    console.log(a, b, c);// 1 2 undefined
}

//利用解构赋值 实现变量交换
{
    let a = 1;
    let b = 2;
    [a, b] = [b, a];
    console.log(a, b);//2 1
}

{
    function f() {
        return [1, 2];
    }

    let a, b;
    [a, b] = f();
    console.log(a, b);//1 2
}

{
    function f1() {
        return [1, 2, 3, 4, 5];
    }

    let a, b, c;
    [a, , , b] = f1();
    console.log(a, b);//1 4
}

{
    function f2() {
        return [1, 2, 3, 4, 5];
    }

    let a, b, c;
    [a, ...b] = f2();
    console.log(a, b);//1 [2,3,4,5]
}

//对象解构赋值
{
    let o = {p: 42, q: true};
    let {p, q} = o;
    console.log(p, q);//42 true
}
//对象解构赋值 默认值
{
    let {a = 10, b = 5} = {a: 3};
    //a默认值为10 b默认值为5,通过赋值,a的值被覆盖为3,b没有被覆盖
    console.log(a, b);//3 5
}

//对象解构赋值 嵌套应用
{
    let metaData = {
        title: 'abc',
        test: [{
            title: 'test',
            desc: 'description'
        }]
    };

    let {title: esTitle, test: [{title: cnTitle}]} = metaData
    console.log(esTitle, cnTitle);//abc test
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 引入 在ES5中,开发者们为了从对象和数组中获取特定数据并赋值给变量,编写了许多看起来同质化的代码 这段代码从op...
    nengzhuan_zhang阅读 661评论 0 0
  • 前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段。在ES6中添加了可以简化这种任务的新特性...
    sunnyghx阅读 848评论 0 0
  • 数组的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructur...
    _羊羽_阅读 653评论 0 1
  • 解构赋值 解构赋值说白了就是一种模式匹配,等号左右两边对应变量和值。解构赋值可以是完全解构赋值,即每个值与右边一一...
    roylai阅读 305评论 0 0
  • 解构赋值 解构赋值语法是一个 JavaScript 表达式,这使得可以将值从数组或属性从对象提取到不同的变量中 数...
    梦幽辰阅读 188评论 0 0

友情链接更多精彩内容