JavaScript 特殊事項

本章節簡要回顧我們到目前為止所學到的 JavaScript 功能，特別注意細微之處。

程式碼結構

陳述式以分號分隔

alert('Hello'); alert('World');

通常，換行符號也會被視為分隔符號，因此也可以使用

alert('Hello')
alert('World')

這稱為「自動分號插入」。有時它不起作用，例如

alert("There will be an error after this message")

[1, 2].forEach(alert)

大多數程式碼風格指南都同意我們應該在每個陳述式後加上分號。

在程式碼區塊 {...} 和包含它們的語法結構（例如迴圈）之後不需要分號

          function f() {
  // no semicolon needed after function declaration
}

for(;;) {
  // no semicolon needed after the loop
}
        

…但即使我們可以在某處放置「額外」的分號，那也不是錯誤。它將被忽略。

更多資訊：程式碼結構。

嚴格模式

若要完全啟用現代 JavaScript 的所有功能，我們應以 "use strict" 開始腳本。

          'use strict';

...

指令必須置於腳本最上方或函數主體的開頭。

沒有 "use strict"，一切都還能運作，但有些功能會以舊式、「相容」的方式運作。我們通常偏好現代的運作方式。

語言的一些現代功能（例如我們將來會學習的類別）會隱式啟用嚴格模式。

更多資訊：現代模式「use strict」。

變數

可以使用以下方式宣告

let
const（常數，無法變更）
var（舊式，稍後會說明）

變數名稱可以包含

字母和數字，但第一個字元不能是數字。
字元 $ 和 _ 很正常，與字母同等。
非拉丁字母和象形文字也允許，但通常不使用。

變數是動態型別的。它們可以儲存任何值

          let x = 5;
x = "John";
        

有 8 種資料型別

number 用於浮點數和整數，
bigint 用於任意長度的整數，
string 用於字串，
boolean 用於邏輯值：true/false，
null – 具有單一值 null 的型別，表示「空」或「不存在」，
undefined – 具有單一值 undefined 的型別，表示「未指定」，
object 和 symbol – 用於複雜的資料結構和唯一識別碼，我們尚未學習。

typeof 算子會傳回值的型別，但有兩個例外

          typeof null == "object" // error in the language
typeof function(){} == "function" // functions are treated specially
        

更多資訊：變數和資料型別。

互動

我們使用瀏覽器作為工作環境，因此基本的 UI 功能將是

prompt(question, [default]): 詢問 question，並傳回訪客輸入的內容，如果他們按「取消」，則傳回 null。
confirm(question): 詢問 question 並建議在確定和取消之間選擇。選擇會以 true/false 傳回。
alert(message): 輸出 message。

所有這些函數都是模態函數，它們會暫停程式碼執行，並防止訪客在回答問題之前與網頁互動。

例如

let userName = prompt("Your name?", "Alice");
let isTeaWanted = confirm("Do you want some tea?");

alert( "Visitor: " + userName ); // Alice
alert( "Tea wanted: " + isTeaWanted ); // true

更多資訊：互動：alert、prompt、confirm。

運算子

JavaScript 支援以下運算子

算術

一般：* + - /，還有用於餘數的 % 和用於次方的 **。

二元加號 + 會串接字串。如果任一運算元是字串，另一個運算元也會轉換為字串

alert( '1' + 2 ); // '12', string
alert( 1 + '2' ); // '12', string

賦值

有一個簡單的賦值：a = b，以及像 a *= 2 這樣的組合賦值。

位元

位元運算子在最低位元層級使用 32 位元整數：在需要時，請參閱文件。

條件

唯一具有三個參數的運算子：cond ? resultA : resultB。如果 cond 為真，則傳回 resultA，否則傳回 resultB。

邏輯運算子

邏輯 AND && 和 OR || 會執行短路評估，然後傳回它停止運算的值（不一定為 true/false）。邏輯 NOT ! 會將運算元轉換為布林型別，並傳回相反的值。

空值合併運算子

?? 運算子提供一種從變數清單中選擇已定義值的方法。a ?? b 的結果為 a，除非它為 null/undefined，則為 b。

比較

不同型別值的相等性檢查 == 會將它們轉換為數字（除了彼此相等且不與其他任何東西相等的 null 和 undefined），因此這些是相等的

alert( 0 == false ); // true
alert( 0 == '' ); // true

其他比較也會轉換為數字。

嚴格相等性運算子 === 不會進行轉換：不同的型別對它來說永遠表示不同的值。

null 和 undefined 值很特別：它們彼此 == 相等，且不與其他任何東西相等。

大於/小於比較會逐字元比較字串，其他型別會轉換為數字。

其他運算子

還有其他幾個運算子，例如逗號運算子。

更多資訊：基本運算子、數學、比較、邏輯運算子、空值合併運算子 '??'。

迴圈

我們介紹了 3 種類型的迴圈

          // 1
while (condition) {
  ...
}

// 2
do {
  ...
} while (condition);

// 3
for(let i = 0; i < 10; i++) {
  ...
}
        

在 for(let...) 迴圈中宣告的變數只能在迴圈內部使用。但我們也可以省略 let 並重複使用現有的變數。
指令 break/continue 允許退出整個迴圈/目前的迭代。使用標籤來中斷巢狀迴圈。

詳細資訊：迴圈：while 和 for。

稍後我們將研究更多用於處理物件的迴圈型別。

「switch」結構

「switch」結構可以取代多個 if 檢查。它使用 ===（嚴格相等性）進行比較。

例如

let age = prompt('Your age?', 18);

switch (age) {
  case 18:
    alert("Won't work"); // the result of prompt is a string, not a number
    break;

  case "18":
    alert("This works!");
    break;

  default:
    alert("Any value not equal to one above");
}

詳細資訊：「switch」陳述式。

函數

我們介紹了在 JavaScript 中建立函數的三種方法

函數宣告：在主程式碼流程中的函數

          function sum(a, b) {
  let result = a + b;

  return result;
}
        

函數表達式：在表達式背景中的函數

          let sum = function(a, b) {
  let result = a + b;

  return result;
};
        

箭頭函數

          // expression on the right side
let sum = (a, b) => a + b;

// or multi-line syntax with { ... }, need return here:
let sum = (a, b) => {
  // ...
  return a + b;
}

// without arguments
let sayHi = () => alert("Hello");

// with a single argument
let double = n => n * 2;
        

函數可以有局部變數：在函數主體或參數清單中宣告的變數。此類變數僅在函數內部可見。
參數可以有預設值：function sum(a = 1, b = 2) {...}。
函數總是會傳回某個東西。如果沒有 return 陳述式，則結果為 undefined。

詳細資訊：請參閱函數、箭頭函數基礎。

程式碼結構

嚴格模式

變數

互動

運算子

迴圈

「switch」結構

函數

更多內容即將推出

留言

章節

課程導覽