现代JavaScript语法快速参考指南

很多时候,代码示例都在使用最新的JavaScript功能。有时,很难将那些功能与框架功能区分开。例如,React经常发生这种情况,这鼓励了一种非常现代的JavaScript方法。

很多时候,代码示例都在使用最新的JavaScript功能。

有时,很难将那些功能与框架功能区分开。例如,React经常发生这种情况,这鼓励了一种非常“现代”的JavaScript方法。

这篇文章旨在解释所有可能使您绊倒的小事情,尤其是如果您来自ES6之前的JavaScript背景,或者从零开始。

目的是使您至少认识到哪些结构是常规JavaScript,哪些结构是框架的一部分。我不会深入解释这些事情是如何工作的,相反,如果您想了解更多信息,我会给出一些指示。

箭头功能

箭头函数具有以下语法:

const myFunction = () => {
  //...
}

与常规功能略有不同:

const myFunction = function() {
  //...
}

就像常规函数一样,()可以承载参数。有时,当函数中只有一个语句时,括号会被完全删除,这是一个隐式的返回值(不需要return关键字):

const myFunction = i => 3 * i

有关箭头功能的更多信息

点差运算符

如果你看到

const c = [...a]

该语句复制一个数组。

您也可以使用以下命令将项目添加到数组中

const c = [...a, 2, 'test']

...被称为点差算子。您也可以在对象上使用它:

const newObj = { ...oldObj } //shallow clone an object

有关点差运算符的更多信息

销毁工作

您可以提取一些使用以下语法来自对象的属性:

const person = {
  firstName: 'Tom',
  lastName: 'Cruise',
  actor: true,
  age: 54 //made up
}

const { firstName: name, age } = person

您现在将有两个const值nameage

该语法也适用于数组:

const a = [1,2,3,4,5]
[first, second, , , fifth] = a

模板文字

如果看到反引号中包含字符串,则为模板文字:

const str = `test`

在其中,您可以使用以下命令放置变量并执行javascript${...}片段:

const string = `something ${1 + 2 + 3}`
const string2 = `something ${doSomething() ? 'x' : 'y'}`

而且,您可以将字符串跨越多行:

const string3 = `Hey
this

string
is awesome!`

免费下载我的JavaScript初学者手册


更多js教程: