解构（Destructuring） -- Exploring ES6

原文链接：  exploringjs.com

目录

请多多支持本书：购买 (PDF, EPUB, MOBI)或捐赠

10. 解构（Destructuring）

10.1 概览

解构（Destructuring） 是一种从数据中提取值的便捷方式，这些数据存储在（可能嵌套的）对象和数组中。解构可以用在接收数据的地方（比如赋值操作的左边）。提取的具体方式取决于模式（看后面的例子就明白啦）。

10.1.1 对象解构（Object destructuring）

解构对象：

const obj = { first: 'Jane', last: 'Doe' };
const {first: f, last: l} = obj;
    // f = 'Jane'; l = 'Doe'

// {prop} 是 {prop: prop} 的缩写
const {first, last} = obj;
    // first = 'Jane'; last = 'Doe'

解构能帮助处理返回值：

const obj = { foo: 123 };

const {writable, configurable} =
    Object.getOwnPropertyDescriptor(obj, 'foo');

console.log(writable, configurable); // true true

10.1.2 数组解构（Array destructuring）

数组解构（作用于所有可迭代的值）：

const iterable = ['a', 'b'];
const [x, y] = iterable;
    // x = 'a'; y = 'b'

解构能帮助处理返回值：

const [all, year, month, day] =
    /^(\d\d\d\d)-(\d\d)-(\d\d)$/
    .exec('2999-12-31');

10.1.3 解构可以用在什么地方？

解构可以用在以下地方：

// 变量声明：
const [x] = ['a'];
let [x] = ['a'];
var [x] = ['a'];

// 赋值：
[x] = ['a'];

// 参数定义：
function f([x]) { ··· }
f(['a']);

你还可以在for-of循环里进行解构:

const arr1 = ['a', 'b'];
for (const [index, element] of arr1.entries()) {
    console.log(index, element);
}
// 输出:
// 0 a
// 1 b

const arr2 = [
    {name: 'Jane', age: 41},
    {name: 'John', age: 40},
];
for (const {name, age} of arr2) {
    console.log(name, age);
}
// 输出:
// Jane 41
// John 40

10.2 背景：构造数据 vs 提取数据

为了充分理解什么是解构，我们先看看它所在的更广义的上下文环境。JavaScript 有以下操作来构造数据：

const obj = {};
obj.first = 'Jane';
obj.last = 'Doe';

并且有以下操作来提取数据：

const f = obj.first;
const l = obj.last;

注意，我们提取数据的时候用了跟构造数据时一样的语法。

还有更好的构造语法——对象字面量：

const obj = { first: 'Jane', last: 'Doe' };

在 ECMAScript 6 里_解构允许使用同样的语法提取数据，这种语法在提取数据时叫做对象模式_：

const { first: f, last: l } = obj;

就像对象字面量允许同时创建多个属性一样，对象模式允许我们同时提取多个属性。

你也可以通过模式解构数组：

const [x, y] = ['a', 'b']; // x = 'a'; y = 'b'

10.3 模式（Patterns）

以下是解构相关的两个部分：

• 解构源（Destructuring source）： 被解构的数据。比如，解构赋值的右边。

• 解构目标（Destructuring target）: 解构的模式。比如，解构赋值的左边。

解构目标有以下三种模式：

• 赋值目标（Assignment target）。 比如: x

  • 在变量声明和参数定义里，只允许对变量的引用。在解构赋值里，你有更多选择，稍后会进行解释。

• 对象模式（Object pattern）。 比如：{ first: «pattern», last: «pattern» }

  • 一个对象模式的组成部分是属性，属性的值还是模式（可递归）。

• 数组模式（Array pattern）。 比如： [ «pattern», «pattern» ]

  • 数组模式的组成部分是元素，元素还是模式（可递归）。

这意味着能够以任意的深度嵌套模式：

const obj = { a: [{ foo: 123, bar: 'abc' }, {}], b: true };
const { a: [{foo: f}] } = obj; // f = 123

10.3.1 按需挑选模式

假如你要解构一个对象，你只需要写你想要的属性：

