对象的解构赋值

数组的解构赋值

基本用法

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值

1
2
3
4
5
6
7
8
9
10
11
let [foo, [bar], baz] = [1, [2], 3] 
foo //1
bar //2
baz //3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [head, ...tail] = [1, 2, 3, 4]
head //1
tail //[2,3,4]

如果解构不成功，变量的值就等于undefined

如果等号的右边不是数组，那么将会报错，因为等号右边的值或是转为对象以后不具备Iterator接口，或是本身就不具备Iterator接口

事实上，只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值

默认值

1
2
3
4
5
let [foo = true] = []
foo //true

let [x, y = 'b'] = ['a'] // x='a', y='b'
let [x, y = 'b'] = ['a', undefined] // x='a', y='b'

注意：ES6内部使用严格相等运算符(===)判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到时才会求值

1
2
3
4
function f() {
    console.log("hello")
}
let [x = f()] = [1]

上面的代码中，因为x能取到值，所以函数f根本不会执行

对象的解构赋值

数组的元素是按次序排列的，变量的取值是由它的位置决定的；而对象的属性没有持续，变量必须与属性同名才能取到正确的值

1
2
3
let {bar, foo} = {foo : 'aaa', bar : 'bbb'}
foo //'aaa'
bar //'bbb'

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

1
2
3
var {foo:baz} = {foo: 'aaa', bar: 'bbb'}
baz // 'aaa'  真正被赋值变量
foo // error: foo is not defined   这里的foo是匹配的模式

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

1
2
3
4
5
6
7
8
9
10
11
12
var node = {
    loc: {
        start : {
            line: 1,
            column: 5
        }
    }
}
var {loc, loc: {start}, loc:{start : { line }}} = node;
line //1
loc //Object {start: Object}
start // Object {line:1, column:5}

上面的代码有三次解构赋值，分别是对loc、start、line三个属性的解构赋值。注意:最后一次对line属性的解构赋值之中，只有line是变量，loc和start都是模式，不是变量

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

1
2
3
4
5
var { x = 3} = { x = undefined}
x  //3

var { x = 3 } = { x = null}
x //null

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

1
2
3
4
5
6
let {log,sin,cos} = Math

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

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

用途

  • 交换变量的值

    1
    2
    3
    let x = 1;
    let y = 2;
    [x,y] = [y,x];

  • 从函数返回多个值

    1
    2
    3
    4
    function example() {
        return [1,2,3]
    }
    let [a,b,c] = example()

  • 函数参数的定义

    1
    2
    3
    4
    function f([x,y,z]) {...}
    f([1,2,3]);
    function f({x,y,z}) {...}
    f({z:3,y:2,x:1})

  • 提取 JSON数据

  • 函数参数的默认值

  • 遍历Map结构

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var  map = new Map();
    map.set('first', 'hello')
    map.set('second', 'world')

    for(let [key,value] of map) {
        console.log(key + "is" + value)
    }

    // 只获取key
    for(let [key] of map) {
        //....
    }

    // 只获取value
    for(let [, value] of map) {
        //....
    }

  • 输入模块的指定方法