• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

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

开发技术 开发技术 7小时前 3次浏览

二、变量的解构赋值

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标准入门》二、变量的解构赋值
喜欢 (0)