ES6 变量的解构赋值详解

变量的解构赋值

1.0 数组的解构赋值

1. 基本用法

ES 6 允许按照一定模式, 从数组和对象中提取值, 对变量进行复制, 这被称为解构赋值(Destructuring)

• 可以从数组中, 按照对应的位置, 给变量赋值

  let [a, b, c] = [1, 2, 3]
  console.log(a, b, c); // 1 2 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 // [] 打包
  

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

2. 解构赋值默认值

解构赋值允许指定默认值

let [name = "Gene"] = [];
console.log(name); // Gene

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

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

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。

2.0 对象的解构赋值

解构不仅可以用于数组, 还可以用于对象

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

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

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'

这实际上说明，对象的解构赋值是下面形式的简写

let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };

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

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined

上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo

2.1 对象的嵌套解构

与数组一样, 嵌套的对象, 也可以使用解构赋值

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

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

🏴 注意: 这时p 是模式, 不是变量, 因此不会被赋值, 如果 p 也要作为变量被赋值, 可以写成如下这样.

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

let { p, p: [x, { y }] } = obj;
console.log(x); // "Hello"
console.log(y); // "World"
console.log(p); // [ 'Hello', { y: 'World' } ]

下面是另外一个嵌套的解构赋值

const node = {
    loc: {
        start: {
            line: 1,
            column: 5
        }
    }
};

let { loc, loc: { start }, loc: { start: { line }} } = node;
console.log(line); // 1
console.log(loc);  // { start: { line: 1, column: 5 } }
console.log(start); // { line: 1, column: 5 }

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

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

3.0 字符串的解构赋值

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

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.0 函数参数的解构赋值

**函数的参数也可以使用解构赋值 **

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

函数参数的解构赋值也可以指定默认值

5.0 解构赋值的用途

1. 交换变量的值

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

2. 从函数返回多个值

函数只能返回一个值, 如果要返回多个值, 就只能将它们放在数组或对象里返回, 有了解构赋值, 取出这些值就非常方便.

// 返回一个数组
function returnArr() {
    return [1, 2, 3]
}
let [a, b, c] = returnArr();
console.log(a, b, c); // 1 2 3

// 返回一个对象
function returnObj() {
    return {
        foo: 'foo',
        bar: 'bar',
    }
}
let {foo, bar} = returnObj()
console.log(foo, bar); // foo bar

3.函数参数的定义

解构赋值可以方便的将一组参数与变量名对应起来

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

4. 输入模块的指定方法

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

Summary

交流学习加微信(wechat)(备注技术交流学习): Gene199302

上一章: ES6 let, const命令熟悉学习
下一章: ES6 字符串扩展的相关方法详解

该博客为学习阮一峰 ES6入门课所做的笔记记录, 仅用来留作笔记记录和学习理解