ECMAScript 6 学习笔记（二）：变量的解构赋值

Share

1. 数组的解构赋值

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

基本用法

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

1
let [a, b, c] = [1, 2, 3];

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

1
2
3
4
5
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

默认值

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

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'

2. 对象的解构赋值

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

1
2
3
4
5
6
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

3. 字符串的解构赋值

1
2
3
4
5
6
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

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

4. 用途

交换变量的值

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

从函数返回多个值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 返回一个数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

函数参数的定义

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

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