const { x: x } = { x: 7, y: 3 }; // x = 7

假如你要解构一个数组，你可以选择只提取前面的部分：

const [x,y] = ['a', 'b', 'c']; // x='a'; y='b';

10.4 模式是如何访问值的内部结构的？

在 pattern = someValue 这个赋值里， pattern 是如何访问 someValue 内部的呢？

10.4.1 对象模式强制将值转化成对象处理

对象模式在访问属性之前会强制将解构源转化成对象。这意味着它能处理原始类型值（primitive values）：

const {length : len} = 'abc'; // len = 3
const {toString: s} = 123; // s = Number.prototype.toString

10.4.1.1 有时候，无法对值进行对象解构

强制转化成对象的操作并不是通过 Object() 实现的，而是通过内部操作 ToObject()。 Object() 永远都不会失败：

> typeof Object('abc')
'object'
> var obj = {};
> Object(obj) === obj
true
> Object(undefined)
{}
> Object(null)
{}

当遇到 undefined 或 null 时， ToObject() 会抛一个 TypeError 错误。因此，下面的解构在访问任何属性之前就失败了：

const { prop: x } = undefined; // TypeError
const { prop: y } = null; // TypeError

所以，你可以使用空对象模式 {} 检查一个值能否强制转换成对象。我们已经知道，只有 undefined 和 null 不能：

({} = [true, false]); // OK，数组强制转换成对象
({} = 'abc'); // OK，字符串强制转换成对象

({} = undefined); // TypeError
({} = null); // TypeError

以上表达式外面的圆括号是必须的，因为在 JavaScript 里，声明不可以用花括号开始（细节稍后解释）。

10.4.2 数组模式对可迭代的值都可以生效

数组解构使用了迭代器来获取解构源的元素。因此，你可以数组解构任何可迭代的值。我们来看几个可迭代值的例子。

字符串是可迭代的：

const [x,...y] = 'abc'; // x='a'; y=['b', 'c']

别忘了，字符串的迭代器返回的是代码点（“Unicode 字符”， 21 位），而不是代码单元（“JavaScript 字符”, 16 位）。（更多关于 Unicode 的信息，参考“Speaking Javascript”这本书里的“第 24 章 Unicode 与 JavaScript”。) 比如：

const [x,y,z] = 'a\uD83D\uDCA9c'; // x='a'; y='\uD83D\uDCA9'; z='c'

你不能通过索引访问 Set 的元素，但是你可以通过迭代器来访问。因此，数组解构也支持 Set：

const [x,y] = new Set(['a', 'b']); // x='a'; y='b’;

Set 迭代器按照插入顺序返回元素，这也是解释了为什么上面的解构每次返回的结果都相同。

无穷序列。 解构也可用于无穷序列的迭代器。 生成器函数 allNaturalNumbers() 返回一个生成 0， 1， 2 … 的迭代器。

function* allNaturalNumbers() {
  for (let n = 0; ; n++) {
    yield n;
  }
}

下面的解构能提取上面无穷序列的前三个元素。

const [x, y, z] = allNaturalNumbers(); // x=0; y=1; z=2

10.4.2.1 有时候，无法对值进行数组解构

当一个值有 Symbol.iterator 方法，且这个方法能返回一个对象时，它就是可迭代的。假如被解构的值不可迭代，数组解构就会抛出 TypeError 的错误：

let x;
[x] = [true, false]; // OK，数组是可迭代的
[x] = 'abc'; // OK, 字符串是可迭代的
[x] = { * [Symbol.iterator]() { yield 1 } }; // OK，可迭代

[x] = {}; // TypeError，空对象不可迭代
[x] = undefined; // TypeError，不可迭代
[x] = null; // TypeError，不可迭代

访问数组元素之前，就会抛出 TypeError ，这意味着你可以用空数组模式 [] 检查一个值是不是可迭代的：

[x] = {}; // TypeError，空对象不可迭代
[x] = undefined; // TypeError，不可迭代
[x] = null; // TypeError，不可迭代

10.5 如果有一部分没有匹配到

