表达式解构

在ES2015标准之前，ECMAScript中并没有可以直接使用语法来实现多返回值的特性。在实际开发中，我们发现多返回值的需求也是很大的，比如在一些IO操作中，需要返回的除了数据以外，还可能有请求状态等。在ES2015标准发布之前，开发者们经常用对象字面量或数组来模拟多返回值。

// 对象模拟多返回值
function fn1() {
    return {
        value1: 1,
        value2: 2,
        // ...
    }
}
var res1 = fn1()
var value1 = res1.value1
var value2 = res1.value2

// 数组模拟多返回值
function fn2() {
    return [ 1, 2 ]
}
var res2 = fn2()
var value3 = res2[0]
var value4 = res2[1]

除同步函数外，在ECMAScript中，利用回调函数来返回多个返回值也是一种实现方式。比如Node.js的标准库中，所有的异步IO操作都会以一个标准的回调函数来响应IO状态。而这种标准回调函数的参数列表的第一个都会是一个表示错误信息的Error对象，如果IO操作过程中没有任何错误，最后响应时该参数的值为null。而IO操作的结果会以后续参数的形式传入：

fs.readFile(__dirname + '/foobar.txt', function(err, data) {
    if(err) {
        return console.error(err)
    }
    // ...
})

上面这些方法始终无法让工程师满足，模式匹配终于进入了语言标准中，我们可以利用ES2015中的模式匹配特性去实现更多的需求，而不仅仅是多返回值。

使用语法

ES2015同样可以使用类似对象字面量和数组来模拟多返回值，语法上更加简洁：

// 使用对象作为返回载体
function getState() {
    // ...
    return {
        error: null,
        logined: true,
        user: { /* ... */ },
        // ...
    }
}

const { error, logined, user } = getState()
if (error) { /* ... */ }

// 使用数组作为返回载体
const [ foo, bar ] = [ 1, 2 ]
console.log(foo, bar) //=> 1 2

// 跳过数组中的某些元素，可以通过空开一个元素的方式
const [ foo, , bar ] = [ 1, 2, 3 ]
console.log(foo, bar) //=> 1 3

// 除获取指定位置元素外，也可以用...语句不定项地获取后续元素
const [ a, b, ...rest ] = [ 1, 2, 3, 4, 5 ]
console.log(a, b) //=> 1 2
console.log(rest) //=> [ 3, 4, 5 ]

使用场景

Promise与模式匹配

在Promise的标准定义中，Promise是只允许返回一个值的。但很多情况下，我们同样需要向Promise的onFulfilled传递多于一个的返回值，那么我们可以用解构特性来实现这个需求。
　　我们可以使用数组作为载体，好处在于执行Promise.resovle方法时的语法较为简单。需要注意的是，如果再Promise.then方法中传入的是一个带有解构参数的箭头函数时，解构参数外必须要有一个括号包裹，否则会抛出语法错误。

function fetchData() {
    return new Promise((resolve, reject) => {
        // ...
        resolve([ 'foo', 'bar' ])
    })
}

fetchData()
    .then(([ value1, value2 ]) => {
        console.log(value1, value2) //=> foo bar
    })

fetchData()
    .then([ value1, value2 ] => { //=> SyntaxError
        // ...
    })

如果参数过多但在某些场景下并不需要全部参数，或者文档约定不完善的情况下，使用对象作为传递载体更佳。

function fetchData() {
    return new Promise((resolve, reject) => {
        // ...
        resolve({
            code: 200,
            message: 'OK',
            data: [ 'foo', 'bar' /* ... */ ]
        })
    })
}

fetchData()
    .then(({ data }) => console.log(data)) //=> foo bar ...

Swap（变量值交换）

在过去，我们一般用一个临时中间变量来实现Swap：

function swap(a, b) {
    var tmp = a
    a = b
    b = tmp
}

ES2015中，我们可以使用模式匹配来实现Swap：

let foo = 1
let bar = 2

// Before Swap
console.log(foo, bar) //=> 1 2

// Swap
;[ foo, bar ] = [ bar, foo ]

// After Swap
console.log(foo, bar) //=> 2 1

模式匹配高级用法

解构别名

function fetchData() {
    return {
        response: [ 'foo', 'bar' /* ... */ ]
    }
}

// 返回值后面加上:x即可，其中x为希望使用的变量名
const { response: data } = fetchData()
console.log(data) //=> foo bar ...

设定无法匹配时的缺省值

// Object
const { foo, bar } = { foo: 1 }
console.log(foo, bar) //=> undefined

// Array
const [ a, b, c ] = [ 1, 2 ]
console.log(a, b, c)  //=> 1 2 undefined

// ES2015为无法匹配的参数赋予默认值
const { foo = 1 } = { bar: 1 }
console.log(foo) //=> 1

const [ a, b = 2 ] = [ 1 ]
console.log(a, b) //=> 1 2

深层匹配

我们可以通过嵌套解构表达式来获取深层的内容，而且可以在对象中嵌套数组来获取对象中的数组的某元素，反之亦然：

// Object in Object
const { a, b: { c } } = { a: 1, b: { c: 2 } }
console.log(a, c) //=> 1 2

// Array in Object
const { d, e: [ f ] } = { d: 1, e: [ 2, 3 ] }
console.log(d, f) //=> 1 2

// Object in Array
const [ g, { h } ] = [ 1, { h: 2 } ]
console.log(g, h) //=> 1 2

// Array in Array
const [ i, [ j ] ] = [ 1, [ 2, 3 ] ]
console.log(i, j) //=> 1 2

配合其他新特性

ES2015中许多新的特性时相辅相成的，组合使用时，会出现奇妙之处。
比如在ES5中，数组类型被定义了一个新的forEach方法，自带闭包；同时也产生了一个新的问题---forEach无法像for、while等循环语句一样被break等控制语句终止，进而产生了许多不便。
而ES2015加入了for-of循环，配合const、Array.entries()等特性，我们甚至可以写出比ES5时代更好的代码。

const arr = [ 'Mike', 'Peter', 'Ben', 'William', 'John' ]
for (const [ index, item ] of arr.entries()) {
    console.log(index, item)

    if (item.match(/^W/)) break  // Break!
}
//=>
// 0 Mike
// 1 Petter
// 2 Ben
// 3 William