JavaScript 是 Web 開發(fā)需要掌握的一種編程語言，它創(chuàng)建于 1995 年，用于在網(wǎng)景（Netscape） Navigator 瀏覽器中將程序添加到網(wǎng)頁中。今天，該語言已被所有其他主要網(wǎng)絡(luò)瀏覽器支持。

設(shè)置環(huán)境

在本教程中，將有很多示例代碼片段。要執(zhí)行這些代碼，可以簡單地打開瀏覽器，進入開發(fā)者工具 -> 控制臺：

或者可以在計算機上安裝 Node.js，它允許使用命令終端運行 JavaScript 程序。安裝完成后，在終端中輸入 node ，就可以開始輸入 JavaScript 了，如下：

當然還可以在一些在線平臺上運行 JavaScript ，如 codepen。

數(shù)據(jù)類型

在計算機世界中，一切都與數(shù)據(jù)有關(guān)。計算機程序所做的本質(zhì)上是獲取一些輸入數(shù)據(jù)，處理它們，并最終返回一些輸出數(shù)據(jù)。下面就來討論一下 JacaScript 可以處理的一些不同類型的數(shù)據(jù)。

Number

數(shù)字是最簡單的，因為它的工作原理與小學數(shù)學課上所學的完全一樣。

// 整數(shù)
100
// 小數(shù)
10.56
// 科學計數(shù)法
3.14e5 // 3.14 * 10^5 = 314000

數(shù)字的主要用途是進行算術(shù)運算。

3 + 5 * 2
// 輸出 13

可能不認識一個運算符，它是模 (%) 運算。X % Y 計算 X 除以 Y 的余數(shù)。例如：

25 % 5 // 結(jié)果為 0
25 % 10 // 結(jié)果為 5

關(guān)于數(shù)字的實際應(yīng)用場景，可以參閱《JavaScript數(shù)據(jù)結(jié)構(gòu)之Number》。

字符串

字符串用于表示文本，它們都用引號（可以是單引號和雙引號，個人比較偏向使用雙引號）括起來，如下所示：

"Made in China.";
'Made in China.';

只要字符串開頭和結(jié)尾的引號匹配，單引號和雙引號的工作方式完全相同。

每當在字符串中發(fā)現(xiàn)反斜杠 \ 時，意味著它后面的字符具有特殊含義，即俗稱的轉(zhuǎn)義字符。例如，當字符 n 跟在反斜杠后面時 \n，計算機會將其解釋為換行：

"Made in China \n 中國制造";

輸出的結(jié)果是：

Made in China
中國制造

如下是一些常見的轉(zhuǎn)義字符：

轉(zhuǎn)義字符	所示含義
\n	換行符
\r	回車符
\t	水平制表符
\b	退格符
\\	反斜線\
\'	單引號'
\"	單引號"

加號 + 操作符也可以用于字符串，顯然，字符串不能用于算術(shù)運算，字符串里的加號表示連接（將兩個字符拼接在一起）。

"Made in China:" + "中國制造";

最后輸出的結(jié)果為：

Made in China:中國制造

在 ES6 中有一種特殊的字符串，即反引號字符串，通常稱為模板字面量。它允許在字符串中嵌入其他變量值：

const country = "China";
const str = `Made in ${country}`;
console.log(str); // Made in China

當然也可以不是變量，如下：

const str = `100 的一半是： ${100 / 2}`;
console.log(str); // 100 的一半是： 50

布爾值

布爾值類型只包含兩個值：true 和 false，如下：

console.log(1 == 1); // true
console.log(1 > 2); // false
console.log(1 < 0); // false
console.log(1 != 2); // true

在上面的代碼中，==表示相等，!= 表示不相等，在實際項目開發(fā)中，建議使用恒等，用 === 取代 == 和 !== 取代 != 。其他類似的運算符包括 >=（大于或等于）和 <=（小于或等于）。

在 JavaScript 中，可以將三個邏輯運算符應(yīng)用于布爾值，&&（與）、||（或）、! （非）。

&& 運算符表示邏輯與，并且只有當給它的兩個值或者以上的值都為 true 時結(jié)果才為 true。

console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false
console.log(true && true && true); // true
console.log(false && false && true); // false

&& 邏輯與可以用于優(yōu)化條件語句，如下：

const month = 12;

const dosome = () => {
    console.log("dosom");
};
if (month === 12) {
    dosome();
}

// 邏輯與簡化后

month === 12 && dosome();

|| 運算符表示邏輯或，如果給它的任何一個值都為 true，則結(jié)果為 true ；當所有的條件都為 false 的時候結(jié)果才為 false。

console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false
console.log(true || true); //  true

|| 邏輯或可以用戶定義默認值變量，如下：

const age = inputAge || 18;  // 當 inputAge 為false 的情況下，將值 18 賦值給age

! 運算符表示邏輯非，給值取反。

console.log(!true); // false
console.log(!false); //  true

空值

