发布于 2026-01-06 3 阅读
0

关于 JavaScript ES6,你需要了解什么?

关于 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 代码示例。

文章来源:https://dev.to/christinamcmahon/what-you-need-to-know-about-es6-pf