/

現代 JavaScript 語法的快速參考指南

現代 JavaScript 語法的快速參考指南

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

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

有時，這些功能很難與框架的功能區分開來。這在 React 中經常發生，例如 React 鼓勵一種非常「現代化」的 JavaScript 方法。

本文旨在解釋那些可能讓你困惑的細節，尤其是如果你來自 ES6 之前的 JavaScript 背景，或者如果您從零開始學習的話。

目標是讓您至少能識別出哪些結構是常規的 JavaScript，哪些結構屬於框架的一部分。我不會深入解釋這些東西的工作原理，而是會給一些指標，以供您深入了解。

箭頭函式

箭頭函式的語法如下：

1
2
3
const myFunction = () => {
 //...
}

與常規函式略有不同：

1
2
3
const myFunction = function() {
 //...
}

小括號可以包含參數，就像常規函式一樣。有時，在函式中只有一個語句時，大括號會完全省略，這是一個隱式返回值（不需要 return 關鍵字）：

1
const myFunction = i => 3 \* i

更多關於箭頭函式

展開運算符

如果你看到以下程式碼：

1
const c = [...a]

這個語句複製了一個陣列。

你也可以將項目新增到陣列中，使用以下語法：

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

... 被稱為展開運算符。您也可以在物件上使用它：

1
const newObj = { ...oldObj } //複製一個物件（淺層複製）

更多關於展開運算符

解構賦值

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

1
2
3
4
5
6
7
8
const person = {
 firstName: 'Tom',
 lastName: 'Cruise',
 actor: true,
 age: 54 //虛構的
}

const { firstName: name, age } = person

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

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

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

模板字面量

如果你看到用反引號括起來的字符串，那就是模板字面量：

1
const str = `test`

在其中，您可以放置變量並執行 JavaScript，使用 ${...} 片段：

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

還可以將字符串跨多行：

1
2
3
4
5
const string3 = `Hey
this

string
is awesome!`