【ES6入门02】：解构赋值

CloudwiseAPM 发布于2019-08-23 12:25 / 2176人阅读

摘要：数组解构赋值基本用法设置默认值变量交换函数返回结果赋值忽略某些返回值，只取需要的函数返回结果不确定，只关心第个，剩余的赋值到一个数组对象解构赋值基本用法变量名要和属性名一致对应，变量名等于属性名左侧是一个对象，右侧也是一个对象设置默认值数据

数组解构赋值

1.基本用法

{
    let a,b;
    [a,b] = [1,2];
    console.log(a, b); // 1 2
}
{
    let a,b,c;
    [a,b,...c] = [1,2,3,4,5,6];
    console.log(a, b, c); // 1 2 [3,4,5,6]
}
{
    let a,b,c;
    [a,b,c=3] = [1,2];  // 设置默认值
    console.log(a, b, c); // 1 2 3
}

2.变量交换

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

3.函数返回结果赋值

{
    function f() {
        return [true, false];
    }
    let a,b;
    [a, b] = f();
    console.log(a, b); // true false
}

4.忽略某些返回值，只取需要的

{
    function f() {
        return [1,2,3,4,5];
    }
    let a,b;
    [a,,,b] = f();
    console.log(a, b); // 1 4
}

5.函数返回结果不确定，只关心第n个，剩余的赋值到一个数组

{
    function f() {
        return [1,2,3,4,5];
    }
    let a,b;
    [a,...b] = f();
    console.log(a, b); // 1 [2,3,4,5]
}

对象解构赋值

1.基本用法

{
    let obj = {p: 42, q: true};
    // 变量名要和属性名一致对应，变量名等于属性名
    // 左侧是一个对象，右侧也是一个对象
    let {p, q} = obj;
    console.log(p, q); // 42 true
}
{
    let {a=10, b=5} = {a:3}; // 设置默认值
    console.log(a, b); // 3 5
}

2.json数据的解构赋值

{
    let data = {
        title: "hahaha",
        test: [
            {
                title: "yoyoyo",
                desc: "description"
            }
        ]
    };
    let {title: mainTitle, test: [{title: subTitle}]} = data;
    console.log(mainTitle, subTitle); // hahaha yoyoyo
}

云服务器 GPU云服务器解构赋值 ES6入门对象解构解构函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98475.html

ES6学习摘要（02）（新人学习）

摘要：默认值同时，对象解构赋值也允许设置默认值，默认值生效的判断条件同数组，只有在对应值严格等于时会生效。报错如果要将一个已经声明的变量用于解构赋值，必须非常小心。的规则是，只要有可能导致解构的歧义，就不得使用圆括号。 ECMAScript6/ES6 入门 let和const命令四、变量的解构赋值在ES6之前，数组和对象属性赋值只能直接指定固定值，ES6 允许按照一定模式，从数组和对象中...

Jonathan Shieber 2019-08-22 13:40 评论0 收藏0
ES6入门之变量的解构赋值

摘要：数组的解构赋值基本用法允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为结构。如下以上都会报错但是如果左边为数组，右边为字符串，将会取字符串的第一个下标的值对于结构，同样可以使用数组的解构赋值。 showImg(https://segmentfault.com/img/remote/1460000018826068); 数组的解构赋值基本用法 ES6 允许按照一定模式...

gityuan 2019-08-23 16:51 评论0 收藏0
新手快速学习ES6语法,用最快的速度入门ES6就看这里

摘要：的作用域与命令相同只在声明所在的块级作用域内有效。数值和布尔值的解构赋值解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。上面代码中，数值和布尔值的包装对象都有属性，因此变量都能取到值。默认值解构赋值允许指定默认值。最近正在学习ES6,对于ES6的语法有一些自己的理解, 想写这篇文章帮助跟我一样的新手快速入门ES6而不至于连代码都看不懂. 至于开发环境的搭建什么...

vspiders 2019-08-20 16:50 评论0 收藏0
es6知识点总结（一）

摘要：知识点总结一，，能重复声明，有前置功能。浅拷贝一个数组设置原型。永远是唯一的，不可能和别的重复，可以阻止对象的属性被篡改前面不能使用操作符。和的区别键名可以是任何数据类型初始化的时候必须一次性指定键名和键值。 es6知识点总结（一） let，var，const var：能重复声明，有前置功能。 let：有块级作用域，没有前置功能，不能重复声明。 const：有块级作用域，用来声明常量(...

HelKyle 2019-08-20 18:03 评论0 收藏0
ES6知识拾遗，再读ES6入门书籍总汇

摘要：冻结对象未定义就声明的变量会默认为全局的变量，的变量都归所有，命令命令命令声明的全局变量，不属于顶层对象的属性即不会归所有总结的六种声明变量注意在浏览器环境指的是对象，在指的是对象。参数搭配的变量是一个数组，该变量将多余的参数放入数组中。 1.var,let,const区别答：(1).var有变量声明提升，let&&const没有，这样导致了let,const必须声明后才可以访问...

thekingisalwaysluc 2019-08-23 18:30 评论0 收藏0