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

Posted 2021-06-08 心有明珠，山河明媚

二、变量的解构赋值

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结构
• 输入模块的指定方法

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