es6 - 解构赋值

DirtyMind 发布于2019-08-26 11:45 / 3310人阅读

摘要：比如上面展示的情况都是可以联合使用的比如对象的解构赋值对象的解构赋值是基于属性的。当给已存在的变量解构赋值时，注意加这是由于如果不加会把左边看成一个代码块，会报错。注意事项数组的解构赋值中，使用的变量必须放在最后。

解构赋值

解构赋值是一个听起来比较高大上的特性，但按我的理解，它就是一种语法糖。它并没有赋予js更强大的能力，只是让赋值操作更加的灵活，效率。

在es6之前，赋值操作需要=左边是一个变量，右边是一个数据或返回数据的函数等。
而解构赋值，是将=右边的结构分解(解构)，然后按照格式给=左边进行赋值，主要分为数组的解构赋值和对象的解构赋值。

语法

解构赋值的格式为，=左边为解构赋值的语法，=右边为初始化器，即一个对象或数组。

数组的解构赋值

数组的解构赋值是基于数组位置的，比如：

let [a,b] = [1,2] // 结果a等于1，b等于2

也可以通过解构改变变量的值。比如：

let a = 1, b = 2;
[a,b] = [100, 200];

当=左边与右边不完全匹配时，未能匹配到的变量会被赋值为undefined,比如：

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

所以可以通过给一些变量指定默认值，以防止这种情况的发生。比如：

let [a,b,c=3] = [1,2] //a==1, b==2, c==3

注意：只有当在右边找不到对应的值或值为undefined时，才会使用默认值。

有时候，解构赋值中，你可能只关心一部分数据，这时可以通过占位符只给某些值赋值。比如：

let [a,,,b,,] = [1,2,3,4,5,6,7,8] //a==1 b==4

在解构赋值中，通过在变量前加...号，表示生成的变量为一个数组。比如：

let [a,,...b] = [1,2,3,4,5] //a == 1, b==[3,4,5]

上面展示的情况都是可以联合使用的,比如：

let [a,b=8,,..c] = [1,2,3,4,5,6] //a==1 b==2 c=[4,5,6]

对象的解构赋值

对象的解构赋值是基于属性的。比如：

let {name, age} = {
    name: "icode007",
    age: 27
}
//name == "icode007" age==27

与数组的解构赋值一样，对象的解构赋值一样给未能解构的变量赋值undefined，一样可以使用默认值。

当给已存在的变量解构赋值时，注意加()

let name, age;
({name, age} = {name: "icode007", age: 27});

这是由于如果不加(),js会把左边看成一个代码块，会报错。加了()后，整个变成了一个合法的表达式。

在上面的解构赋值中，变量名和对象中的属性名必须相同，只有这样，才能找到对应的要解构赋值的数据。
但如果我们想要给数据赋一个不同的名字呢？也是有办法的。

let {name:myName, age: myAge} = {name: "icode007", age: 27}

这样相应的名字和年龄就被赋值给myName和myAge了。

也可以同时使用默认值：

let {name:myName, age: myAge, jog: myJob = "soft Engineer"} = {name: "icode007", age: 27}

以上我们列举的对象的解构赋值的例子都非常的简单，但在实际开发中，JSON数据可能是非常复杂的，这时的解构赋值语法也可能变得复杂。比如：

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
};
let {loc: { start }} = node;
console.log(start.line);
console.log(start.column);

注意：每当有:出现在解构赋值中时，:左边的标识符表示要检查的位置，右边表示要赋值的目标，如果右边是{}或[]时，表示要赋值的变量在更深层次结构中。

上面的所有实例，如默认值，变量更名等特性都可能存在于一个解构赋值语句中。并且，数组的解构赋值与对象的解构赋值，也可以混合使用。这为我们从复杂的数据结构中提取相应数据提供了极大的便利。

函数参数的解构

函数参数的解构功能对于实现多参的函数是非常有用的。
比如

function setCookie(name, value, options){
    options = options || {};
    var secure = option.secure,
        path = option.path,
        domain = option.domain
    ;
    //...
}

setCookie("type", "js", {
    secure: true,
    expires: 60000
    })

上面的函数是常用的实现多参函数的方式，name, value为必填参数，所有可选参数封装到options中，作为options的属性使用。
但上面的函数存在一个问题就是，你只看函数的定义，是无法知道到底可选参数的名称是什么的？你需要阅读函数代码，了解函数才能使用它。

使用函数参数解构则直观很多：

function setCookie(name, value, {secure, path, domain}){
    //...
}

使用同样的使用方式可以调用这个函数。

但是这种写法有种问题是当只传入name和value参数时，会报错。

更好的写法是使用函数的默认参数。

function setCookie(name, value, {secure, path = "/", domain} = {}){
    //...
}

注意事项

数组的解构赋值中，使用...rest的变量必须放在最后。

与普通的变量的赋值语句一样，解构赋值语句也是有值的，它的值就是=右边的内容。

最佳实践

变量交换值

在es6之前，交换两个变量的值，需要创建一个中间变量，类似这样

var a = 1, b = 2, temp;
temp = a; a = b; b = temp;

现在只需要一行代码：
[a,b] = [b,a]

提取json中的一些数据

在实际开发中，数据解构是非常复杂的，使用对象属性去层层调用的语法非常不直观，通过解构赋值，可以让代码更加的直观与简洁。

数组的复制

数组的解构赋值中，有个小技巧。

let arr = [1,4,9,55,244];
let [...cloneArray] = arr;
console.log(cloneArray);

这样就实现了数组的浅复制，而在以前，数组的复制都是通过concat()方法来完成。

更多es6的内容，可以关注我的专栏--学习ES6.

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

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

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

ES6 学习笔记（一）let，const和解构赋值

摘要：另外对于已经声明的变量进行解构赋值时，要非常小心。因此在行首加，将其强制转化为表达式执行。由于和无法转为对象，所以对它们进行解构赋值，都会报错。 let和const let和const是es6新增的两个变量声明关键字，与var的不同点在于：（1）let和const都是块级作用域，在{}内有效，这点在for循环中非常有用，只在循环体内有效。var为函数作用域。（2）使用let和con...

iOS122 2019-08-23 15:29 评论0 收藏0
ES6学习第二章变量的解构赋值

摘要：前言前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。解构赋值是对赋值运...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637
ES6学习第二章变量的解构赋值

摘要：前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637
ES6-变量的解构赋值(3)

摘要：数组的解构赋值特点根据数据的下标来赋值的，有次序。模式能够匹配起来，如长度为数值和布尔值的解构赋值解构赋值的规则是只要等号右边的值不是对象或数组，就先将其转为对象。布尔值解构赋值为字符串的一种。在很多独立细小的方面，解构赋值都非常有用。 1、解构赋值简介官方解释：按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。举个例子，想获取数组中...

Jason_Geng 2019-08-23 16:46 评论0 收藏0
《ES6学习2》变量的解构赋值

摘要：解构赋值的分类数组解构赋值对象解构赋值字符串解构赋值数值解构赋值布尔值解构赋值函数参数解构赋值。嵌套情况默认值解构赋值允许设置默认值，当数组成员严格等于，默认值将生效。报错报错函数参数的解构赋值函数的参数也可以使用解构赋值和指定默认值 ES6可以从数组和对象中提取值，然后对变量进行赋值。解构赋值的分类：数组解构赋值、对象解构赋值、字符串解构赋值、数值解构赋值、布尔值解构赋值、函数参...

mist14 2019-08-26 13:52 评论0 收藏0