很多時候，程式碼範例會使用最新的 JavaScript 功能。有時，這些功能很難與框架的功能區分開來。這在 React 中經常發生，例如 React 鼓勵一種非常現代化的 JavaScript 方法。

很多時候，程式碼範例會使用最新的 JavaScript 功能。

有時，這些功能很難與框架的功能區分開來。這在 React 中經常發生，例如 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 } //複製一個物件（淺層複製）

更多關於展開運算符

解構賦值

您可以使用以下語法從對象中提取某些屬性：

const person = {
 firstName: 'Tom',
 lastName: 'Cruise',
 actor: true,
 age: 54 //虛構的
}

const { firstName: name, age } = person

現在你有兩個 const 值 name 和 age。

這個語法也可以用於陣列：

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!`