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

日期：2020-05-11 栏目：程序人生浏览：次

这里我还想再强调一下，拓展运算符不仅仅适用于数组和arguments对象，对任意可迭代的对象都可以使用。迭代也是ES6新提出的一个概念，在 Iteration and Flow Control这一章，我们将详细叙述迭代。

Shifting和Spreading

当你想要抽出一个数组的前一个或者两个元素时，常用的解决方案是使用.shift.尽管是函数式的，下述代码在第一次看到的时候却不好理解，我们使用了两次.slice从list中抽离出两个不同的元素。

var list = ['a', 'b', 'c', 'd', 'e']
var first = list.shift()
var second = list.shift()
console.log(first)
// <- 'a'

在ES6中，结合使用拓展和解构，可以让代码的可读性更好：

var [first, second, ...other] = ['a', 'b', 'c', 'd', 'e']
console.log(other)
// <- ['c', 'd', 'e']

除了对数组进行拓展，你同样可以对函数参数使用拓展，下例展示了如何添加任意数量的参数到multiply函数中。

function multiply(left, right) {
 return left * right
}
var result = multiply(...[2, 3])
console.log(result)
// <- 6

向在数组中一样，函数参数中的拓展运算符同样可以结合常规参数一起使用。下例中，print函数结合使用了rest,普通参数，和拓展运算符：

function print(...list) {
 console.log(list)
}
print(1, ...[2, 3], 4, ...[5])
// <- [1, 2, 3, 4, 5]

下表总结了，拓展运算符的常见使用方法：

使用示例 ES5 ES6
Concatenation [1, 2].concat(more) [1, 2, ...more]
Push an array onto list list.push.apply(list, items) list.push(...items)
Destructuring a = list[0], other = list.slice(1) <span class="Apple-tab-span" style="white-space: pre;"> </span>[a, ...other] = list
new and apply new (Date.bind.apply(Date, [null,2015,31,8])) new Date(...[2015,31,8])

模板字符串

模板字符串是对常规JavaScript字符串的重大改进，不同于在普通字符串中使用单引号或者双引号，模板字符串的声明需要使用反撇号，如下所示：

var text = `This is my first template literal`

因为使用的是反撇号，你可以在模板字符串中随意使用单双引号了，使用时不再需要考虑转义，如下：

var text = `I'm "amazed" at these opportunities!`

模板字符串具有很多强大的功能，可在其中插入JavaScript表达式就是其一。

在字符串中插值

通过模板字符串，你可以在模板中插入任何JavaScript表达式了。当解析到表达式时，表达式会被执行，该处将渲染表达式的值，下例中，我们在字符串中插入了变量name：

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

相关推荐