与 JavaScript 处理不存在的属性和数组元素相似，当解构目标中有一部分不存在于解构源中时，解构就会默默失败：这一部分内部会匹配到 undefined。如果内部是一个变量，意味着这个变量的值会被设置为 undefined：

const [x] = []; // x = undefined
const {prop:y} = {}; // y = undefined

注意，假如对象模式和数组模式匹配到 undefined 时，会抛一个 TypeError。

10.5.1 默认值（Default values）

默认值（Default values） 是模式的一个特性： 假如有一部分（一个对象属性或者一个数组元素）在解构源中没有匹配到，那么它就会被匹配成：

• 它的 默认值 （如果指定了的话）

• undefined （没指定时）

也就是说，提供一个默认值是可选的操作。

来看一个例子。在下面的解构中，下标为 0 的元素在右边没有匹配值。因此，解构会继续将 x 匹配成 3，结果就是 x 被设置成了 3。

const [x=3, y] = []; // x = 3; y = undefined

你也可以在对象模式中使用默认值：

const {foo: x=3, bar: y} = {}; // x = 3; y = undefined

10.5.1.1 undefined 会触发默认值

当某一部分有匹配值，并且匹配值是 undefined 时，也会最终匹配到默认值：

const [x=1] = [undefined]; // x = 1
const {prop: y=2} = {prop: undefined}; // y = 2

这一行为的根本原因将会在下一章的参数默认值一节中解释。

10.5.1.2 默认值是按需计算的

默认值本身只在需要时（即被触发时）进行计算。也就是说，下面的解构：

const {prop: y=someFunc()} = someValue;

等价于：

let y;
if (someValue.prop === undefined) {
    y = someFunc();
} else {
    y = someValue.prop;
}

假如你用 console.log()的话，可以观察到这一点：

> function log(x) { console.log(x); return 'YES' }

> const [a=log('hello')] = [];
hello
> a
'YES'

> const [b=log('hello')] = [123];
> b
123

在第二个解构中，默认值不会被触发，log() 不会被调用。

10.5.1.3 默认值可以指向模式中的其它变量

默认值可以指向任何变量，包括同一模式下的其它变量：

const [x=3, y=x] = [];     // x=3; y=3
const [x=3, y=x] = [7];    // x=7; y=7
const [x=3, y=x] = [7, 2]; // x=7; y=2

但是，要注意顺序：变量 x 和 y 是从左到右声明的，假如在变量声明之前访问它，就会产生 ReferenceError：

const [x=y, y=3] = []; // ReferenceError

10.5.1.4 模式的默认值

目前我们只看到了变量的默认值，其实也可以给模式设定默认值：

const [{ prop: x } = {}] = [];

这样做的意义是什么呢？我们来回顾一下默认值的规则：

假如在解构源中没有匹配到，解构会继续匹配默认值[…]。

因为匹配不到下标为 0 的元素，解构就会继续下面的匹配：

const { prop: x } = {}; // x = undefined

如果把模式 { prop: x} 替换成变量 pattern，就更容易理解了：

const [pattern = {}] = [];

更复杂的默认值。我们进一步探索模式的默认值。在下面的例子里，通过默认值 { prop: 123 } 给 x 赋值：

const [{ prop: x } = { prop: 123 }] = [];

因为下标为 0 的数组元素在右侧没有匹配，解构就会继续下面的匹配，最终 x 被设为 123。

const { prop: x } = { prop: 123 };  // x = 123

但是，在下面这种情况下，即使右侧的默认值里有下标为 0 的元素，x 也不会被赋值。因为这个默认值不会被触发。

const [{ prop: x } = { prop: 123 }] = [{}];

在这种情况下，解构会继续下面的匹配：

const { prop: x } = {}; // x = undefined

因此，假如你希望无论是对象还是属性缺失，x 都默认为 123 的话，你需要给 x 本身指定一个默认值：

const [{ prop: x=123 } = {}] = [{}];

这样的话，解构就会像下面这样继续进行，无论右侧是 [{}] 还是 []。

const { prop: x=123 } = {}; // x = 123

还有疑问？

