关于 JavaScript ES6,你需要了解什么?
JavaScript ES6 拥有一些极其有用的特性,可以使你的代码更现代化、更易读。在本文中,我将介绍 ES6 的一些最基本特性,帮助你用更少的代码实现更多的功能。
常量且令
这里我就不赘述了,因为我已经写过一篇关于 var、let 和 const 用法的博文(链接在此)。简而言之,在 JavaScript 中,你最常用的标识符应该是 const。但是,如果你知道或认为你需要重新赋值(例如在 for 循环、switch 语句或算法切换中),那就使用 let。
模板字面量
模板字面量非常有用,因为它们允许你创建字符串而无需连接值。例如:
const book = {
name: 'The Martian'
}
console.log('You are reading ' + book.name + '., \n and this is a new line…'
console.log我们可以用以下代码改进前面的代码语法:
console.log(`You are reading ${book.name}.,
and this is a new line…`)
请注意,模板字面量用反引号括起来。要插入变量值,只需将变量名放在美元符号和花括号内即可。
正如您在示例中看到的,模板字面量也可以用于多行字符串。无需\n再使用其他方法。只需按键盘上的Enter 键即可将字符串换行。
箭头函数
箭头函数非常适合简化函数语法。例如:
function myFunc(name) {
return 'Hello' + name
}
console.log(myFunc('World'))
使用 ES6,我们可以简化如下操作:
const myFunc = name => {
return `Hello ${name}`
}
或者,如果函数像我们的示例一样只有一条语句,您可以进一步简化它,省略关键字return和花括号,如下所示:
const myFunc = name => `Hello ${name}`
此外,如果函数不接收任何参数,我们可以使用空括号:
const hello = () => console.log('Hello!')
默认参数
使用 ES6,可以为函数定义默认参数值。
function sum(x = 1, y = 2) {
return x + y
}
console.log(sum(3)) // 5
在上面的例子中,由于我们没有传递y参数,它的默认值为 2。所以,3 + 2 === 5。
解构
析构函数允许我们一次性初始化多个变量。
let [x, y] = ['a', 'b']
数组解构还可以用于一次性交换值,而无需创建temp变量,这对于排序算法非常有用。
[x, y] = [y, x]
另一个有用的功能叫做属性简写。
let [x, y] = ['a', 'b']
let obj = {x, y}
console.log(obj) // { x: 'a', y: 'b' }
最后我们要介绍的一个功能叫做简写方法名。它允许我们像声明属性一样在对象内部声明函数。
const hello = {
name: 'World',
printHello() {
console.log('Hello')
}
}
console.log(hello.printoHello())
展开运算符和休息运算符
在 ES5 中,我们可以使用函数将数组转换为参数apply()。ES6 则提供了扩展运算符 (...) 来实现此功能。例如,考虑一个sum计算三个值之和的函数:
let params = [3, 4, 5]
console.log(sum(...params))
扩展运算符也可以用作剩余参数,如下所示:
function restParameter(x, y, ...a) {
return (x + y) * a.length
}
console.log(restParameter(1, 2, 'hello', true, 7)) // 9
课程
ES6 还引入了一种更简洁的类声明方式。请看以下示例:
function Book(title, author) {
this.title = title
this.author = author
}
Book.prototype.printTitle = function() {
console.log(this.title)
}
使用 ES6,我们可以简化语法,如下所示:
class Book {
constructor(title, author) {
This.title = title
this.author = author
}
printAuthor() {
console.log(this.author)
}
}
在 ES6 中,我们可以使用 `<class>` 关键字简化类之间的继承语法extends。如下例所示,我们还可以super在构造函数中使用 `<class>` 关键字来引用父类constructor。
class ITBook extends Book {
constructor(title, author, technology) {
super(title, author)
this.technology = technology
}
}
结论
希望这篇指南能帮助你回顾一些我认为非常有用的 ES6 特性。如果你想深入了解,以下是一些我觉得很有帮助的资源:freeCodeCamp 的 Said 撰写的
ES6 复习指南;Loiane Groner 在教材《学习 JavaScript 数据结构与算法》中撰写的ES6
JavaScript 代码示例。