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

var coordinates = [12, -7]
var [x, y] = coordinates
console.log(x)
// <- 12

数组解构也允许你跳过你不想用到的值,在对应地方留白即可:

var names = ['James', 'L.', 'Howlett']
var [ firstName, , lastName ] = names
console.log(lastName)
// <- 'Howlett'

和对象解构一样,数组解构也允许你添加默认值:

var names = ['James', 'L.']
var [ firstName = 'John', , lastName = 'Doe' ] = names
console.log(lastName)
// <- 'Doe'

在ES5中,你需要借助第三个变量,才能完成两个变量值的交换,如下:

var left = 5, right = 7;
var aux = left
left = right
right = aux

使用解构,一切就简单多了:

var left = 5, right = 7;
[left, right] = [right, left]

我们再看看函数解构。

函数默认参数
在ES6中,我们可以给函数的参数添加默认值了,下例中我们就给参数 exponent 分配了一个默认值:

function powerOf(base, exponent = 2) {
 return Math.pow(base, exponent)
}

箭头函数同样支持使用默认值,需要注意的是,就算只有一个参数,如果要给参数添加默认值,参数部分一定要用小括号括起来。

var double = (input = 0) => input * 2

我们可以给任何位置的任何参数添加默认值。

function sumOf(a = 1, b = 2, c = 3) {
 return a + b + c
}

console.log(sumOf(undefined, undefined, 4))
// <- 1 + 2 + 4 = 7

在JS中,给一个函数提供一个包含若干属性的对象字面量做为参数的情况并不常见,不过你依旧可以按下面方法这样做:

var defaultOptions = { brand: 'Volkswagen', make: 1999 }
function carFactory(options = defaultOptions) {
 console.log(options.brand)
 console.log(options.make)
}
carFactory()
// <- 'Volkswagen'
// <- 1999

不过这样做存在一定的问题,当你调用该函数时,如果传入的参数对象只包含一个属性,另一个属性的默认值会自动失效:

carFactory({ make: 2000 })
// <- undefined
// <- 2000

函数参数解构就可以解决这个问题。

函数参数解构

通过函数参数解构,可以解决上面的问题,这里我们为每一个属性都提供了默认值,单独改变其中一个并不会影响其它的值:

function carFactory({ brand = 'Volkswagen', make = 1999 }) {
 console.log(brand)
 console.log(make)
}
carFactory({ make: 2000 })
// <- 'Volkswagen'
// <- 2000
      

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

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