稍后会有一节 从另一个角度——算法角度——来解释解构。也许能让你有新的见解。

10.6 对象解构的更多特性

10.6.1 属性值缩写

属性值缩写是对象字面量的一个特性：假如属性值用变量表示，且变量与属性的键同名，你就可以省略键。对于解构，也同样适用：

const { x, y } = { x: 11, y: 8 }; // x = 11; y = 8

上述声明等价于：

const { x: x, y: y } = { x: 11, y: 8 };

你也可以将默认值与属性值缩写结合起来：

const { x, y = 1 } = {}; // x = undefined; y = 1

10.6.2 可计算的属性键（Computed property keys）

可计算的属性键是对象字面量的另一个特点，这也同样适用于解构。通过将表达式放进方括号中，你可以将一个属性的键指定为这个表达式：

const FOO = 'foo';
const { [FOO]: f } = { foo: 123 }; // f = 123

可计算的属性键允许解构键为 symbol 类型的属性：

// 创建并解构一个属性，属性的键是一个 symbol
const KEY = Symbol();
const obj = { [KEY]: 'abc' };
const { [KEY]: x } = obj; // x = 'abc'

// 提取 Array.prototype[Symbol.iterator]
const { [Symbol.iterator]: func } = [];
console.log(typeof func); // function

10.7 数组解构的更多特性

10.7.1 省略（elision）

省略（elision）允许在解构时使用数组的“空洞”来跳过不关心的元素：

const [,, x, y] = ['a', 'b', 'c', 'd']; // x = 'c'; y = 'd'

10.7.2 剩余操作符（rest operator, ...）

剩余操作符（rest operator） 允许将数组的剩余元素提取到一个数组中。你只能把剩余操作符当作数组模式的最后一部分来使用：

const [x, ...y] = ['a', 'b', 'c']; // x='a'; y=['b', 'c']

剩余操作符用于提取数据。展开操作符（spread operator）也用了同样的语法（...）。展开操作符向对象字面量和函数调用提供数据，在下一章会详细展开。

如果剩余操作符找不到任何元素，就会将运算元（operand）匹配到空数组。也就是说，它不会产生 undefined 或者 null。比如：

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

剩余操作符的运算元不一定是变量，还可以是模式：

const [x, ...[y, z]] = ['a', 'b', 'c'];
    // x = 'a'; y = 'b'; z = 'c'

剩余操作符将触发以下解构：

[y, z] = ['b', 'c']

展开操作符 (...) 跟剩余操作符长得一模一样，但它用在函数调用和数组字面量中（而不是解构模式中）。

10.8 不止可以给变量赋值

使用解构赋值时，每个赋值目标可以是一个正常赋值的左侧所允许的任何内容，包括对属性的引用（obj.prop）和对数组元素的引用（arr[0]）。

const obj = {};
const arr = [];

({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });

console.log(obj); // {prop:123}
console.log(arr); // [true]

你还可以用剩余操作符（...）给对象的属性和数组元素赋值：

const obj = {};
[first, ...obj.prop] = ['a', 'b', 'c'];
    // first = 'a'; obj.prop = ['b', 'c']

假如你通过解构来_声明_变量或者定义参数，必须使用简单标识符，而不能是对象属性和数组元素的引用。

10.9 解构的陷阱

在使用解构时要注意以下两点：

• 声明不要以花括号开始。

• 解构期间，要么声明变量，要么给变量赋值，但是不能同时进行。

下面详细解释。

10.9.1 声明不要以花括号开始。

因为代码块是以花括号开始的，所以声明不能这样。当在赋值操作中使用对象解构时，很不巧，会出现这种情况：

{ a, b } = someObject; // SyntaxError

解决办法是给整个表达式加上圆括号：

({ a, b } = someObject); // OK

下面的语法并不管用：

({ a, b }) = someObject; // SyntaxError

如果前面带上 let， var 和 const 的话，则可以放心使用花括号：

const { a, b } = someObject; // OK

10.9.2 不要同时进行声明和对已有变量的赋值操作