在 JavaScript 中有兩個特殊的值，null 和 undefined，它們表明沒有意義的值，可以理解為空值。這兩個值看起來沒有太大的區(qū)別，實際上，在大多數(shù)情況下，可以將它們視為可以互換的。有兩個不同的值表示同一件事，這是 JavaScript 設(shè)計的一個意外。同時這個意外增加空值判斷的復(fù)雜性，雖然null和 undefined可以理解為同一個意思，但是它們的比較還是有區(qū)別。如希望了解更多，可以參閱《再說 JavaScript 的 null 和 undefined》。

數(shù)據(jù)類型轉(zhuǎn)換

JavaScript 是弱類型語言，這導(dǎo)致了程序編寫具有很強的隨意性，很多情況下都會嘗試執(zhí)行提交給它的代碼，即使這個代碼沒有意義。例如：

console.log(8 * null); // 0
console.log("8" - 1); //  7
console.log("8" + 1); //  81

在第一個示例中，null 被轉(zhuǎn)換為數(shù)字 0，而在第二個示例中，字符串 "8" 轉(zhuǎn)換為數(shù)字 8。但是，在第三個例子中，數(shù)字 1 被轉(zhuǎn)換為字符串 "1"，通過加號對兩個字符串進行連接，所以結(jié)果變成了 81 。

程序結(jié)構(gòu)

語句和賦值

在計算機編程中，可以將“程序”視為解決復(fù)雜問題的說明手冊。該手冊中的每條指令/句子都稱為語句。在 JavaScript 中，每一行代碼應(yīng)始終以分號 ;結(jié)尾。這部分事情可以讓代碼編輯器自動來完成。

const num = 10;

上述代碼稱為變得定義及賦值。它使用 = 運算符將值 10 賦值給常量 num，如果是變量，可以使用 let 或者 var 來定義，如下：

let num = 10;

關(guān)鍵字 const 、 let 和 var 都可以用于定義變量，但是它們的作用域不同，詳細可以參閱《javascript 中變量聲明 var、let、const 的區(qū)別》。

函數(shù)

函數(shù)是一段程序，它返回一個值或有一些副作用，或兩者兼而有之。比如上面的 console.log() 函數(shù)就是用來在終端輸出值的。或者，prompt() 函數(shù)將顯示一個要求用戶輸入的對話框，并且將輸入值賦值給變量 num 。

let num = prompt("請輸入一個數(shù)字：");
console.log(num);

顯示對話和將文本寫入屏幕都是有副作用。沒有副作用的函數(shù)也很有用。例如：

console.log(Math.max(2, 4, 6, 8)); // 8

Math.max() 函數(shù)沒有任何副作用，它只需要一組數(shù)字并返回最大值。

所有這些功能都是瀏覽器內(nèi)置的。當然也可以使用 JavaScript 創(chuàng)建自己的函數(shù)，下面來看看組成函數(shù)的語句。

if 語句

if 語句提供了一種在不同條件下執(zhí)行不同代碼段的方法。例如：

const num = prompt("請輸入一個整數(shù)：");
if (num < 10) {
    console.log("小于10");
} else {
    console.log("大于10");
}

這個程序要求你輸入一個整數(shù)，如果數(shù)字小于 10，語句 console.log("小于10"); 將被執(zhí)行，程序?qū)⑤敵?小于10 。如果數(shù)字大于 10，程序?qū)⑤敵?code data-backticks="1">大于10。

如果需要包含多個條件，還可以使用多個 if/else 對：

const num = prompt("請輸入一個整數(shù)：");

if (num < 10) {
    console.log("小于10");
} else if (num < 100) {
    console.log("小于100");
} else {
    console.log("大于100");
}

for 循環(huán)

只要滿足某些條件，for 循環(huán)為提供了一種反復(fù)執(zhí)行相同代碼的方法。

for (let num = 0; num <= 12; num = num + 2) {
    console.log(num);
}

while 循環(huán)

while 循環(huán)以類似的方式工作，除了它只需要一個表達式。事實上，可以輕松地將之前的 for 循環(huán)示例更改為 while 循環(huán)。如下：

let num = 0;
while (num <= 12) {
    console.log(num);
    num = num + 2;
}

do while 循環(huán)

do-while 循環(huán)與 while 循環(huán)只有一點不同，它保證循環(huán)體至少執(zhí)行一次。

let num = 10;
do {
    num = num + 1;
    console.log(num);
} while (num <= 1);

這次 num 的初始值為 10，沒有觸發(fā)循環(huán)繼續(xù)的條件。但是因為這是一個 do-while 循環(huán)，所以主體仍然執(zhí)行一次。如果這是一個 while 循環(huán)，它根本不會執(zhí)行。

循環(huán)中斷

沒有觸發(fā)循環(huán)繼續(xù)的條件并不是停止循環(huán)的唯一方法。例如，要求找到一個大于 100 且可被 9 整除的數(shù)。

for (let num = 100; ; num = num + 1) {
    if (num % 9 === 0) {
        console.log(num);
        break;
    }
}

請注意，沒有決定循環(huán)是否繼續(xù)的表達式。相反，有一個 if 語句，里面有一個 break 關(guān)鍵字，如果它被執(zhí)行，它將跳出循環(huán)。