表达式解构

在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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,612评论 5 471
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,345评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,625评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,022评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,974评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,227评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,688评论 3 392
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,358评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,490评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,402评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,446评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,126评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,721评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,802评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,013评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,504评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,080评论 2 341

推荐阅读更多精彩内容