在解构变量声明中，解构源的每个变量都会被声明。下面的例子里，我们试图声明变量 b，以及引用变量 f，然而并不会成功。

let f;
···
let { foo: f, bar: b } = someObject;
    // 解析阶段（在运行代码之前）：
    // SyntaxError: Duplicate declaration, f

修复的方法是在解构中只进行赋值操作，并且预先声明变量 b：

let f;
···
let b;
({ foo: f, bar: b } = someObject);

10.10 解构的例子

先看几个小例子。

for-of 循环支持解构：

const map = new Map().set(false, 'no').set(true, 'yes');
for (const [key, value] of map) {
  console.log(key + ' is ' + value);
}

你可以用解构来交换值。JavaScript 引擎会优化这个操作，所以不会额外创建数组。

[a, b] = [b, a];

你还可以用解构来切分数组：

const [first, ...rest] = ['a', 'b', 'c'];
    // first = 'a'; rest = ['b', 'c']

10.10.1 解构返回的数组

一些内置的 JavaScript 操作会返回数组。解构能帮忙处理它们：

const [all, year, month, day] =
    /^(\d\d\d\d)-(\d\d)-(\d\d)$/
    .exec('2999-12-31');

假如你只想得到正则里的分组（而不是匹配的整体， all），你可以使用省略，略过下标为 0 的数组元素：

const [, year, month, day] =
    /^(\d\d\d\d)-(\d\d)-(\d\d)$/
    .exec('2999-12-31');

假如正则表达式不能成功匹配，exec() 会返回 null。遗憾的是，由于返回 null无法给变量设置默认值，所以此时需要用或操作符（||）：

const [, year, month, day] =
    /^(\d\d\d\d)-(\d\d)-(\d\d)$/
    .exec(someStr) || [];

Array.prototype.split() 会返回一个数组。因此，假如你只关心元素而不关心数组的话，可以用解构：

const cells = 'Jane\tDoe\tCTO'
const [firstName, lastName, title] = cells.split('\t');
console.log(firstName, lastName, title);

10.10.2 解构返回的对象

解构可用于从函数或者方法返回的对象中提取数据。比如，迭代器方法 next() 返回一个对象，该对象有两个属性， done 和 value。下面的代码通过迭代器 iter 打印出数组 arr 的所有元素。行 A 使用了解构：

const arr = ['a', 'b'];
const iter = arr[Symbol.iterator]();
while (true) {
    const {done,value} = iter.next(); // (A)
    if (done) break;
    console.log(value);
}

10.10.3 数组解构（array-destructuring）可迭代的值

数组解构可以作用于任何可迭代的值。有时候会比较有用：

const [x,y] = new Set().add('a').add('b');
    // x = 'a'; y = 'b'

const [a,b] = 'foo';
    // a = 'f'; b = 'o'

10.10.4 多重返回值

为了证明多重返回值的好处，我们实现一个函数 findElement(a, p)，这个函数用于查找数组 a 中，第一个使得函数 p 返回 true 的元素。问题来了：函数 findElement(a, p) 应该返回什么？有时候我们只需要返回元素本身，有时候只需要其下标，有时候两者都需要。下面的实现返回了两者。

function findElement(array, predicate) {
    for (const [index, element] of array.entries()) { // (A)
        if (predicate(element)) {
            return { element, index }; // (B)
        }
    }
    return { element: undefined, index: -1 };
}

在行 A 中，数组方法 entries() 返回一个可迭代的 [index,element] 对。每次迭代将解构一个[index,element] 对。在行 B 中，我们使用属性值缩写返回了对象 { element: element, index: index }。

接下来使用 findElement()。下面的例子里，有几个 ECMAScript 6 的功能让我们可以写更多的简洁的代码：回调函数是一个箭头函数，返回值是从一个属性值缩写的对象模式中解构出来的。

const arr = [7, 8, 6];
const {element, index} = findElement(arr, x => x % 2 === 0);
    // element = 8, index = 1

由于 index 和 element 都指向属性名，所以可以不分先后顺序：

const {index, element} = findElement(···);

