解构赋值 - 掘金

变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构，举例！

        let [a, b, c] = [1, 2, 3];
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3

可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

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

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

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

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

没有得分配到的值则为undefined

如果等号的右边不是可遍历的结构，则会报错

        let [a] = 1
        let [b] = false
        let [c] = {}

上面的均会报错

默认值

解构赋值允许指定默认值。

        let [foo = true] = []
        let [x,y=2]=[1]
        console.log(foo); // true
        console.log(x); // 1
        console.log(y); // 2

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

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

        function fn() {
            console.log("a");
        }
        let [x = fn()] = [1]
        console.log(x);  //1

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

        let [x = 1, y = x] = []
        console.log(y); //1

对象的解构赋值

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

        let {foo,bar,baz}={foo:"aaa",bar:"bbb",any:"ccc"}
        console.log(foo); // aaa
        console.log(bar); // bbb
        console.log(baz); // undefined

可以利用这种特性，将现有对象的方法，赋值到某个变量。

let { log, sin, cos } = Math;// 直接获取到对数、正弦、余弦三个方法
const { log } = console; // 直接把console.log方法赋值到log变量
log('hello') // hello

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

        let {foo:f}={foo:"aaa"}
        console.log(f); // aaa

真正被赋值的是后者，而不是前者。

解构也可以用于嵌套结构的对象。

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

对象的解构也可以指定默认值。

字符串的解构赋值

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

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

数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let { toString: s } = 123;
console.log(s===Number.prototype.toString); // true

由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

函数参数的解构赋值

function add([x, y]){
  return x + y;
}
add([1, 2]); // 3

也可以使用默认赋值

用途

1.交换变量值

let x = 1;
let y = 2;

[x, y] = [y, x];

2.从函数返回多个值

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();
// 返回对象也是同一个道理

3.提取JSON数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
let { id, status, data } = jsonData;
console.log(id, status, data);
// 42, "OK", [867, 5309]

4.输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

本文参考自《ES6入门标准》一书