JavaScript ES6中的简写语法总结与使用技巧(5)

给函数以合理的命名,有助于增强程序的可读性。箭头函数并不能直接命名,但是却可以通过赋值给变量的形式实现间接命名,如下代码中,我们把箭头函数赋值给变量 throwError,当函数被调用时,会抛出错误,我们可以追溯到是箭头函数throwError报的错。

var throwError = message => {
 throw new Error(message)
}
throwError('this is a warning')
<- Uncaught Error: this is a warning
 at throwError

如果你想完全控制你的函数中的this,使用箭头函数是简洁高效的,采用函数式编程尤其如此。

[1, 2, 3, 4]
 .map(value => value * 2)
 .filter(value => value > 2)
 .forEach(value => console.log(value))
// <- 4
// <- 6
// <- 8

解构赋值

ES6提供的最灵活和富于表现性的新特性莫过于解构了。一旦你熟悉了,它用起来也很简单,某种程度上解构可以看做是变量赋值的语法糖,可应用于对象,数组甚至函数的参数。

对象解构

为了更好的描述对象解构如何使用,我们先构建下面这样一个对象(漫威迷一定知道这个对象描述的是谁):

// 描述Bruce Wayne的对象
var character = {
 name: 'Bruce',
 pseudonym: 'Batman',
 metadata: {
  age: 34,
  gender: 'male'
 },
 batarang: ['gas pellet', 'bat-mobile control', 'bat-cuffs']
}

假如现有有一个名为 pseudonym 的变量,我们想让其变量值指向character.pseudonym,使用ES5,你往往会按下面这样做:

var pseudonym = character.pseudonym

ES6致力于让我们的代码更简洁,通过ES6我们可以用下面的代码实现一样的功能:

var { pseudonym } = character


如同你可以使用var加逗号在一行中同时声明多个变量,解构的花括号内使用逗号可以做一样的事情。

var { pseudonym, name } = character

我们还可以混用解构和常规的自定义变量,这也是解构语法灵活性的表现之一。

var { pseudonym } = character, two = 2

解构还允许我们使用别名,比如我们想把character.pseudonym赋值给变量 alias,可以按下面的语句这样做,只需要在pseudonym后面加上:即可:

var { pseudonym: alias } = character
console.log(alias)
// <- 'Batman'

解构还有另外一个强大的功能,解构值还可以是对象:

var { metadata: { gender } } = character

当然,对于多层解构,我们同样可以赋予别名,这样我们可以通过非常简洁的方法修改子属性的名称:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/265.html