《ES6标准入门》二、变量的解构赋值

2021-06-08 13:02:08 阅读：127 来源： 互联网

二、变量的解构赋值

1. 数组的解构赋值

1.1 基本用法

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。
可以从数组中提取值，按照对应位置，对变量赋值。
如果解构不成功，变量的值就等于undefined。

    let [foo] = []
    let [bar, foo] = [1]

不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

1.2 默认值

解构赋值允许指定默认值。
注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。也就是结构不成功，或者赋值为undefined的情况。
如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

    function f() {
        console.log('aaa')
    }

    let [x = f()] = [1]

上面代码中，因为x能取到值，所以函数f根本不会执行。只有默认值生效时，才会去执行函数f。

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

2. 对象的解构赋值

2.1 简介

解构不仅可以用于数组，还可以用于对象。
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

    let { bar, foo } = { foo: 'aaa', bar: 'bbb' }
    foo // "aaa"
    bar // "bbb"

    let { baz } = { foo: 'aaa', bar: 'bbb' }
    baz // undefined

对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。

    // 例一
    let { log, sin, cos } = Math

    // 例二
    const { log } = console
    log('hello') // hello

上面代码的例一将Math对象的对数、正弦、余弦三个方法，赋值到对应的变量上，使用起来就会方便很多。例二将console.log赋值到log变量。（注意同名）

如果变量名与属性名不一致，必须写成下面这样。

    let { foo: baz } = { foo: 'aaa', bar: 'bbb' }
    baz // "aaa"

    let obj = { first: 'hello', last: 'world' }
    let { first: f, last: l } = obj
    f // 'hello'
    l // 'world'

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
注意，对象的解构赋值可以取到继承的属性。

2.2 默认值

对象的解构也可以指定默认值。
默认值生效的条件是，对象的属性值严格等于undefined。

2.3 注意点

如果要将一个已经声明的变量用于解构赋值，必须非常小心。只有将整个解构赋值语句，放在一个圆括号里面，才可以正确执行。
解构赋值允许等号左边的模式之中，不放置任何变量名。因此，可以写出非常古怪的赋值表达式。表达式虽然毫无意义，但是语法是合法的，可以执行。
由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

    let arr = [1, 2, 3]
    let {0 : first, [arr.length - 1] : last} = arr
    first // 1
    last // 3

3. 字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

    const [a, b, c, d, e] = 'hello'
    a // "h"
    b // "e"
    c // "l"
    d // "l"
    e // "o"

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

    let {length : len} = 'hello'
    len // 5

4. 数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

5. 函数参数的解构赋值

函数的参数也可以使用解构赋值。
函数在传入参数的那一刻，参数就被解构成变量。对于函数内部的代码来说，它们能感受到的参数就是被解构的变量。
函数参数的解构也可以使用默认值。

    function move({x = 0, y = 0} = {}) {
        return [x, y];
    }
    //这是为x，y指定默认值。

    function move({x, y} = { x: 0, y: 0 }) {
        return [x, y];
    }
    //这是为函数参数指定默认值。
    move({}) //[undefined, undefined]
    move() // [0, 0]，此时结构不成功

6. 圆括号问题(不是很懂,不要放即可)

建议只要有可能，就不要在模式中放置圆括号。

6.1 不能使用圆括号的情况

以下三种解构赋值不得使用圆括号。
- 变量声明语句。
- 函数参数。
- 赋值语句的模式。

6.2 可以使用圆括号的情况

赋值语句的非模式部分，可以使用圆括号。

7. 用途

交换变量的值
从函数返回多个值
函数参数的定义
提取JSON数据
函数参数的默认值
遍历Map结构
输入模块的指定方法

学识浅薄，如有错误，恳请斧正，在下不胜感激。

标签：ES6,变量,对象,解构,let,默认值,赋值
来源： https://www.cnblogs.com/yin-jie/p/14862339.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9