JavaScript必會基礎(chǔ)知識
我不會涵蓋 JavaScript 的所有理論和概念，而是只教您該語言最重要的構(gòu)建塊。我們將介紹變量、數(shù)據(jù)類型、函數(shù)、對象、數(shù)組和類等內(nèi)容。您還將學(xué)習(xí)如何將它們?nèi)炕旌掀饋順?gòu)建一個(gè)小而可靠的程序。
我們還將忽略 HTML、CSS 和在瀏覽器中使用 JavaScript。本教程僅關(guān)注 JavaScript 作為一種編程語言，并使用終端來運(yùn)行代碼。
本教程還為每個(gè)部分提供了練習(xí)，讓您有時(shí)間練習(xí)所學(xué)內(nèi)容并將知識“鉆”入您的大腦。
本手冊在此網(wǎng)頁中完全免費(fèi)。如果您想要本教程的 PDF 和 EPUB 版本，您可以支付少量費(fèi)用。它將幫助我創(chuàng)建深入的 JavaScript 教程，幫助您構(gòu)建完整的 Web 應(yīng)用程序。
（更|多優(yōu)質(zhì)內(nèi)|容：java567 點(diǎn) c0m）
目錄
1 - JavaScript 簡介
為什么要學(xué)習(xí) JavaScript
JavaScript 與 Java
2 - 如何設(shè)置您的計(jì)算機(jī)
如何安裝 VSCode
如何安裝 Node.js
3 - 快速控制臺介紹
4 - 是時(shí)候向世界問好了！
5 - JavaScript 代碼結(jié)構(gòu)
聲明
評論
執(zhí)行流程
練習(xí)#1
6 - JavaScript 變量
變量命名
常數(shù)變量
var 關(guān)鍵字
練習(xí)#2
概括
7 - JavaScript 基本數(shù)據(jù)類型
JavaScript 中的字符串
JavaScript 中的數(shù)字（整數(shù)和浮點(diǎn)數(shù)）
JavaScript 中的布爾值
JavaScript 中未定義
JavaScript 中的空值
8 - 類型轉(zhuǎn)換和強(qiáng)制
類型強(qiáng)制
類型強(qiáng)制規(guī)則
為什么應(yīng)該避免類型強(qiáng)制
9 - JavaScript 中的運(yùn)算符
算術(shù)運(yùn)算符
賦值運(yùn)算符
比較運(yùn)算符
邏輯運(yùn)算符
運(yùn)算符的類型
練習(xí)#3
10 - JavaScript 數(shù)組
數(shù)組索引位置
數(shù)組操作的特殊方法
練習(xí)#4
11 - JavaScript 中的控制流（條件）
if...else 語句
switch...case 語句
switch 語句體
Switch 語句用例
練習(xí)#5
12 - JavaScript 中的控制流（循環(huán)）
for 語句
什么時(shí)候使用for循環(huán)？
while 語句
何時(shí)使用 while 循環(huán)？
練習(xí)#6
13 - JavaScript 中的函數(shù)
如何創(chuàng)建自己的函數(shù)
函數(shù)參數(shù)和參數(shù)
默認(rèn)參數(shù)
默認(rèn)參數(shù)和 null
返回語句
變量范圍
其余參數(shù)
箭頭功能
單行和多行箭頭函數(shù)
不帶圓括號的箭頭函數(shù)
箭頭函數(shù)沒有參數(shù)綁定
如何輕松地將普通函數(shù)轉(zhuǎn)換為箭頭函數(shù)
練習(xí)#7
14 - JavaScript 中的對象
如何訪問對象值
如何向?qū)ο筇砑有聦傩?/p>
如何修改對象屬性
如何刪除對象屬性
如何檢查對象中是否存在屬性
練習(xí)#8
最后練習(xí)：構(gòu)建一臺收銀機(jī)
結(jié)論
解決方案
1 - JavaScript 簡介
JavaScript 是由 Brendan Eich 于 1995 年 4 月左右創(chuàng)建的。當(dāng)時(shí)，他正在為一家名為 Netscape 的公司開發(fā)瀏覽器。他被告知，他只有 10 天的時(shí)間來設(shè)計(jì)和編寫可在瀏覽器上運(yùn)行的編程語言的工作原型。
他需要?jiǎng)?chuàng)建一種能夠吸引非專業(yè)程序員的語言，例如 Microsoft Visual Basic。
之所以只給他 10 天的時(shí)間，是因?yàn)?Netscape 需要發(fā)布其瀏覽器，而該瀏覽器當(dāng)時(shí)正在與微軟競爭。
一開始，JavaScript 并不像今天那么強(qiáng)大，因?yàn)樗畛跏菫榫W(wǎng)頁添加交互和動畫而設(shè)計(jì)的。直到 2005 年 jQuery 和 AJAX 發(fā)布后，JavaScript 才開始在每個(gè)網(wǎng)站中使用。
人們根本就沒有一個(gè)簡單的替代方法來替代 jQuery 和 AJAX 來進(jìn)行 DOM 操作和發(fā)送異步請求。此外，活躍的 JavaScript 開發(fā)者社區(qū)不斷向庫中添加新功能。
隨后，谷歌推出了現(xiàn)代 Chrome 瀏覽器，F(xiàn)acebook 開始吸引更多人上網(wǎng)。JavaScript 開始發(fā)展以適應(yīng)這些互聯(lián)網(wǎng)巨頭的野心。
瀏覽器開始開發(fā)可以在 JavaScript 中使用的 API。JS 可以從瀏覽器中檢索 IP 地址和地理位置等信息，從而為互聯(lián)網(wǎng)公司提供更多能力來本地化其網(wǎng)站功能。
然后發(fā)生了另一項(xiàng)創(chuàng)新，使 JavaScript 變得更加強(qiáng)大。
2009 年發(fā)布了名為 Node.js 的服務(wù)器端環(huán)境，允許 JavaScript 像 PHP、Java、Python、Ruby 等一樣在服務(wù)器端運(yùn)行。它還使開發(fā)人員能夠僅使用 JavaScript 開發(fā)全棧 Web 應(yīng)用程序。
如今，JavaScript 是一種可以為 Web、桌面和移動應(yīng)用程序提供支持的語言。
以下是 O'Reilly Media 創(chuàng)始人 Tim O'Reilly 的一句話：
學(xué)習(xí) JavaScript 曾經(jīng)意味著你不是一個(gè)認(rèn)真的開發(fā)人員。如今，不學(xué)習(xí) JavaScript 也意味著同樣的事情。
現(xiàn)在，學(xué)習(xí) JavaScript 對于那些想成為 Web 開發(fā)人員的人來說至關(guān)重要。
為什么要學(xué)習(xí) JavaScript？
您需要學(xué)習(xí)并深入理解 JavaScript 有 4 個(gè)充分的理由：
JavaScript 是唯一可以在瀏覽器中運(yùn)行的語言
它很容易學(xué)習(xí)（但很難掌握）
它是制作 Web 應(yīng)用程序的必備語言
JavaScript 開發(fā)人員有很多職業(yè)機(jī)會
學(xué)習(xí) JavaScript 為您提供了成為前端、后端或移動開發(fā)人員的巨大機(jī)會。
基本上，學(xué)習(xí) JavaScript 是技術(shù)職業(yè)發(fā)展的門戶。
JavaScript 與 Java
最開始，JavaScript 實(shí)際上被命名為 LiveScript。它被重命名為 JavaScript，因?yàn)?Java 是一種非常流行的編程語言。
由于大多數(shù)軟件開發(fā)人員已經(jīng)熟悉 Java，因此 JavaScript 這個(gè)名稱被認(rèn)為有助于將 JavaScript 作為一種出色的編程語言進(jìn)行營銷，并吸引了當(dāng)時(shí)開發(fā)人員的興趣。
需要明確的是，JavaScript 和 Java 是兩種完全不同的編程語言。您無需了解 Java 即可學(xué)習(xí) JavaScript（反之亦然）。:)
2 - 如何設(shè)置您的計(jì)算機(jī)
要使用 JavaScript 編寫程序，您需要安裝 2 個(gè)可用于所有操作系統(tǒng)的免費(fèi)工具。
第一個(gè)要安裝的工具是 Visual Studio Code。
如何安裝 VSCode
Visual Studio Code 或簡稱 VSCode 是一個(gè)為編寫代碼而創(chuàng)建的文本編輯器程序。除了免費(fèi)之外，VSCode 也是開源的，并且可在所有主要操作系統(tǒng)上使用。
您可以在 Windows、macOS 和 Linux 上使用 VSCode，因此如果您的計(jì)算機(jī)上沒有文本編輯器，我建議您在此處安裝 VSCode。
現(xiàn)在您已經(jīng)有了一個(gè)文本編輯器來編寫 JavaScript 代碼，您還需要一個(gè)軟件來運(yùn)行 JavaScript 代碼。接下來讓我們安裝 Node.js。
如何安裝 Node.js
要在瀏覽器外部運(yùn)行 JavaScript，您需要安裝 Node.js，它本質(zhì)上是一個(gè) JavaScript 運(yùn)行器。
只需訪問 Node.js 網(wǎng)站 nodejs.org 并下載適合您計(jì)算機(jī)的最新 LTS 版本。下載完成后，將其安裝到您的系統(tǒng)上。
您需要使用控制臺運(yùn)行 Node.js，因此打開命令行或終端應(yīng)用程序并運(yùn)行以下命令：
?node -v
此命令會將新安裝的 Node.js 的版本輸出到控制臺。
3 - 快速控制臺介紹
控制臺是一個(gè)基于文本的界面，可用于在計(jì)算機(jī)上鍵入和運(yùn)行命令。在 Windows 上，它稱為命令行。在 macOS 和 Linux 上，它稱為終端。
您不會使用控制臺中可用的所有命令。事實(shí)上，您只需要了解 7 個(gè)基本命令即可幫助您運(yùn)行 JavaScript 代碼。
首先，打開計(jì)算機(jī)上的控制臺程序并輸入命令pwd：
?pwd
這是您用來查找終端當(dāng)前所在目錄的命令。pwd是打印工作目錄的縮寫。
要更改工作目錄，您需要運(yùn)行該cd命令。
下面是移動到子目錄的示例：
?cd directory_name/directory_name
要向上移動到父目錄，請..在命令旁邊指定：
?cd ..
要向上移動多個(gè)目錄，請使用../..
要清除控制臺上以前的命令和輸出，請使用以下clear命令：
?clear
要打印當(dāng)前目錄中的文件和目錄列表，請運(yùn)行以下ls命令：
?ls
要?jiǎng)?chuàng)建新文件，請使用以下touch命令，后跟文件名和擴(kuò)展名：
?touch index.js
上面的命令將創(chuàng)建一個(gè)index.js以當(dāng)前工作目錄命名的新 JavaScript 文件。
要?jiǎng)?chuàng)建新目錄，請使用mkdir命令后跟目錄名稱：
?mkdir my_project
要使用 Node.js 運(yùn)行 JavaScript，請指定node后跟文件名，如下所示：
?node index.js
您將在同一控制臺中看到代碼的所有輸出。
您可以使用控制臺做很多事情，但這 7 個(gè)命令就足夠了，因?yàn)槲覀冎恍枰鼇磉\(yùn)行 JavaScript 代碼。
接下來，讓我們運(yùn)行您的第一個(gè) JavaScript 程序！
4 - 是時(shí)候向世界問好了！
是時(shí)候使用 Node 運(yùn)行您的第一個(gè) JavaScript 程序了。
從控制臺中，創(chuàng)建一個(gè)index.js使用touch以下命令命名的新 JavaScript 文件。
?touch index.js
接下來，使用 VSCode 打開該文件并將以下代碼行寫入該文件中：
?console.log("Hello World!");
返回控制臺，使用 Node 運(yùn)行此腳本：
?node index.js
控制臺應(yīng)該執(zhí)行該index.js文件并打印“Hello World!”。
您剛剛使用 Node.js 運(yùn)行了第一個(gè) JavaScript 程序。出色的！
當(dāng)您運(yùn)行該node index.js命令時(shí)，Node.js 程序開始從上到下逐行讀取腳本。
程序node發(fā)現(xiàn)您寫了單詞，console.log后跟括號()，因此它知道您正在指示它打印某些內(nèi)容。然后程序讀取您在括號中輸入的內(nèi)容并將其打印在控制臺上。
在 VSCode 或其他文本編輯器程序中，您應(yīng)該看到代碼的不同部分以不同的顏色突出顯示。這是文本編輯器的一項(xiàng)功能，稱為語法突出顯示，它對于幫助您區(qū)分代碼的不同部分非常有用。
關(guān)鍵字log是一個(gè)函數(shù)，因此它以一種顏色突出顯示，而括號中的單詞則具有另一種顏色。
函數(shù)只是用于執(zhí)行特定任務(wù)的一段代碼。該log()函數(shù)用于“打印”您放在括號內(nèi)的任何內(nèi)容。
另一方面，console關(guān)鍵字是一個(gè)對象，它是一個(gè)獨(dú)立的屬性，可以訪問某些功能。
稍后我們將了解有關(guān)函數(shù)和對象的更多信息。現(xiàn)在，只需記住console.log()關(guān)鍵字用于將內(nèi)容打印到控制臺即可。
接下來，我們就開始學(xué)習(xí)JavaScript代碼結(jié)構(gòu)。
5 - JavaScript 代碼結(jié)構(gòu)
計(jì)算機(jī)程序是寫在文本文件中的一系列代碼段。然后，這些文本文件通過專門為運(yùn)行代碼而設(shè)計(jì)的軟件來運(yùn)行。您之前下載的Node.js軟件是處理JavaScript代碼的工具。
在進(jìn)一步討論之前，讓我們先了解一下代碼的結(jié)構(gòu)。
聲明
語句是計(jì)算機(jī)運(yùn)行的一條指令。把它想象成一個(gè)句子，但是對于計(jì)算機(jī)來說。我們可以使用分號結(jié)束語句，;就像我們可以使用點(diǎn)結(jié)束句子一樣.
您可以在一行中編寫多個(gè)語句，但約定是每行編寫一個(gè)語句：
?// This is hard to read
?console.log("Hello World!"); console.log("I'm learning JavaScript");
?
?// Now it's better
?console.log("Hello World!");
?console.log("I'm learning JavaScript");
每個(gè)語句都是執(zhí)行代碼的軟件需要執(zhí)行的某些操作的表達(dá)式。
評論
在編程中，注釋是我們用來傳達(dá)文件中編寫的代碼上下文的文本。
要在 JavaScript 中編寫注釋，您需要//在注釋前添加兩個(gè)正斜杠，如下所示：
?// This is a comment
?// This is also a comment
?
?// Below print two lines of statements
?console.log("Hello World!");
?console.log("I'm learning JavaScript");
語言處理器會忽略注釋，因此您可以使用注釋來禁用某些代碼，而不必刪除該代碼。
下面的代碼顯示了如何禁用第二個(gè)打印語句：
?console.log("Hello World!");
?// console.log("I'm learning JavaScript");
執(zhí)行流程
Node.js 等語言處理器以自上而下的方法執(zhí)行語句。第一行寫入的語句將在第二行之前執(zhí)行，然后繼續(xù)執(zhí)行到最后一行：
?console.log("Hello World!");
?console.log("I'm learning JavaScript");
?
?// Printing numbers
?console.log(1);
?console.log(2);
?console.log(3);
輸出：
?Hello World!
?I'm learning JavaScript
?1
?2
?3
如果你想在文本之前打印數(shù)字，那么你需要將相應(yīng)的console.log()行移到頂部。
練習(xí)#1
嘗試在控制臺上打印您的姓名、年齡和職業(yè)。
輸出如下所示：
?John Doe
?19
?Student
現(xiàn)在你已經(jīng)了解了 JavaScript 的基本代碼結(jié)構(gòu)，接下來我們繼續(xù)學(xué)習(xí)變量。
6 - JavaScript 變量
在解釋變量是什么之前，我希望您更改在index.js文件中編寫的代碼。
更改該文件中的代碼如下：
?let message = "Hello World!"
?console.log(message)
接下來，使用命令運(yùn)行代碼node index.js。您將看到與編寫“Hello World!”時(shí)相同的輸出。直接在console.log()函數(shù)內(nèi)部發(fā)送消息。怎么會這樣？
這是因?yàn)樯厦娲a中寫的消息是一個(gè)變量。
在編程中，變量只是您賦予值的名稱，以便您稍后可以訪問該值。您可以將變量視為可以標(biāo)記為某個(gè)值的標(biāo)簽，因此您可以使用該標(biāo)簽來引用該值。
要聲明變量，您需要鍵入關(guān)鍵字，let后跟變量名稱。
代碼中的第一行告訴 JavaScript 將message變量與值關(guān)聯(lián)起來Hello World!：
?let message = "Hello World!"
在第二行中，JavaScript 被指示打印 的值message，而這正是它所做的。
您可以通過重新分配另一個(gè)值來更改變量的值，如下所示：
?message = "Hello World!"
?print(message)
?message = "Nice weather!"
?print(message)
運(yùn)行該文件，您將看到打印的兩行輸出：
?Hello World!
?Nice weather!
變量用于引用數(shù)據(jù)，以便您可以在程序中多次使用相同的數(shù)據(jù)。
接下來，讓我們看看 JavaScript 中變量命名的一些規(guī)則。
變量命名
JavaScript 有一些命名規(guī)則，您需要了解這些規(guī)則以避免命名錯(cuò)誤。
變量名只能包含字母、數(shù)字和下劃線( _)。這意味著您可以將變量命名為message, message_1, message_2。
變量名稱的第一個(gè)字符不能是數(shù)字。message_1沒關(guān)系。1_message不是。
您不能使用保留關(guān)鍵字，因?yàn)閏onsoleJavaScript 使用它們來執(zhí)行某些操作。JavaScript 使用了許多其他關(guān)鍵字，您將在以下部分中了解這些關(guān)鍵字，例如if、for和while。
變量名稱區(qū)分大小寫，這意味著Message、MESSAGE、 和message可用于創(chuàng)建三個(gè)不同的變量。但當(dāng)然，我不建議使用相似的名稱，因?yàn)檫@會引起混亂。
有時(shí)，您需要多個(gè)單詞來聲明變量名。JavaScript 有兩種全球通用的命名約定：
camelCase
snake_case
駝峰式命名約定是使用大寫字母作為后續(xù)單詞的第一個(gè)字符。這是一個(gè)例子：
?let myAwesomeVariable
蛇形命名約定使用下劃線來分隔單詞。這是一個(gè)例子：
?let my_awesome_variable
兩者都是可接受的命名約定，但您應(yīng)該在代碼中堅(jiān)持其中一種以避免混淆。
常數(shù)變量
有時(shí)您需要在變量中存儲永遠(yuǎn)不會改變的值。
常量變量是在程序運(yùn)行期間其值不會改變的變量。在其他編程語言中，更改常量的值會產(chǎn)生錯(cuò)誤。
在 JavaScript 中，常量變量是使用const關(guān)鍵字聲明的。
下面展示了如何在 JavaScript 中聲明 2 個(gè)常量：
?const FILE_SIZE_LIMIT = 2000
?const MAX_SPEED = 300
常量的命名約定是全部使用大寫字母，但也可以使用小寫字母。大寫只是一個(gè)標(biāo)準(zhǔn)，讓常量更加突出。
var 關(guān)鍵字
該var關(guān)鍵字用于聲明具有全局作用域的變量。在 JavaScript 于 2015 年發(fā)布 newlet和const關(guān)鍵字之前，該關(guān)鍵字是唯一可以用來聲明變量的關(guān)鍵字。
從今天開始，您應(yīng)該var盡可能避免使用，因?yàn)関ar可能會引入錯(cuò)誤，而您可以通過使用該let關(guān)鍵字來避免。
為了向您展示我的意思，請考慮以下示例：
?if(true) {
? ? ?var name = "Nathan";
?}
?
?console.log(name)
上面的代碼可以name很好地打印變量，但實(shí)際上不應(yīng)該，因?yàn)樽兞縩ame是在if塊內(nèi)聲明的。
這是因?yàn)槭褂胿ar關(guān)鍵字聲明的任何變量都可以從任何地方訪問。該變量的范圍是全局的。
另一方面，let關(guān)鍵字具有塊作用域，這意味著該變量只能從該塊及其所有子塊訪問。
但為什么要費(fèi)心確定變量的范圍呢？這是因?yàn)椋?dāng)您有數(shù)百或數(shù)千行代碼時(shí)，跟蹤由于全局變量而發(fā)生的錯(cuò)誤可能會變得令人沮喪。
軟件開發(fā)中有一個(gè)原則稱為“最少暴露原則”，這意味著您不會暴露程序中不必要的任何部分。
對變量進(jìn)行塊作用域可確保變量僅在需要該變量的代碼庫部分中公開和訪問。
使用關(guān)鍵字聲明的變量let與使用關(guān)鍵字聲明的變量相同，var但范圍級別除外。
?if(true) {
? ? ?let name = "Nathan";
?}
?
?console.log(name) ?// Error: name is not defined
這也意味著您現(xiàn)在可以使用var、let和const關(guān)鍵字來聲明變量。使用哪一個(gè)？
一般來說，你可以用constfirst聲明一個(gè)變量。當(dāng)您編寫應(yīng)用程序并意識到需要更改變量分配時(shí)，可以將聲明更改為let.
如果你從一開始就知道變量的值會改變，那么你可以let立即使用。只是今天不要使用var，否則人們可能會生你的氣。
練習(xí)#2
編寫一個(gè)包含三個(gè)變量的程序，每個(gè)變量具有以下值：
第一個(gè)變量包含您的名字
第二個(gè)變量包含您的年齡
第三個(gè)變量包含您的職業(yè)
然后使用該方法打印變量console.log()。這是示例輸出：
?John Doe
?Student
?19
概括
如何使用變量來編寫一個(gè)程序來完成您想要它做的事情是作為程序員可以擁有的最重要的技能之一。
但在詳細(xì)了解如何使用變量之前，讓我們先了解一下 JavaScript 中的數(shù)據(jù)類型。
7 - JavaScript 基本數(shù)據(jù)類型
數(shù)據(jù)類型只是編程語言已知的不同數(shù)據(jù)類型的定義。
數(shù)據(jù)類型包含有關(guān)可以使用該數(shù)據(jù)執(zhí)行哪些操作和不能執(zhí)行哪些操作的規(guī)范。
向您展示一個(gè)對大腦友好的例子，我相信您同意這一點(diǎn)2 + 2 = 4？
嗯，JavaScript 也同意這一點(diǎn)：
console.log(2 + 2);
// Output: 4
但是，如果您嘗試添加帶有字母的數(shù)字（如下所示）怎么辦？
console.log(2 + "ABC");
輸出：
2ABC
將數(shù)字和字母添加在一起將導(dǎo)致 JavaScript 將這些值連接或連接在一起。
在本節(jié)中，您將學(xué)習(xí) JavaScript 知道的基本數(shù)據(jù)類型：
弦樂
數(shù)字
布爾值
無效的
不明確的
您還將看到這些不同類型如何對運(yùn)算符做出反應(yīng)，+如上例所示。
首先，我們從字符串開始。
JavaScript 中的字符串
字符串只是定義為一系列字符的數(shù)據(jù)。
console.log()您之前在調(diào)用函數(shù)打印消息時(shí)已經(jīng)看到過字符串?dāng)?shù)據(jù)的示例：
let message = "Hello, Sunshine!";
console.log(message); // Hello, Sunshine!
字符串需要用引號引起來。您可以使用雙引號或單引號，但它們必須匹配。
當(dāng)您使用不同的引號時(shí)，會出現(xiàn)錯(cuò)誤，如下所示：
// Invalid or unexpected token
let message = "Hello';
您可以使用加號將兩個(gè)或多個(gè)字符串連接為一個(gè)+。不要忘記在下一個(gè)字符串之前添加空格，否則您將得到一個(gè)沒有空格的字符串！
let message = "Hello " + "and " + "Goodbye!";
console.log(message);
// Output: Hello and Goodbye!
打印變量值時(shí)，還可以console.log()直接在函數(shù)中添加字符串，如下所示：
let message = "Hello, Dave!";
console.log("The message is: " + message);
// Output: The message is: Hello, Dave!
當(dāng)您在一個(gè)句子中有多個(gè)字符串到 console.log 時(shí)，這一點(diǎn)特別有用，如下所示：
let name = "John";
let topic = "JavaScript";
console.log(name + " is learning " + topic + " today");
// Output: John is learning JavaScript today
或者您也可以使用模板字符串格式，它允許您直接在字符串中嵌入變量，如下所示：
?let name = "John";
?let topic = "JavaScript";
?
?console.log(`${name} is learning ${topic} today`);
?
?// Output: John is learning JavaScript today
要使用模板字符串格式，您需要使用反引號()`字符而不是引號來包裹字符串。
使用美元符號和大括號將變量嵌入到字符串中，如 中所示${variable}。
這樣，JavaScript 就知道您正在引用字符串內(nèi)的變量。
當(dāng)您要在一行中打印多個(gè)字符串時(shí)，模板字符串格式會更方便，因?yàn)槟槐厥褂靡柡瓦B接來斷開字符串。
接下來，字符串也可以表示數(shù)字。您可以將數(shù)字括在引號中，如下所示：
?let score = "10" + "30";
?console.log(score);
?
?// Output: 1030
當(dāng)您用符號連接兩個(gè)字符串?dāng)?shù)字時(shí)+，JavaScript 將連接這兩個(gè)數(shù)字而不是執(zhí)行算術(shù)加法。
這就是字符串在 JavaScript 中的工作原理。接下來我們看一下數(shù)字。
JavaScript 中的數(shù)字（整數(shù)和浮點(diǎn)數(shù)）
數(shù)字?jǐn)?shù)據(jù)類型代表不同類型的數(shù)字。JavaScript 中有兩種類型的數(shù)字：
整數(shù)
花車
整數(shù)是沒有小數(shù)和分?jǐn)?shù)的整數(shù)。下面，您將看到兩個(gè)整數(shù)x和的示例y：
?let x = 1;
?let y = 2;
?
?console.log(x + y);
?
?// Output: 3
另一方面，浮點(diǎn)數(shù)是指帶有小數(shù)點(diǎn)的數(shù)字，如下所示：
?let f = 1.2;
?let z = 2.35;
?
?console.log(f + z);
?
?// Output: 3.55
要?jiǎng)?chuàng)建浮點(diǎn)數(shù)，您需要編寫一個(gè)數(shù)字并用于.定義小數(shù)值。
使用數(shù)字類型，您可以執(zhí)行算術(shù)運(yùn)算，例如加法+、減法-、除法/和乘法，*就像使用計(jì)算器一樣。
JavaScript 中的布爾值
trueBoolean 是一種表示和值的類型false。
您可以將布爾值視為只能處于兩個(gè)位置之一的電燈開關(guān)：開或關(guān)。
編程語言中的布爾值也是如此。當(dāng) JavaScript 需要做出決定時(shí)使用它們：向左還是向右？對還是錯(cuò)？
以下是在 JavaScript 中創(chuàng)建布爾值的方法：
let on = true;
let off = false;
當(dāng)您需要使用控制流做出決策時(shí)，經(jīng)常使用此數(shù)據(jù)類型。您將在第 9 節(jié)中看到為什么布爾值在開發(fā)程序時(shí)非常有用。
JavaScript 中未定義
未定義是 JavaScript 中的一種數(shù)據(jù)類型，用于表示尚未分配任何值的變量。
每當(dāng)您聲明變量而不分配任何值時(shí)，該undefined值都會分配給該變量。例如：
let first_name;
console.log(first_name); // undefined
您還可以undefined顯式分配給變量，如下所示：
let last_name = undefined;
但通常不建議這樣做，因?yàn)?JavaScript 有另一個(gè)值叫做null，用于將變量標(biāo)記為空。
JavaScript 中的空值
該null值是一種特殊的數(shù)據(jù)類型，表示空值或未知值。以下是將變量指定為 null 的方法：
let first_name = null;
上面的代碼意味著 的值為first_name空或未知。
此時(shí)，您可能會想undefined和 之間有什么區(qū)別null？他們似乎有類似的目的。
你是對的。和undefined都是null不代表任何內(nèi)容的值，而其他編程語言通常只有一個(gè)，那就是null。
在 JavaScript 中，undefined當(dāng)聲明變量時(shí)，該值被保留為默認(rèn)值，而null意味著您故意為該變量分配一個(gè)“空”值。
當(dāng)您稍后了解第 11 節(jié)中的函數(shù)時(shí)，這種細(xì)微的差異將會發(fā)揮作用。
現(xiàn)在，請記住 JavaScript 將其視為undefined“默認(rèn)”空值和null“有意”空值。
8 - 類型轉(zhuǎn)換和強(qiáng)制
有時(shí)，您可能希望將一種數(shù)據(jù)類型轉(zhuǎn)換為另一種數(shù)據(jù)類型，以便程序按預(yù)期運(yùn)行。
例如，假設(shè)您需要將字符串轉(zhuǎn)換為整數(shù)，以便可以在數(shù)字之間執(zhí)行加法。
如果您將其中一個(gè)數(shù)字作為字符串，JavaScript 會將它們連接在一起而不是相加：
let x = "7";
let y = 5;
console.log(x + y); // 75
要正確添加兩個(gè)數(shù)字，您需要將x變量轉(zhuǎn)換為整數(shù)。
將數(shù)據(jù)從一種類型更改為另一種類型也稱為類型轉(zhuǎn)換或類型轉(zhuǎn)換。有 3 個(gè)函數(shù)經(jīng)常用于進(jìn)行類型轉(zhuǎn)換：
Number()
String()
Boolean()
顧名思義，這些類型轉(zhuǎn)換函數(shù)將嘗試將您在括號內(nèi)指定的任何值轉(zhuǎn)換為同名類型。
要將字符串轉(zhuǎn)換為整數(shù)，可以使用以下int()函數(shù)：
let x = "7";
let y = 5;
// Convert x to integer
x = Number(x);
console.log(x + y); // 12
另一方面，該String()函數(shù)將另一種類型的值轉(zhuǎn)換為字符串。如果你輸入String(true)，那么你會得到“true”。
傳遞與函數(shù)相同類型的值沒有任何效果。它只會返回相同的值。
類型強(qiáng)制
在 JavaScript 中，類型強(qiáng)制是一種將一種類型的值隱式轉(zhuǎn)換為另一種類型的過程。
這是由 JavaScript 自動完成的，因此您的代碼不會導(dǎo)致錯(cuò)誤。但正如您將在本節(jié)中看到的，類型強(qiáng)制實(shí)際上可能會導(dǎo)致程序出現(xiàn)不良行為。
讓我們考慮一下在 JavaScript 中執(zhí)行 anumber和 a之間的加法時(shí)會發(fā)生什么：string
console.log(1 + "1");
正如您在上一節(jié)中所見，JavaScript 會將數(shù)字視為字符串并將兩個(gè)字母連接為 as 而11不是將它們相加 ( 1 + 1 = 2)
但您需要知道其他編程語言不會以相同的方式響應(yīng)。
Ruby 或 Python 等編程語言將通過停止程序并給出錯(cuò)誤作為反饋來做出響應(yīng)。它將響應(yīng)類似“無法在數(shù)字和字符串之間執(zhí)行加法”的內(nèi)容。
但 JavaScript 會看到這一點(diǎn)并說：“我無法按原樣執(zhí)行您請求的操作，但如果將數(shù)字1轉(zhuǎn)換為 a我可以執(zhí)行此操作string，所以我會這樣做?！?/p>
這正是類型強(qiáng)制。JavaScript 注意到它不知道如何執(zhí)行您的代碼，但它不會停止程序并返回錯(cuò)誤。
相反，它會在不通知您的情況下更改其中一個(gè)值的數(shù)據(jù)類型。
雖然類型強(qiáng)制不會導(dǎo)致任何錯(cuò)誤，但輸出實(shí)際上也是您不想要的。
類型強(qiáng)制規(guī)則
類型強(qiáng)制規(guī)則從來沒有在任何地方明確說明過，但我自己通過嘗試各種愚蠢的代碼確實(shí)找到了一些規(guī)則。
看來JavaScriptstring在發(fā)現(xiàn)不同的數(shù)據(jù)類型時(shí)會首先將數(shù)據(jù)類型轉(zhuǎn)換為：
1 + "1" // "11"
[1 ,2] + "1" // "1,21"
true + "1" // "true1"
但是當(dāng)你有一個(gè)對象時(shí)，值的順序很重要。首先寫入對象總是返回 numeric 1：
{ a: 1 } + "1" // 1
"1" + { a: 1 } // "1[object Object]"
true + { a: 1 } // "true[object Object]"
{ a: 1 } + 1 // 1
JavaScript 可以在布爾類型和數(shù)值類型之間進(jìn)行計(jì)算，因?yàn)椴紶栔祎rue和隱式具有和false的數(shù)值：1``0
true + 1 // 1+1 = 1
false + 1 // 0+1 = 1
[1,2] + 1 // "1,21"
類型強(qiáng)制總是隱式執(zhí)行的。當(dāng)您將值分配為變量時(shí)，變量類型在操作之外永遠(yuǎn)不會改變：
let myNumber = 1;
console.log(myNumber + "1"); // prints 11
console.log(myNumber); // still prints number 1 and not string
您可以嘗試自己找到更多內(nèi)容，但希望您現(xiàn)在已經(jīng)了解強(qiáng)制轉(zhuǎn)換是什么類型以及它是如何工作的。
為什么應(yīng)該避免類型強(qiáng)制
在談?wù)擃愋蛷?qiáng)制時(shí)，JavaScript 開發(fā)人員通常分為兩個(gè)陣營：
那些認(rèn)為這是一個(gè)功能的人
那些認(rèn)為這是一個(gè)錯(cuò)誤的人
如果您問我，我建議您始終避免在代碼中使用類型強(qiáng)制。
原因是我從未發(fā)現(xiàn)解決方案需要類型強(qiáng)制的問題，并且當(dāng)我需要將一種類型轉(zhuǎn)換為另一種類型時(shí)，最好明確地這樣做：
let price = "50";
let tax = 5;
let totalPrice = Number(price) + Number(tax);
console.log(totalPrice);
使用顯式類型轉(zhuǎn)換函數(shù)（例如Number()和 ）String()將使您的代碼清晰透明。您無需猜測程序中所需的正確數(shù)據(jù)類型。
類型強(qiáng)制是 JavaScript 中可能會讓初學(xué)者感到困惑的獨(dú)特功能之一，因此最好盡早弄清楚。
接下來，我們將學(xué)習(xí) JavaScript 運(yùn)算符。
9 - JavaScript 中的運(yùn)算符
顧名思義，運(yùn)算符是可用于對數(shù)據(jù)執(zhí)行操作的符號。
您已經(jīng)看到了一些使用加號+運(yùn)算符連接多個(gè)字符串并將兩個(gè)數(shù)字相加的示例。當(dāng)然，正如您將在本節(jié)中發(fā)現(xiàn)的那樣，JavaScript 有多個(gè)運(yùn)算符。
由于您之前已經(jīng)了解了數(shù)據(jù)類型和轉(zhuǎn)換，因此學(xué)習(xí)運(yùn)算符應(yīng)該相對容易。
算術(shù)運(yùn)算符
算術(shù)運(yùn)算符用于執(zhí)行加法和減法等數(shù)學(xué)運(yùn)算。
這些運(yùn)算符經(jīng)常與數(shù)字?jǐn)?shù)據(jù)類型一起使用。這是一個(gè)例子：
console.log(10 - 3); // 7
console.log(2 + 4); // 6
JavaScript 中總共有 8 個(gè)算術(shù)運(yùn)算符：
姓名操作示例意義添加x + y返回兩個(gè)操作數(shù)之間的和減法x - y返回兩個(gè)操作數(shù)之間的差乘法x * y返回兩個(gè)操作數(shù)之間的乘法求冪x ** y返回左操作數(shù)的右操作數(shù)次方的值分配x / y返回左操作數(shù)除以右操作數(shù)的值余x % y返回左操作數(shù)除以右操作數(shù)后的余數(shù)增量x++返回操作數(shù)加一遞減x--返回操作數(shù)減一
這些運(yùn)算符非常簡單，因此您可以自己嘗試。
正如您在上一節(jié)中所看到的，該+運(yùn)算符還可以用于字符串?dāng)?shù)據(jù)以將多個(gè)字符串合并為一個(gè)：
?let message = "Hello " + "human!";
?console.log(message); // Hello human!
當(dāng)您添加數(shù)字和字符串時(shí)，JavaScript 將執(zhí)行類型強(qiáng)制并將數(shù)字值視為字符串值：
?let sum = "Hi " + 89;
?console.log(sum); // Hi 89
對字符串使用任何其他算術(shù)運(yùn)算符都會導(dǎo)致 JavaScript 返回一個(gè)NaN值。
賦值運(yùn)算符
下一個(gè)要學(xué)習(xí)的運(yùn)算符是賦值運(yùn)算符，它由等號表示=。
在 JavaScript 中，賦值運(yùn)算符用于將數(shù)據(jù)或值分配給變量。
您之前已經(jīng)看過一些使用賦值運(yùn)算符的示例，所以這里有一個(gè)提醒：
?// Assign the string value 'Hello' to the 'message' variable
?let message = "Hello";
?
?// Assign the Boolean value true to the 'on' variable
?let on = true;
您可能已經(jīng)注意到，等號在編程中的含義與在數(shù)學(xué)中的含義略有不同，您是對的！
在編程中，賦值運(yùn)算符不用于比較一個(gè)數(shù)字是否等于另一個(gè)數(shù)字。
如果你想進(jìn)行這種比較，那么你需要使用等于==運(yùn)算符。
賦值運(yùn)算符還可以與算術(shù)運(yùn)算符組合使用，以便您可以從左側(cè)操作數(shù)中添加或減去值。
賦值運(yùn)算符的類型見下表：
姓名操作示例意義任務(wù)x = yx = y加法作業(yè)x += yx = x + y減法作業(yè)x -= yx = x - y乘法作業(yè)x *= yx = x * y分區(qū)分配x /= yx = x / y余數(shù)分配x %= yx = x % y
接下來，我們來看看比較運(yùn)算符。
比較運(yùn)算符
比較運(yùn)算符用于比較兩個(gè)值。此類別中的運(yùn)算符將返回布爾值：true或false。
下表顯示了 JavaScript 中可用的所有比較運(yùn)算符：
姓名操作示例意義平等的x == ytrue如果操作數(shù)相等則返回不等于x != ytrue如果操作數(shù)不相等則返回嚴(yán)格等于x === y返回true操作數(shù)是否相等且類型相同嚴(yán)格不等于x !== ytrue如果操作數(shù)不相等或具有不同類型則返回比...更棒x > ytrue如果左操作數(shù)大于右操作數(shù)則返回大于或等于x >= ytrue如果左操作數(shù)大于或等于右操作數(shù)則返回少于x < ytrue如果左操作數(shù)小于右操作數(shù)則返回小于或等于x <= ytrue如果左操作數(shù)小于或等于右操作數(shù)則返回
以下是使用這些運(yùn)算符的一些示例：
?console.log(9 == 9); // true
?
?console.log(9 != 20); // true
?
?console.log(2 > 10); // false
?
?console.log(2 < 10); // true
?
?console.log(5 >= 10); // false
?
?console.log(10 <= 10); // true
比較運(yùn)算符也可用于比較字符串，如下所示：
console.log("ABC" == "ABC"); // true
console.log("ABC" == "abc"); // false
console.log("Z" == "A"); // false
字符串比較區(qū)分大小寫，如上面的示例所示。
JavaScript 每個(gè)比較運(yùn)算符也有兩個(gè)版本：寬松的和嚴(yán)格的。
在嚴(yán)格模式下，JavaScript 將比較類型而不執(zhí)行類型強(qiáng)制。
您需要=在運(yùn)算符中再添加一個(gè)等號，如下所示
console.log("9" == 9); // true
console.log("9" === 9); // false
console.log(true == 1); // true
console.log(true === 1); // false
您應(yīng)該使用嚴(yán)格的比較運(yùn)算符，除非您有特定的理由不這樣做。
邏輯運(yùn)算符
邏輯運(yùn)算符用于檢查一個(gè)或多個(gè)表達(dá)式的結(jié)果是否為True或False。
JavaScript 具有三個(gè)邏輯運(yùn)算符：
姓名操作示例意義邏輯與x && ytrue如果所有操作數(shù)均為 則返回true，否則返回false邏輯或x || ytrue如果操作數(shù)之一為 則返回true，否則返回false邏輯非!x反轉(zhuǎn)結(jié)果：返回trueif false，反之亦然
這些運(yùn)算符只能返回布爾值。例如，您可以確定“7是否大于2”和“5是否大于4”：
console.log(7 > 2 && 5 > 4); // true
這些邏輯運(yùn)算符遵循數(shù)理邏輯定律：
&&AND 運(yùn)算符 - 如果有任何表達(dá)式返回false，則結(jié)果為false
||OR 運(yùn)算符 - 如果有任何表達(dá)式返回true，則結(jié)果為true
!NOT 運(yùn)算符 - 對表達(dá)式求反，返回相反值。
我們來做點(diǎn)運(yùn)動吧。嘗試在您的計(jì)算機(jī)上運(yùn)行這些語句。你能猜出結(jié)果嗎？
console.log(true && false);
console.log(false || false);
console.log(!true);
當(dāng)您需要斷言代碼中滿足特定要求時(shí)，這些邏輯運(yùn)算符將派上用場。
typeof操作員
JavaScript 允許您使用運(yùn)算符檢查數(shù)據(jù)類型typeof。要使用該運(yùn)算符，您需要在指定數(shù)據(jù)之前調(diào)用它：
?let x = 5;
?console.log(typeof x) // ?'number'
?
?console.log(typeof "Nathan") // 'string'
?
?console.log(typeof true) // 'boolean'
該typeof運(yùn)算符以字符串形式返回?cái)?shù)據(jù)類型。“數(shù)字”類型代表整數(shù)和浮點(diǎn)類型，字符串和布爾值代表它們各自的類型。
練習(xí)#3
猜猜這些運(yùn)算符的實(shí)際結(jié)果：
?console.log(19 % 3);
?console.log(10 == 3);
?console.log(10 !== "10");
?console.log(2 < "10");
?console.log("5" > 2);
?console.log((false && true) || false);
10 - JavaScript 數(shù)組
數(shù)組是一種對象數(shù)據(jù)類型，可用于保存多個(gè)值。數(shù)組可以是字符串、數(shù)字、布爾值、對象或它們的組合的列表。
要?jiǎng)?chuàng)建數(shù)組，您需要使用方括號[]并使用逗號分隔各個(gè)項(xiàng)目。
創(chuàng)建字符串列表的方法如下：
?let birds = ['Owl', 'Eagle', 'Parrot', 'Falcon'];
您可以將數(shù)組視為項(xiàng)目列表，每個(gè)項(xiàng)目都存儲在一個(gè)儲物柜隔間中：
您還可以聲明一個(gè)沒有任何值的空數(shù)組：
?let birds = [];
數(shù)組還可以包含如下值的混合：
let mixedArray = ['Bird', true, 10, 5.17]
上面的數(shù)組包含一個(gè)字符串、一個(gè)布爾值、一個(gè)整數(shù)和一個(gè)浮點(diǎn)數(shù)。
數(shù)組索引位置
JavaScript 會記住數(shù)組中元素的位置。元素的位置也稱為索引號。
回到儲物柜的例子，您可以將索引號視為儲物柜號。索引號從0以下開始：
[x]要訪問或更改數(shù)組的值，您需要在數(shù)組名稱旁邊添加方括號符號，其中x是該元素的索引號。這是一個(gè)例子：
// Access the first element in the array
myArray[0];
// Access the second element in the array
myArray[1];
假設(shè)您想從數(shù)組中打印字符串“Owl” birds。以下是您可以如何做到這一點(diǎn)。
let birds = ['Owl', 'Eagle', 'Parrot', 'Falcon'];
console.log(birds[0]); // Owl
console.log(birds[1]); // Eagle
就這樣吧。您需要鍵入數(shù)組的名稱，然后鍵入用方括號括起來的索引號。
您還可以使用賦值運(yùn)算符將新值分配給特定索引。
讓我們將“Parrot”替換為“Vulture”：
let birds = ['Owl', 'Eagle', 'Parrot', 'Falcon'];
birds[2] = 'Vulture';
console.log(birds);
// ['Owl', 'Eagle', 'Vulture', 'Falcon']
由于數(shù)組索引從零開始，因此值“Parrot”存儲在索引 2 而不是 3 處。
數(shù)組操作的特殊方法
由于數(shù)組是一個(gè)對象，因此您可以調(diào)用 JavaScript 提供的方法來操作數(shù)組值。
例如，您可以使用該push()方法將一個(gè)項(xiàng)目添加到數(shù)組的末尾：
let birds = ['Owl', 'Eagle'];
birds.push('Sparrow');
console.log(birds);
// ['Owl', 'Eagle', 'Sparrow']
調(diào)用的另一個(gè)方法pop()可用于從數(shù)組末尾刪除項(xiàng)目：
let birds = ['Owl', 'Eagle', 'Sparrow'];
birds.pop();
console.log(birds);
// ['Owl', 'Eagle']
該unshift()方法可用于從索引 0 處的前面添加一個(gè)項(xiàng)目：
let fishes = ['Salmon', 'Goldfish', 'Tuna'];
fishes.unshift('Sardine');
console.log(fishes);
// ['Sardine', 'Salmon', 'Goldfish', 'Tuna']
另一方面，該shift()方法可用于從索引 0 中刪除項(xiàng)目：
let fishes = ['Salmon', 'Goldfish', 'Tuna'];
fishes.shift();
console.log(fishes);
// ['Goldfish', 'Tuna']
該indexOf()方法可用于查找并返回?cái)?shù)組中項(xiàng)目的索引。
-1當(dāng)在數(shù)組中找不到該項(xiàng)目時(shí)，該方法將返回：
let fishes = ['Salmon', 'Goldfish', 'Tuna'];
let pos = fishes.indexOf('Tuna');
console.log(pos); // 2
要獲取數(shù)組的大小，您可以訪問該length屬性：
let fishes = ['Salmon', 'Goldfish', 'Tuna'];
console.log(fishes.length); // 3
請注意，我們不會在length上面的關(guān)鍵字旁邊添加括號。這是因?yàn)閘ength是數(shù)組對象的屬性而不是方法。
我們將在接下來的教程中了解有關(guān)對象的更多信息。
練習(xí)#4
創(chuàng)建一個(gè)名為colors包含“紅色”、“綠色”和“藍(lán)色”顏色的數(shù)組。
首先，在數(shù)組的最后一個(gè)索引后添加“黑色”顏色。然后打印數(shù)組。
接下來，刪除值“紅色”并交換“綠色”和“藍(lán)色”的位置。打印數(shù)組。
最后，在數(shù)組的第一個(gè)索引上添加顏色“黃色”，然后打印數(shù)組。
結(jié)果輸出如下：
[ 'red', 'green', 'blue', 'black' ]
[ 'blue', 'green', 'black' ]
[ 'yellow', 'blue', 'green', 'black' ]
您需要使用本節(jié)中介紹的方法修改原始數(shù)組。
11 - JavaScript 中的控制流（條件）
到目前為止，您編寫的 JavaScript 代碼都是從上到下逐行執(zhí)行的。但是，如果您只想在滿足特定條件時(shí)運(yùn)行某些代碼行怎么辦？
計(jì)算機(jī)程序通常需要考慮程序執(zhí)行期間可能出現(xiàn)的許多不同條件。
這類似于人類在生活中做出決定的方式。例如，您有錢去日本度假嗎？如果是的話，就去吧。如果沒有，那就多存點(diǎn)錢吧！
這就是控制流的用武之地?？刂屏魇蔷幊陶Z言中的一項(xiàng)功能，允許您根據(jù)可能出現(xiàn)的不同條件有選擇地運(yùn)行特定代碼。
使用控制流允許您根據(jù)程序中存在的條件定義程序可以采用的多個(gè)路徑。
JavaScript 中常用的控制流有兩種類型：條件和循環(huán)。
本節(jié)將重點(diǎn)介紹條件語句，例如：
if...else陳述
switch...case陳述
您將在下一節(jié)中了解循環(huán)語句。
if...else 語句
該if語句允許您創(chuàng)建一個(gè)僅在滿足特定條件時(shí)運(yùn)行的程序。
該if語句的語法如下：
if (condition) {
?// code to execute if condition is true
}
讓我們看一個(gè)例子。假設(shè)你想去度假，需要 5000 美元。
使用該if語句，您可以通過以下方式檢查您是否有足夠的余額：
let balance = 7000;
if (balance > 5000) {
?console.log("You have the money for this trip. Let's go!");
}
運(yùn)行上面的代碼一次，您將看到終端上打印的字符串。
balance現(xiàn)在更改to的值3000，您將不會得到任何響應(yīng)。
發(fā)生這種情況是因?yàn)檎Z句內(nèi)的代碼if僅在條件為 時(shí)才執(zhí)行true。
在該if語句之后，您可以在其下面再編寫一行代碼，如下所示：
let balance = 7000;
if (balance > 5000) {
?console.log("You have the money for this trip. Let's go!");
}
console.log("The end!");
console.log()無論您為變量分配什么值，上面的第二個(gè)調(diào)用都會執(zhí)行balance。
如果您希望它僅在滿足條件時(shí)執(zhí)行if，則也將該行放在大括號內(nèi)：
let balance = 7000;
if (balance > 5000) {
?console.log("You have the money for this trip. Let's go!");
?console.log("The end!");
}
接下來，假設(shè)您只需要在if不滿足語句條件時(shí)運(yùn)行一些代碼。
這就是else語句的用武之地。語句僅在語句未滿足else時(shí)才用于運(yùn)行代碼。if
這是一個(gè)例子：
?let balance = 7000;
?
?if (balance > 5000) {
? ?console.log("You have the money for this trip. Let's go!");
?} else {
? ?console.log("Sorry, not enough money. Save more!");
?}
?console.log("The end!");
現(xiàn)在將 的值更改balance為小于5000，您將觸發(fā)else示例中的塊。
JavaScript 還具有else if語句，允許您編寫另一個(gè)條件來檢查if語句條件是否不滿足。
考慮下面的例子：
?let balance = 7000;
?
?if (balance > 5000) {
? ?console.log("You have the money for this trip. Let's go!");
?} else if (balance > 3000) {
? ?console.log("You only have enough money for a staycation");
?} else {
? ?console.log("Sorry, not enough money. Save more!");
?}
?console.log("The end!");
當(dāng)balance金額小于時(shí)5000，else if報(bào)表將檢查是否balance大于3000。如果是這樣，程序?qū)⒗^續(xù)建議您在家度假。
您可以根據(jù)需要編寫任意數(shù)量的else if語句，并且僅當(dāng)前一條語句不滿足時(shí)才會執(zhí)行每一條語句。
這些語句一起if..else..else if允許您根據(jù)程序面臨的條件執(zhí)行不同的代碼塊。
switch...case 語句
該switch語句是核心 JavaScript 語法的一部分，可讓您控制代碼的執(zhí)行流程。
它通常被認(rèn)為是語句的替代方案if..else，可以為您提供更具可讀性的代碼，尤其是當(dāng)您有許多不同的條件需要評估時(shí)。
這是工作聲明的示例switch。我將解釋下面的代碼：
?let age = 15;
?switch (age) {
? ?case 10:
? ? ?console.log("Age is 10");
? ? ?break;
? ?case 20:
? ? ?console.log("Age is 20");
? ? ?break;
? ?default:
? ? ?console.log("Age is neither 10 or 20");
?}
首先，您需要將要由語句計(jì)算的表達(dá)式傳遞switch到括號中。在示例中，age變量作為求值的參數(shù)傳遞。
然后，您需要編寫語句將嘗試與表達(dá)式匹配case的值。switch該case值后面緊跟一個(gè)冒號 ( :) 以標(biāo)記 case 塊的開始：
?case "apple":
?case`請記住要與表達(dá)式匹配的值的數(shù)據(jù)類型。如果你想匹配 a `string`，那么你需要放置 a `string`。當(dāng)您有 a作為參數(shù)但為 case放置 a 時(shí)，`switch`語句**不會執(zhí)行類型強(qiáng)制：**`number``string
?switch (1) {
? ?case "1":
? ? ?console.log("Hello World!");
? ? ?break;
?}
數(shù)字表達(dá)式與字符串大小寫值不匹配，因此 JavaScript 不會將任何內(nèi)容記錄到控制臺。
布爾值也會發(fā)生同樣的情況。該數(shù)字1不會被強(qiáng)制，因?yàn)閠rue并且該數(shù)字0不會被強(qiáng)制為false：
?switch (0) {
? ?case true:
? ? ?console.log("Hello True!");
? ? ?break;
? ?case false:
? ? ?console.log("Bonjour False!");
? ? ?break;
? ?default:
? ? ?console.log("No matching case");
?}
switch 語句體
語句主體switch由三個(gè)關(guān)鍵字組成：
case用于啟動 case 塊的關(guān)鍵字
break用于停止switch語句運(yùn)行下一個(gè)的關(guān)鍵字case
default未找到匹配時(shí)運(yùn)行一段代碼的關(guān)鍵字case。
當(dāng)您的表達(dá)式找到匹配的 時(shí)case，JavaScript 將執(zhí)行該case語句后面的代碼，直到找到break關(guān)鍵字。如果省略關(guān)鍵字break，則代碼將繼續(xù)執(zhí)行到下一個(gè)塊。
看一下下面的例子：
switch (0) {
?case 1:
? ?console.log("Value is one");
?case 0:
? ?console.log("Value is zero");
?default:
? ?console.log("No matching case");
}
當(dāng)您執(zhí)行上面的代碼時(shí)，JavaScript 將打印以下日志：
> "Value is zero"
> "No matching case"
這是因?yàn)槿绻麤]有break關(guān)鍵字，switch即使已經(jīng)找到匹配的情況，也會繼續(xù)根據(jù)剩余的情況評估表達(dá)式。
您的 switch 評估可能會匹配多個(gè)案例，因此break關(guān)鍵字通常用于在找到匹配項(xiàng)后退出流程。
最后，您還可以將表達(dá)式作為case值：
switch (20) {
?case 10 + 10:
? ?console.log("value is twenty");
? ?break;
}
但您需要記住，case塊的值必須與參數(shù)完全匹配switch。
使用該語句時(shí)最常見的錯(cuò)誤之一switch是人們認(rèn)為case價(jià)值被評估為true或false。
以下case塊在語句中不起作用switch：
let age = 5;
switch (age) {
?case age < 10:
? ?console.log("Value is less than ten");
? ?break;
?case age < 20:
? ?console.log("Value is less than twenty");
? ?break;
?default:
? ?console.log("Value is twenty or more");
}
if您需要記住和評估之間的差異case：
if當(dāng)測試條件評估為時(shí)，塊將被執(zhí)行true
case當(dāng)測試條件與給定參數(shù)完全匹配時(shí)，塊將被執(zhí)行switch
Switch 語句用例
if當(dāng)你考慮和之間的經(jīng)驗(yàn)法則switch是：
switch`僅當(dāng)代碼編寫起來很麻煩時(shí)才使用`if
例如，假設(shè)您想根據(jù)工作日編號編寫工作日名稱
您可以這樣寫：
let weekdayNumber = 1;
if (weekdayNumber === 0) {
?console.log("Sunday");
} else if (weekdayNumber === 1) {
?console.log("Monday");
} else if (weekdayNumber === 2) {
?console.log("Tuesday");
} else if (weekdayNumber === 3) {
?console.log("Wednesday");
} else if (weekdayNumber === 4) {
?console.log("Thursday");
} else if (weekdayNumber === 5) {
?console.log("Friday");
} else if (weekdayNumber === 6) {
?console.log("Saturday");
} else {
?console.log("The weekday number is invalid");
}
我不了解你，但上面的代碼對我來說確實(shí)看起來很麻煩！盡管上面的代碼沒有任何問題，但您可以使用以下命令使其更漂亮switch：
let weekdayNumber = 1;
switch (weekdayNumber) {
?case 0:
? ?console.log("Sunday");
? ?break;
?case 1:
? ?console.log("Monday");
? ?break;
?case 2:
? ?console.log("Tuesday");
? ?break;
?case 3:
? ?console.log("Wednesday");
? ?break;
?case 4:
? ?console.log("Thursday");
? ?break;
?case 5:
? ?console.log("Friday");
? ?break;
?case 6:
? ?console.log("Saturday");
? ?break;
?default:
? ?console.log("The weekday number is invalid");
}
當(dāng)您有很多條件要評估同一塊時(shí)，您可能會if使用邏輯運(yùn)算符AND ( &&)或OR( ||)組合多個(gè)條件：
let myFood = "Banana";
if (myFood === "Banana" || myFood === "Apple") {
?console.log("Eat fruits everyday to keep you healthy.");
}
if (myFood === "Chocolate Cake") {
?console.log("Enjoy the sweet treat.");
}
您可以使用 switch 語句替換上面的代碼。關(guān)鍵是你需要將多個(gè)堆疊cases為一個(gè)，如下所示：
let myFood = "Banana";
switch (myFood) {
?case "Banana":
?case "Apple":
? ?console.log("Eat fruits everyday to keep you healthy.");
? ?break;
?case "Chocolate Cake":
? ?console.log("Enjoy the sweet treat.");
? ?break;
}
不幸的是，由于評估的工作方式，switch無法替換if使用運(yùn)算符的多個(gè)條件。您需要為此使用該聲明。&&caseif
練習(xí)#5
小學(xué)根據(jù)學(xué)生的成績給予不同的獎(jiǎng)勵(lì)：
獲得 A 的學(xué)生將獲得巧克力
獲得 B 的學(xué)生將獲得一塊 Cookie
獲得 C 的學(xué)生將獲得糖果
對于任何其他值，請打印“無獎(jiǎng)勵(lì)”。
創(chuàng)建一個(gè)名為 的變量grade來存儲學(xué)生的成績。
輸出示例：
You got an A, so here's a Chocolate for you!
You got a B, here's a Cookie for you!
You got a C, there's room for improvement and here's your Candy!
您可以使用 theif...else或該switch...case語句。
12 - JavaScript 中的控制流（循環(huán)）
當(dāng)您使用 JavaScript 編寫應(yīng)用程序時(shí)，您通常需要編寫一段需要重復(fù)執(zhí)行的代碼。
假設(shè)您要編寫一個(gè)在控制臺中打印數(shù)字 1 到 10 的程序。console.log您可以通過像這樣調(diào)用 10 次來完成：
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
// and so on..
這是可行的，但是有更好的方法來編寫這種重復(fù)性任務(wù)。
循環(huán)語句是另一類控制流語句，用于多次執(zhí)行代碼塊直到滿足特定條件。
JavaScript 中有兩種循環(huán)語句：
聲明for_
聲明while_
讓我們學(xué)習(xí)如何在實(shí)踐中使用這些語句。
for 語句
您可以使用該for語句并只編寫一行代碼，而不是重復(fù) 10 次來打印數(shù)字 1 到 10，如下所示：
for (let x = 0; x < 10; x++) {
?console.log(x);
}
就這樣吧！該for語句后面是括號 ( ())，其中包含 3 個(gè)表達(dá)式：
表達(dá)式initialization，在其中聲明要用作循環(huán)條件源的變量。x = 1如示例中所示。
表達(dá)式condition，其中初始化中的變量將根據(jù)特定條件進(jìn)行評估。x < 11如示例中所示。
表達(dá)式arithmetic，其中變量值在每個(gè)循環(huán)結(jié)束時(shí)遞增或遞減。
這些表達(dá)式由分號 ( ;)分隔
在表達(dá)式之后，大括號 ( {}) 將用于創(chuàng)建一個(gè)代碼塊，只要表達(dá)式condition返回，JavaScript 就會執(zhí)行該代碼塊true。
您可以通過注意語句結(jié)尾的分號 ( ;) 來識別哪個(gè)表達(dá)式是哪個(gè)。
for ( [initialization]; [condition]; [arithmetic expression]) {
?// As long as condition returns true,
?// This block will be executed repeatedly
}
算術(shù)表達(dá)式可以是自增 ( ++) 或自減 ( --) 表達(dá)式。每次大括號內(nèi)的代碼執(zhí)行結(jié)束時(shí)都會運(yùn)行一次：
for (let x = 10; x >= 1; x--) {
?console.log(x);
}
或者您也可以使用速記算術(shù)運(yùn)算符，例如+=和 ，-=如下所示：
// for statement with shorthand arithmetic expression
for (let x = 1; x < 20; x += 3) {
?console.log(x);
}
這里，每次執(zhí)行循環(huán)時(shí)x都會增加3。
循環(huán)結(jié)束后，JavaScript 將繼續(xù)執(zhí)行您在正文下方編寫的任何代碼for：
for (let x = 1; x < 2; x++) {
?console.log(x);
}
console.log("The for loop has ended");
console.log("Continue code execution");
何時(shí)使用 for 循環(huán)
當(dāng)您知道需要執(zhí)行重復(fù)任務(wù)多少次時(shí)， for 循環(huán)非常有用。
例如，假設(shè)您正在編寫一個(gè)拋硬幣的程序。您需要計(jì)算拋擲 10 次硬幣時(shí)正面朝上的次數(shù)。您可以使用以下方法來完成Math.random：
當(dāng)數(shù)字低于0.5您需要增加tails計(jì)數(shù)器時(shí)
當(dāng)數(shù)字大于0.5或等于時(shí)，您必須遞增heads計(jì)數(shù)器
let heads = 0;
let tails = 0;
for (x = 1; x <= 10; x++) {
?if (Math.random() < 0.5) {
? ?tails++;
?} else {
? ?heads++;
?}
}
console.log("Tossed the coin ten times");
console.log(`Number of heads: ${heads}`);
console.log(`Number of tails: ${tails}`);
上面的示例顯示了for循環(huán)在何處提供最有效的方法。
現(xiàn)在讓我們看一個(gè)關(guān)于拋硬幣的替代練習(xí)，其中for循環(huán)無效：
找出需要拋硬幣多少次才能使其正面朝上。
這一次，你不知道需要拋硬幣多少次。這是您需要使用while循環(huán)語句的地方，您接下來將要學(xué)習(xí)它。
while 語句
只要條件計(jì)算結(jié)果為 ，語句或循環(huán)就用于運(yùn)行代碼while塊。while``true
您可以按如下方式定義循環(huán)的條件和語句：
while (condition) {
?statement;
}
就像for循環(huán)一樣，while循環(huán)用于一遍又一遍地執(zhí)行一段代碼，直到達(dá)到所需的條件。
在下面的示例中，下面將繼續(xù)執(zhí)行語句塊，直到條件表達(dá)式返回false：
let i = 0;
while (i < 6) {
?console.log(`The value of i = ${i}`);
?i++;
}
這里，只要小于，while循環(huán)就會重復(fù)打印 的值。在每次迭代中， 的值都會增加 1，直到達(dá)到 6 并終止循環(huán)。ii6``i
請記住，您需要包含一段代碼，最終將評估條件變?yōu)閒alse，否則while循環(huán)將永遠(yuǎn)執(zhí)行。下面的例子將導(dǎo)致無限循環(huán)：
let i = 0;
while (i < 6) {
?console.log(`The value of i = ${i}`);
}
因?yàn)?的值i永遠(yuǎn)不會改變，所以 while 循環(huán)將永遠(yuǎn)持續(xù)下去！
何時(shí)使用 while 循環(huán)
既然whileand 都for可以用于重復(fù)執(zhí)行一段代碼，那么什么時(shí)候應(yīng)該使用while循環(huán)而不是for？
知道何時(shí)應(yīng)該使用的一個(gè)簡單方法while是當(dāng)您不知道需要執(zhí)行代碼多少次時(shí)。
回到拋硬幣的例子，有一種情況非常適合循環(huán)while：
找出需要拋硬幣多少次才能使其正面朝上。
您還需要顯示拋硬幣的次數(shù)，直到硬幣正面朝上：
let flips = 0;
let isHeads = false;
while (!isHeads) {
?flips++;
?isHeads = Math.random() < 0.5;
}
console.log(`It took ${flips} flips to land on heads.`);
在這里，該條件isHead = Math.random() < 0.5模擬了拋擲一枚公平的硬幣。當(dāng)結(jié)果為 時(shí)true，表示硬幣正面朝上，退出循環(huán)。
因?yàn)樵诘玫綌?shù)字 8 之前你無法知道需要循環(huán)多少次，所以需要使用循環(huán)while而不是循環(huán)for。
練習(xí)#6
編寫一個(gè)程序，使用星號打印半金字塔，*如下所示：
*
**
***
****
*****
接下來，打印一個(gè)反向半金字塔，如下所示：
*****
****
***
**
*
13 - JavaScript 中的函數(shù)
函數(shù)只是為執(zhí)行特定任務(wù)而編寫的一段（或一塊）代碼。
例如，類型轉(zhuǎn)換函數(shù)String()用于將另一種類型的數(shù)據(jù)轉(zhuǎn)換為字符串。
我們在前面的章節(jié)中學(xué)到的各種數(shù)組方法console.log()也是函數(shù)。但因?yàn)檫@些函數(shù)是從對象調(diào)用的，所以它們被稱為方法。
您將在第 11 章后面了解有關(guān)方法的更多信息?，F(xiàn)在，只需知道函數(shù)和方法本質(zhì)上是相同的，只不過方法是從對象調(diào)用的。
除了 JavaScript 提供的內(nèi)置函數(shù)之外，您還可以創(chuàng)建自己的函數(shù)。
如何創(chuàng)建自己的函數(shù)
創(chuàng)建函數(shù)首先鍵入function關(guān)鍵字，后跟函數(shù)名稱、一對圓括號，然后是一對大括號。
這是一個(gè)例子：
function greet() {
?// function body here
?console.log("Hello!");
}
要調(diào)用函數(shù)，您需要指定函數(shù)名稱，后跟括號：
greet(); // Hello!
當(dāng)您調(diào)用該函數(shù)時(shí)，將執(zhí)行該函數(shù)內(nèi)部的代碼。
函數(shù)參數(shù)和參數(shù)
參數(shù)是用于接受調(diào)用函數(shù)時(shí)給出的輸入的變量。
您可以在函數(shù)頭中的括號內(nèi)指定參數(shù)。
以下示例顯示了一個(gè)具有一個(gè)名為 的參數(shù)的函數(shù)name：
function greet(name) {
?// function body
}
如何name在函數(shù)內(nèi)使用該參數(shù)取決于您。
您可以在函數(shù)內(nèi)部使用參數(shù)，print()如下所示：
function greet(name) {
?console.log(`Hello, ${name}!`);
?console.log("Nice weather today, right?");
}
現(xiàn)在，每當(dāng)您需要調(diào)用該greet()函數(shù)時(shí)，您都需要傳遞一個(gè)輸入來填充name參數(shù)。
您傳遞來填充參數(shù)的輸入稱為參數(shù)，具體操作方法如下：
greet("Peter");
調(diào)用函數(shù)時(shí)括號內(nèi)的“Peter”字符串greet()將作為name參數(shù)傳遞。
運(yùn)行代碼以接收此輸出：
Hello, Peter!
Nice weather today, right?
定義函數(shù)時(shí)可以有多個(gè)參數(shù)，但需要用逗號分隔每個(gè)參數(shù)，如下所示：
function greet(name, weather) {
?console.log(`Hello, ${name}!`);
?console.log(`It's ${weather} today, right?`);
}
greet("Nathan", "rainy");
輸出：
Hello, Nathan!
It's rainy today, right?
當(dāng)在函數(shù)頭中指定兩個(gè)參數(shù)時(shí)，需要傳遞兩個(gè)參數(shù)。如果您調(diào)用該函數(shù)而不傳遞參數(shù)，則該值將為undefined。
在下一節(jié)中，您將學(xué)習(xí)如何創(chuàng)建具有默認(rèn)值的參數(shù)，這樣您就可以調(diào)用函數(shù)而無需向其傳遞參數(shù)。
但現(xiàn)在，我希望您能看到使用參數(shù)的便利性。它們通過采用不同的輸入值來覆蓋函數(shù)可能具有的各種場景，從而使您的函數(shù)更具適應(yīng)性和可重用性。
如示例所示，name和weather參數(shù)允許您在不同的天氣下問候許多不同的人。
無論晴天、雨天還是陰天，當(dāng)你想和另一個(gè)人打招呼時(shí)，只要改變name和參數(shù)即可。weather
默認(rèn)參數(shù)
定義函數(shù)時(shí)，您可以為該函數(shù)中的任何參數(shù)設(shè)置默認(rèn)值。
例如，name下面函數(shù)中的參數(shù)是默認(rèn)參數(shù)：
?function greet(name = "Nathan") {
? ?console.log(`Hello, ${name}!`);
? ?console.log("Nice weather today, right?");
?}
undefined此處，當(dāng)沒有為參數(shù)傳遞值或傳遞參數(shù)時(shí)，將使用默認(rèn)值“Nathan” name。
您可以通過調(diào)用不帶參數(shù)的函數(shù)來測試這一點(diǎn)，greet()如下所示：
?greet();
?greet("Jack");
輸出：
?Hello, Nathan!
?Nice weather today, right?
?
?Hello, Jack!
?Nice weather today, right?
您定義的任何函數(shù)都可以混合使用默認(rèn)和非默認(rèn)參數(shù)。
下面是一個(gè)函數(shù)的另一個(gè)示例，該函數(shù)具有一個(gè)名為 的默認(rèn)參數(shù)name和一個(gè)名為 的非默認(rèn)參數(shù)weather：
?function greet(weather, name = "Nathan") {
? ?console.log(`Hello, ${name}!`);
? ?console.log(`It's ${weather} today, right?`);
?}
?
?greet("sunny");
輸出：
Hello, Nathan!
It's sunny today, right?
請注意，weather參數(shù)被放置在參數(shù)的前面name。這是為了方便，您無需指定默認(rèn)參數(shù)。
如果將非默認(rèn)參數(shù)放在默認(rèn)參數(shù)之后，則需要向該name參數(shù)傳遞一個(gè)值才能獲取該weather參數(shù)。
考慮下面的例子：
function greet(name = "Nathan", weather) {
?console.log(`Hello, ${name}!`);
?console.log(`It's ${weather} today, right?`);
}
greet(undefined, "sunny");
要將實(shí)參傳遞給weather形參，我們需要首先undefined為name形參傳遞 或 任何值。
這就是為什么最好在默認(rèn)參數(shù)前面指定非默認(rèn)參數(shù)。
默認(rèn)參數(shù)和 null
undefined回到第 2 節(jié)，回想一下我們簡要探討了“默認(rèn)”空值和null“有意”空值之間的區(qū)別。
當(dāng)您傳遞undefined給具有默認(rèn)參數(shù)的函數(shù)時(shí)，將使用默認(rèn)參數(shù)：
function greet(name = "John"){
?console.log(name);
}
greet(undefined); // John
John正如您所看到的，當(dāng)您傳遞undefined給函數(shù)時(shí)，JavaScript 會打印默認(rèn)參數(shù)值。
但是當(dāng)你傳遞null給函數(shù)時(shí)，默認(rèn)參數(shù)將被忽略：
?function greet(name = "John"){
? ?console.log(name);
?}
?
?greet(null); // null
這是初學(xué)者學(xué)習(xí) JavaScript 時(shí)常犯的錯(cuò)誤之一。當(dāng)您使用 value 時(shí)null，JavaScript 會認(rèn)為您希望該值為空，因此它不會用默認(rèn)參數(shù)替換該值。
當(dāng)您使用 時(shí)undefined，JavaScript 會將其替換為默認(rèn)參數(shù)。您在職業(yè)生涯中使用 JavaScript 代碼時(shí)可能會遇到此問題，因此請記住這一點(diǎn)。
返回語句
函數(shù)還可以return在代碼塊內(nèi)有一條語句。語句return用于將值返回給調(diào)用者。
例如，以下函數(shù)返回兩個(gè)值的總和：
?function sum(a, b) {
? ?return a + b;
?}
?
?let result = sum(3, 2);
?console.log(result); // 5
函數(shù)返回的值可以分配給變量以進(jìn)行進(jìn)一步操作。return您可以在函數(shù)內(nèi)的任何位置添加該語句。
當(dāng) JavaScript 到達(dá)該return語句時(shí)，它會跳過函數(shù)塊內(nèi)編寫的進(jìn)一步代碼，并返回到調(diào)用該函數(shù)的位置。
以下函數(shù)有兩個(gè)返回語句：
?function checkAge(age) {
? ?if (age > 18) {
? ? ?return "You may get a car license";
? ?}
? ?return "You may not get a car license yet";
?}
?
?console.log(checkAge(20));
?console.log(checkAge(15));
輸出：
?You may get a car license
?You may not get a car license yet
當(dāng)我們checkAge()第一次調(diào)用該函數(shù)時(shí)，age參數(shù)的值大于18，因此JavaScript執(zhí)行塊return內(nèi)的語句if。
第二次調(diào)用該函數(shù)時(shí)，if條件不滿足，因此 JavaScript 改為執(zhí)行塊return下的語句if。
您還可以通過指定不帶任何值的語句來停止函數(shù)執(zhí)行并返回調(diào)用者return：
?function greet() {
? ?console.log("Hello!");
? ?return;
? ?console.log("Good bye!");
?}
?
?greet()
輸出：
?Hello!
這里，在調(diào)用return之間調(diào)用該語句console.log()。
JavaScript 執(zhí)行第一個(gè)console.log()調(diào)用，然后跳過其余代碼。'再見！' 不打印字符串。
變量范圍
現(xiàn)在您正在學(xué)習(xí)函數(shù)，現(xiàn)在是討論變量作用域的好時(shí)機(jī)。
函數(shù)內(nèi)部聲明的變量只能從該函數(shù)訪問。這是因?yàn)樵撟兞烤哂芯植孔饔糜颉?/p>
另一方面，在任何塊之外聲明的變量由于其全局作用域而被稱為全局變量。
這兩個(gè)作用域很重要，因?yàn)楫?dāng)您嘗試訪問其作用域之外的局部變量時(shí)，您會收到錯(cuò)誤。例如：
?function greet() {
? ?let myString = "Hello World!";
?}
?
?greet();
?console.log(myString);
當(dāng)您運(yùn)行上面的代碼時(shí)，JavaScript 會返回錯(cuò)誤：
?ReferenceError: myString is not defined
這是因?yàn)樵搈yString變量是在greet()函數(shù)內(nèi)部聲明的，因此您無法在函數(shù)外部訪問該變量。即使您在訪問變量之前調(diào)用該函數(shù)也沒關(guān)系。
同時(shí)，可以從任何地方訪問全局變量，甚至可以在函數(shù)內(nèi)部訪問：
?let myString = "Hello World!";
?
?function greet() {
? ?console.log(myString);
?}
?
?greet(); // Hello World!
在這里，該greet()函數(shù)能夠訪問myString在其外部聲明的變量。
請記住，這僅適用于使用let和聲明的變量const。
接下來，您還可以定義一個(gè)與全局變量同名的局部變量，而不覆蓋它。
這是一個(gè)例子：
let myString = "Hello World!";
function greet() {
?let myString = "Morning!";
?console.log(myString);
}
greet(); ?// Morning!
console.log(myString); // Hello World!
當(dāng)您調(diào)用該greet()函數(shù)時(shí)，調(diào)用的局部變量myString被分配了字符串“Morning！”。
在函數(shù)外部，也被調(diào)用的全局變量myString仍然存在，并且值沒有改變。
JavaScript 將局部作用域變量視為不同的變量。當(dāng)您在函數(shù)內(nèi)聲明相同的變量時(shí)，函數(shù)內(nèi)的任何代碼將始終引用局部變量。
在實(shí)踐中，你很少需要在不同的作用域中聲明相同的變量：
在函數(shù)外部聲明的任何變量都不應(yīng)在函數(shù)內(nèi)部使用，除非將它們作為參數(shù)傳遞。
函數(shù)內(nèi)部聲明的變量不應(yīng)該在該函數(shù)外部引用
當(dāng)您編寫 JavaScript 函數(shù)時(shí)請記住這一點(diǎn)。
其余參數(shù)
剩余參數(shù)是可以接受任意數(shù)量的數(shù)據(jù)作為其參數(shù)的參數(shù)。參數(shù)將存儲為數(shù)組。
您可以通過在參數(shù)名稱前添加三個(gè)點(diǎn)來在函數(shù)頭中定義剩余參數(shù)...。
以下是創(chuàng)建具有可變長度參數(shù)的函數(shù)的示例：
?function printArguments(...args){
? ? ?console.log(args);
?}
調(diào)用printArguments()上面的函數(shù)時(shí)，您可以指定任意數(shù)量的參數(shù)：
?function printArguments(...args){
? ? ?console.log(args);
?}
?
?printArguments("A", "B", "C");
?// [ 'A', 'B', 'C' ]
?printArguments(1, 2, 3, 4, 5);
?// [ 1, 2, 3, 4, 5 ]
請記住，一個(gè)函數(shù)只能有一個(gè)剩余參數(shù)，并且剩余參數(shù)必須是函數(shù)中的最后一個(gè)參數(shù)。
當(dāng)您的函數(shù)需要使用不定數(shù)量的參數(shù)時(shí)，您可以使用剩余參數(shù)。
箭頭功能
JavaScript箭頭函數(shù)語法允許您使用更短、更簡潔的語法編寫 JavaScript 函數(shù)。
當(dāng)您需要在 JavaScript 中創(chuàng)建函數(shù)時(shí)，主要方法是使用關(guān)鍵字function后跟函數(shù)名稱，如下所示：
?function greetings(name) {
? ?console.log(`Hello, ${name}!`);
?}
?
?greetings("John"); // Hello, John!
箭頭函數(shù)語法允許您創(chuàng)建一個(gè)函數(shù)表達(dá)式，該表達(dá)式產(chǎn)生與上面的代碼相同的結(jié)果。
這是greetings()使用箭頭語法的函數(shù)：
const greetings = (name) => {
?console.log(`Hello, ${name}!`);
};
greetings("John"); // Hello, John!
當(dāng)您使用箭頭函數(shù)語法創(chuàng)建函數(shù)時(shí)，需要將表達(dá)式分配給變量，以便函數(shù)具有名稱。
基本上，箭頭函數(shù)語法如下所示：
?const fun = (param1, param2, ...) => {
? ?// function body
?}
在上面的代碼中，
fun是保存函數(shù)的變量。fun()您可以稍后在代碼中調(diào)用該函數(shù)。
(param1, param2, ...)是函數(shù)參數(shù)。您可以根據(jù)函數(shù)的需要定義任意數(shù)量的參數(shù)。
然后您將看到箭頭=>指示函數(shù)的開始。
上面的代碼等同于以下內(nèi)容：
?const fun = function(param1, param2, ...) {
? ?// function body
?}
箭頭函數(shù)語法沒有為 JavaScript 語言添加任何新功能。
相反，它改進(jìn)了用 JavaScript 編寫函數(shù)的方式。
起初，這可能看起來很奇怪，因?yàn)槟呀?jīng)習(xí)慣了這個(gè)function關(guān)鍵字。
但當(dāng)您開始使用箭頭語法時(shí)，您會發(fā)現(xiàn)它非常方便且更易于編寫。
單行和多行箭頭函數(shù)
箭頭函數(shù)為您提供了一種編寫單行函數(shù)的方法，其中箭頭的左側(cè)=>返回到右側(cè)。
使用function關(guān)鍵字時(shí)，需要使用大括號{}和return關(guān)鍵字，如下所示：
?function plusTwo(num) {
? ?return num + 2;
?}
使用箭頭函數(shù)，您可以省略大括號和return關(guān)鍵字，創(chuàng)建一個(gè)單行函數(shù)，如下所示：
?const plusTwo = (num) => num + 2;
如果沒有大括號，JavaScript 將計(jì)算箭頭語法右側(cè)的表達(dá)式并將其返回給調(diào)用者。
箭頭函數(shù)語法也適用于沒有值的函數(shù)，return如下所示：
?const greetings = () => console.log("Hello World!");
使用箭頭函數(shù)語法時(shí)，僅當(dāng)您具有多行函數(shù)體時(shí)才需要大括號：
?const greetings = () => {
? ?console.log("Hello World!");
? ?console.log("How are you?");
?};
不帶圓括號的箭頭函數(shù)
JavaScript 函數(shù)中使用圓括號()來指示函數(shù)可以接收的參數(shù)。
當(dāng)您使用function關(guān)鍵字時(shí)，圓括號始終是必需的：
?function plusThree(num) {
? ?return num + 3;
?}
另一方面，當(dāng)函數(shù)只有一個(gè)參數(shù)時(shí)，箭頭函數(shù)允許您省略圓括號：
以下代碼示例是有效的箭頭函數(shù)表達(dá)式：
?const plusThree = num => num + 3;
如您所見，您可以刪除圓括號和大括號以及關(guān)鍵字return。
但在以下兩種情況下您仍然需要圓括號：
當(dāng)函數(shù)沒有參數(shù)時(shí)
當(dāng)函數(shù)有多個(gè)參數(shù)時(shí)
當(dāng)沒有參數(shù)時(shí)，箭頭前需要圓括號，如下所示：
?const greetings = () => console.log("Hello World!");
當(dāng)您有多個(gè)參數(shù)時(shí)，這同樣適用。
下面的函數(shù)有兩個(gè)參數(shù)：name和age。
?const greetings = (name, age) => console.log("Hello World!");
當(dāng)您有單個(gè)參數(shù)函數(shù)時(shí)，箭頭語法使圓括號可選。
箭頭函數(shù)沒有參數(shù)綁定
當(dāng)使用function關(guān)鍵字定義函數(shù)時(shí)，您可以使用關(guān)鍵字訪問傳遞給函數(shù)的參數(shù)，arguments如下所示：
?const printArgs = function () {
? ?console.log(arguments);
?};
?
?printArgs(1, 2, 3);
?// [Arguments] { '0': 1, '1': 2, '2': 3 }
上面代碼中的關(guān)鍵字arguments指的是存儲傳遞給函數(shù)的所有參數(shù)的對象。
相比之下，箭頭函數(shù)沒有該arguments對象，并且當(dāng)您嘗試訪問它時(shí)會拋出錯(cuò)誤：
?const printArgs = () => console.log(arguments);
?
?printArgs(1, 2, 3);
?//Uncaught ReferenceError: arguments is not defined
您可以使用 JavaScript 擴(kuò)展語法來模仿arguments綁定，如下所示：
?const printArgs = (...arguments) => console.log(arguments);
?
?printArgs(1, 2, 3);
?// [1, 2, 3]
通過使用擴(kuò)展語法，傳遞給箭頭函數(shù)的參數(shù)將存儲在數(shù)組中。
請注意，即使您只向函數(shù)傳遞一個(gè)參數(shù)，您也需要圓括號。
arguments您可以使用數(shù)組索引符號arguments[0]、arguments[1]等來訪問給定值。
如何輕松地將普通函數(shù)轉(zhuǎn)換為箭頭函數(shù)
您可以按照以下三個(gè)簡單步驟將普通函數(shù)轉(zhuǎn)換為箭頭函數(shù)：
將function關(guān)鍵字替換為變量關(guān)鍵字let或const
=在函數(shù)名稱之后、圓括號之前添加符號
=>在圓括號后添加符號
下面的代碼將幫助您直觀地了解這些步驟：
?function plusTwo(num) {
? ?return num + 2;
?}
?
?// step 1: replace function with let / const
?const plusTwo(num) {
? ?return num + 2;
?}
?
?// step 2: add = after the function name
?const plusTwo = (num) {
? ?return num + 2;
?}
?
?// step 3: add => after the round brackets
?const plusTwo = (num) => {
? ?return num + 2;
?}
上述三個(gè)步驟足以將任何舊的 JavaScript 函數(shù)語法轉(zhuǎn)換為新的箭頭函數(shù)語法。
當(dāng)您有單行函數(shù)時(shí)，有第四個(gè)可選步驟來刪除大括號和關(guān)鍵字，return如下所示：
?// from this
?const plusTwo = num => {
? ?return num + 2;
?};
?
?// to this
?const plusTwo = num => num + 2;
當(dāng)只有一個(gè)參數(shù)時(shí)，還可以刪除圓括號：
?// from this
?const plusTwo = (num) => num + 2;
?
?// to this
?const plusTwo = num => num + 2;
但最后兩個(gè)步驟是可選的。只需前三個(gè)步驟即可轉(zhuǎn)換任何 JavaScriptfunction并使用箭頭函數(shù)語法。
練習(xí)#7
編寫一個(gè)名為 的函數(shù)calculateSquare()，用于計(jì)算正方形的面積和周長。
該函數(shù)接受一個(gè)參數(shù)：side平方的 。
面積的計(jì)算公式為side * side，周長的計(jì)算公式為4 * side。
輸出顯示尺寸、面積和周長的大小，如下所示：
?The square side is 8
?The area of the square is 64
?The perimeter of the square is 32
14 - JavaScript 中的對象
對象是一種特殊的數(shù)據(jù)類型，它允許您存儲多個(gè)值，就像數(shù)組一樣。
對象和數(shù)組之間的區(qū)別在于，數(shù)組將數(shù)據(jù)存儲為項(xiàng)目列表，而對象以對格式存儲數(shù)據(jù)key:value。
讓我們看一個(gè)例子來說明這種差異。假設(shè)您想在程序中存儲有關(guān)一本書的信息。
當(dāng)您使用常規(guī)變量時(shí)，它看起來像這樣：
?let bookTitle = "JavaScript Introduction";
?let bookAuthor = "Nathan Sebhastian";
雖然它工作得很好，但它肯定不是存儲相關(guān)值的最佳方式。
存儲值的另一種方法是使用數(shù)組：
?let myBook = ["JavaScript Introduction", "Nathan Sebhastian"];
這當(dāng)然更好，因?yàn)槟梢詫⒂嘘P(guān)本書的相關(guān)數(shù)據(jù)分組在一起，但您無法為該值添加上下文。
這就是對象有用的地方。您可以聲明一個(gè)書籍對象并以以下格式存儲數(shù)據(jù)key:value：
?let myBook = {
? ?title: "JavaScript Introduction",
? ?author: "Nathan Sebhastian",
?};
對象是使用大括號聲明的{}，括號內(nèi)的每一項(xiàng)都以格式編寫key:value。
對象項(xiàng)也稱為屬性，鍵為屬性名稱，值為屬性值。
與數(shù)組一樣，您需要使用逗號分隔對象內(nèi)的每個(gè)項(xiàng)目。
您可以指定字符串或數(shù)字作為項(xiàng)目的鍵，并且可以指定任何類型的數(shù)據(jù)作為值，包括函數(shù)：
?let myBook = {
? ?title: "JavaScript Introduction",
? ?author: "Nathan Sebhastian",
? ?describe: function () {
? ? ?console.log(`Book title: ${this.title}`);
? ? ?console.log(`Book author: ${this.author}`);
? ?},
?};
這里，鍵或?qū)傩允且粋€(gè)從對象describe打印title和值的函數(shù)。author
關(guān)鍵字this指的是代碼的上下文，myBook在本例中是對象。
通常，對象鍵可以為它所保存的值提供更多上下文。鍵還必須是唯一的，因此不能在同一個(gè)對象中使用同一個(gè)鍵兩次。
例如，如果您有關(guān)于一本書的數(shù)據(jù)，則可以使用對象鍵（例如title、author和 ）price來幫助您了解每個(gè)鍵中存儲的值的上下文。
如何訪問對象值
要訪問對象的值，可以使用點(diǎn)符號.或方括號[]符號。
下面是使用點(diǎn)表示法訪問對象屬性的示例：
?let myBook = {
? ?title: "JavaScript Introduction",
? ?author: "Nathan Sebhastian",
?};
?
?console.log(myBook.title);
?console.log(myBook.author);
以下是如何使用方括號訪問相同的屬性：
?let myBook = {
? ?title: "JavaScript Introduction",
? ?author: "Nathan Sebhastian",
?};
?
?console.log(myBook["title"]);
?console.log(myBook["author"]);
請記住，您需要將屬性名稱像字符串一樣用引號括起來，否則 JavaScript 會認(rèn)為您在方括號內(nèi)傳遞了變量。
如何向?qū)ο筇砑有聦傩?/h1>
您可以使用點(diǎn)符號或方括號為對象分配新屬性，如下所示：
?let myBook = {
? ?title: "JavaScript Introduction",
? ?author: "Nathan Sebhastian",
?};
?
?// add release year property
?myBook.year = 2023;
?
?// add publisher property
?myBook["publisher"] = "CodeWithNathan";
?
?console.log(myBook);
當(dāng)您打印對象時(shí)，結(jié)果如下：
?{
? ?title: 'JavaScript Introduction',
? ?author: 'Nathan Sebhastian',
? ?year: 2023,
? ?publisher: 'CodeWithNathan'
?}
您可以根據(jù)需要向同一對象添加任意數(shù)量的屬性。
如何修改對象屬性
要修改現(xiàn)有屬性，您需要使用點(diǎn)或方括號表示法后跟賦值運(yùn)算符來指定現(xiàn)有對象屬性，如下所示：
?let myBook = {
? ?title: "JavaScript Introduction",
? ?author: "Nathan Sebhastian",
?};
?
?// change the author property
?myBook.author = "John Doe";
?
?console.log(myBook);
輸出：
?{
? ?title: 'JavaScript Introduction',
? ?author: 'John Doe'
?}
如您所見，author屬性值已更改。
如何刪除對象屬性
要從對象中刪除屬性，您需要使用delete運(yùn)算符，如下所示：
?let myBook = {
? ?title: "JavaScript Introduction",
? ?author: "Nathan Sebhastian",
?};
?
?delete myBook.author;
?
?console.log(myBook);
輸出：
?{ title: 'JavaScript Introduction' }
當(dāng)您嘗試訪問已刪除的屬性時(shí)，您將獲得該undefined值。
如何檢查對象中是否存在屬性
要檢查對象中是否存在某個(gè)屬性，可以使用in如下運(yùn)算符：
?propertyName in myObject
如果對象中存在該運(yùn)算符，則該in運(yùn)算符將返回。true``propertyName
請參閱下面的示例：
?let person = {
? ?firstName: "Nathan",
? ?lastName: "Sebhastian"
?}
?
?// check if firstName exists
?console.log('firstName' in person); // true
?
?// check if age exists
?console.log('age' in person); // false
現(xiàn)在您知道如何操作 JavaScript 對象了。
練習(xí)#8
創(chuàng)建一個(gè)person具有以下屬性的對象：
name- 此人的姓名
age- 該人的年齡
greet()- 問候他人的功能
在greet()函數(shù)內(nèi)，介紹此人，指定姓名和年齡。
這是一個(gè)示例輸出：
?person.greet();
?
?Hello! My name is Alex and I'm 22 years old.
最后練習(xí)：構(gòu)建一臺收銀機(jī)
讓我們構(gòu)建一個(gè)收銀機(jī)，它可以將商品添加到購物車、計(jì)算總價(jià)、計(jì)算折扣并接受現(xiàn)金付款。
假定貨幣為美元，因此您無需將其添加到程序中。
收銀機(jī)有 3 種待售商品：
電話300
220 人智能電視
150 人游戲機(jī)
總價(jià)高于400有10%的折扣。
收銀機(jī)應(yīng)該有一個(gè)剛開始是空的購物車。
收銀機(jī)應(yīng)該提供一個(gè)名為 的方法addItem，該方法將商品名稱作為參數(shù)。當(dāng)接到電話時(shí)，它應(yīng)該檢查該商品是否可以出售。如果是，則應(yīng)將該商品添加到購物車中。如果沒有，請顯示一條消息，說明我們不出售該商品。
收銀機(jī)應(yīng)該提供一個(gè)名為 的方法calculateTotalPrice來計(jì)算購物車中所有商品的總價(jià)。它應(yīng)該迭代購物車中的商品并總結(jié)它們的價(jià)格。
收銀機(jī)應(yīng)該提供一個(gè)名為 的方法pay，以支付金額為參數(shù)。
它應(yīng)該使用該方法計(jì)算購物車中商品的總價(jià)calculateTotalPrice。如果總價(jià)高于400，則應(yīng)適用10%的折扣。
然后，該方法應(yīng)將付款金額與總價(jià)（應(yīng)用折扣后）進(jìn)行比較，并顯示相應(yīng)的消息：
如果付款金額等于或大于總價(jià)，則應(yīng)顯示感謝客戶購買的消息。如果有任何找零，還應(yīng)顯示要找的找零金額。
如果付款金額小于總價(jià)，則應(yīng)顯示一條消息，表明客戶沒有足夠的錢來購買商品。
該程序應(yīng)包括適當(dāng)?shù)腸onsole.log()語句來顯示將商品添加到購物車、顯示總價(jià)和處理付款的消息。
該程序應(yīng)該處理客戶的付款金額恰好等于總價(jià)的情況，以及付款金額大于或小于總價(jià)的情況。
要構(gòu)建程序，您需要使用您所學(xué)到的有關(guān)對象、數(shù)組、條件和循環(huán)的知識。
我建議您首先嘗試自己構(gòu)建該程序。如果您遇到困難，請參閱下面提供的解決方案。祝你好運(yùn)！
結(jié)論
恭喜您完成本手冊！我們一起學(xué)習(xí)了很多概念來學(xué)習(xí)如何使用 JavaScript 進(jìn)行編碼。