以上例子满足了同时返回下标和元素的需求。假如我们只关心其中一个返回值呢？好在ECMAScript 6 有解构功能，上面的实现也可以满足单个返回值的需求。而且，跟单个返回值的函数相比，这种实现方式的句法开销是最小的。

const a = [7, 8, 6];

const {element} = findElement(a, x => x % 2 === 0);
    // element = 8

const {index} = findElement(a, x => x % 2 === 0);
    // index = 1

我们每次只提取需要的属性值。

10.11 解构的算法

这一节将从另一个角度审视解构：递归模式匹配算法。

这一角度特别有助于理解默认值。假如你觉得自己还没完全理解默认值，请接着看。

在这最后一节里，我会使用算法来解释下面两个函数声明的区别。

function move({x=0, y=0} = {})         { ··· }
function move({x, y} = { x: 0, y: 0 }) { ··· }

10.11.1 算法

一个解构赋值看起来是这样的：

«pattern» = «value»

我们要使用 pattern 从 value 中提取数据。我先描述一下实现这个功能的算法，在函数式编程中该算法叫做 模式匹配（简称：_匹配_）。该算法将一个操作符 ← （“匹配”）指定给解构赋值，这个解构赋值会用一个 pattern 去匹配一个 value ，同时赋值给变量：

«pattern» ← «value»

该算法是通过一些迭代的规则来定义的，这些规则会分别解析 ← 操作符两边的运算元。你可能还不习惯这个声明符号，但是这个符号能让算法的定义更简洁。每个迭代规则由以下两部分构成：

• 头部（head）指明了规则所操作的运算元。

• 主体部分（body）指定了下一步要执行的动作。

这里只展示解构赋值的算法。解构变量声明和解构参数定义的算法跟这个算法很相似。

我也不会介绍更高级的特性（计算属性键；属性值缩写；赋值目标的对象属性和数组元素）。这里只介绍基础知识。

10.11.1.1 模式

一个模式可能是以下三种情况之一：

• 一个变量： x

• 一个对象模式： {«properties»}

• 一个数组模式： [«elements»]

下面的小节里会分别介绍这三种情况。

10.11.1.2 变量

• (1) x ← value （包括 undefined 和 null）

    x = value

10.11.1.3 对象模式

• (2a) {«properties»} ← undefined

   throw new TypeError();

• (2b) {«properties»} ← null

   throw new TypeError();

• (2c) {key: «pattern», «properties»} ← obj

   «pattern» ← obj.key
    {«properties»} ← obj

• (2d) {key: «pattern» = default_value, «properties»} ← obj

   const tmp = obj.key;
    if (tmp !== undefined) {
        «pattern» ← tmp
    } else {
        «pattern» ← default_value
    }
    {«properties»} ← obj

• (2e) {} ← obj

  // 模式中没有属性了，什么也不做

10.11.1.4 数组模式

数组模式和可迭代值 数组解构的算法以数组模式和可迭代值开始：

• (3a) [«elements»] ← non_iterable

  assert(!isIterable(non_iterable))
  
    throw new TypeError();

• (3b) [«elements»] ← iterable

  assert(isIterable(iterable))
  
    const iterator = iterable[Symbol.iterator]();
    «elements» ← iterator

帮助函数：

function isIterable(value) {
    return (value !== null
        && typeof value === 'object'
        && typeof value[Symbol.iterator] === 'function');
}

数组元素和迭代器。 接下来，算法要处理模式里的元素（箭头左侧）以及从可迭代值里得到的迭代器（箭头右侧）。

• (3c) «pattern», «elements» ← iterator

    «pattern» ← getNext(iterator) // 最后一个元素之后就是 undefined
    «elements» ← iterator

• (3d) «pattern» = default_value, «elements» ← iterator

    const tmp = getNext(iterator);  // 最后一个元素之后就是 undefined

    if (tmp !== undefined) {
        «pattern» ← tmp
    } else {
        «pattern» ← default_value
    }
    «elements» ← iterator

• (3e) , «elements» ← iterator （“空洞”, 省略）

getNext(iterator); // 略过
      «elements» ← iterator

• (3f) ...«pattern» ← iterator （一定是数组最后一部分！）

    const tmp = [];
    for (const elem of iterator) {
        tmp.push(elem);
    }
    «pattern» ← tmp

• (3g) ← iterator

   // 没有元素了，什么也不做

帮助函数:

function getNext(iterator) {
    const {done,value} = iterator.next();
    return (done ? undefined : value);
}

10.11.2 解构算法的应用

下面的函数定义里使用了命名的参数（named parameters），这种技术有时候也叫选项对象（options object），在参数处理这一章有详细解释。参数使用了解构和默认值，这样一来，x 和 y 可以省略不传。不仅如此，连参数里的对象都可以省略，比如下面代码的最后一行。这一特性通过第一行函数定义中的 = {} 实现。

function move1({x=0, y=0} = {}) {
    return [x, y];
}
move1({x: 3, y: 8}); // [3, 8]
move1({x: 3}); // [3, 0]
move1({}); // [0, 0]
move1(); // [0, 0]

可为什么非要像上面的代码那样定义参数呢？为什么不是下面这种方式？下面的代码也是完全合法的 ES6 代码呀。

function move2({x, y} = { x: 0, y: 0 }) {
    return [x, y];
}

要解释为什么 move1() 是正确的做法，我们可以通过在两个例子里使用这两种函数进行比较。不过在此之前，先看看匹配过程是如何解释参数传递的。

10.11.2.1 背景：通过匹配传参

对于函数调用，实参（在函数调用里）会去匹配形参（在函数定义里）。举个例子，下面就是函数定义和函数调用。

function func(a=0, b=0) { ··· }
func(1, 2);

参数 a 和 b 会按照类似于下面的解构进行赋值。

[a=0, b=0] ← [1, 2]

10.11.2.2 使用 move2()

看看对于 move2()，解构是如何进行的。

Example 1. move2() 的解构过程如下：

[{x, y} = { x: 0, y: 0 }] ← []

左侧唯一的数组元素在右侧没有找到对应的匹配值，所以 {x,y} 匹配了默认值，而不是匹配右侧的数据（规则 3b， 3d）：

{x, y} ← { x: 0, y: 0 }

左侧包含了 属性值缩写，展开如下：

{x: x, y: y} ← { x: 0, y: 0 }

解构进行了以下两个赋值操作（规则 2c，1）：

x = 0;
y = 0;

不过，只有像 move2() 这样不传参数的函数调用才会用到默认值。

Example 2. 函数调用 move2({z:3}) 的解构过程如下：

[{x, y} = { x: 0, y: 0 }] ← [{z:3}]

右侧数组有下标为 0 的元素。所以，会忽略默认值，下一步是（规则 3d）：

{x, y} ← { z: 3 }

这会把 x 和 y 都设置成 undefined，这可不是我们想要的结果。

10.11.2.3 使用 move1()

试试 move1()。

例 1: move1()

[{x=0, y=0} = {}] ← []

右侧没有下标为0的数组元素，所以使用默认值（规则 3d）：

{x=0, y=0} ← {}

左侧包含了 属性值缩写，展开如下：

{x: x=0, y: y=0} ← {}

x 和 y 在右侧都没有匹配值。因此，会使用默认值，于是会进行下面的解构（规则 2d）：

x ← 0
y ← 0

接下来执行如下的赋值操作（规则 1）：

x = 0
y = 0

例 2: move1({z:3})

[{x=0, y=0} = {}] ← [{z:3}]

数组模式的第一个元素在右侧有匹配值，使用该匹配值进行解构（规则 3d）：

{x=0, y=0} ← {z:3}

跟例 1 相似，右侧不存在属性 x 和 y ，因此使用默认值：

x = 0
y = 0

10.11.3 结论

以上例子展示了默认值属于模式部分（对象属性或者数组元素）的一个特性。假如模式的某一部分没有匹配值或者匹配了 undefined，那么就会使用默认值。换句话说，模式匹配了默认值。

下一章: 11. 参数处理

原链接:https://www.zcfy.cc/article/498