技術文章 » 【技術積累】JavaScript中的基礎語法【三】

【技術積累】JavaScript中的基礎語法【三】

2023-07-17 12:01:54

JavaScript的條件結構

JavaScript中的條件結構主要包括if語句、if-else語句、if-else if語句和switch語句。這些條件結構用於根據不同的條件執行不同的程式碼塊。

if語句

if語句用於在滿足條件時執行一段程式碼塊。語法如下：

if (condition) {
  // code to be executed if condition is true
}

範例程式碼：

let num = 10;
if (num > 0) {
  console.log("Number is positive");
}

解釋：如果變數num的值大於0，則列印"Number is positive"。

if-else語句

if-else語句用於在滿足條件時執行一個程式碼塊，否則執行另一個程式碼塊。語法如下：

if (condition) {
  // code to be executed if condition is true
} else {
  // code to be executed if condition is false
}

範例程式碼：

let num = -5;
if (num > 0) {
  console.log("Number is positive");
} else {
  console.log("Number is negative");
}

解釋：如果變數num的值大於0，則列印"Number is positive"，否則列印"Number is negative"。

if-else if語句

if-else if語句用於在滿足多個條件時執行不同的程式碼塊。語法如下：

if (condition1) {
  // code to be executed if condition1 is true
} else if (condition2) {
  // code to be executed if condition2 is true
} else {
  // code to be executed if none of the conditions are true
}

範例程式碼：

let num = 0;
if (num > 0) {
  console.log("Number is positive");
} else if (num < 0) {
  console.log("Number is negative");
} else {
  console.log("Number is zero");
}

解釋：如果變數num的值大於0，則列印"Number is positive"；如果變數num的值小於0，則列印"Number is negative"；否則列印"Number is zero"。

switch語句

switch語句用於根據不同的條件執行不同的程式碼塊。語法如下：

switch (expression) {
  case value1:
    // code to be executed if expression matches value1
    break;
  case value2:
    // code to be executed if expression matches value2
    break;
  default:
    // code to be executed if expression doesn't match any value
}

範例程式碼：

let day = 3;
switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  default:
    console.log("Other day");
}

解釋：根據變數day的值，列印相應的星期幾。

以上是JavaScript中常用的條件結構，根據不同的需求選擇合適的條件結構來編寫程式碼。

JavaScript的迴圈結構

在JavaScript中，迴圈結構用於重複執行一段程式碼，直到滿足特定條件為止。JavaScript提供了多種迴圈結構，包括for迴圈、while迴圈和do-while迴圈。

for迴圈

for迴圈用於重複執行一段程式碼，可以指定迴圈的起始條件、終止條件和每次迭代的步長。

案例：計算1到10的和。

let sum = 0;
for (let i = 1; i <= 10; i++) {
  sum += i;
}
console.log(sum); // 輸出55

解釋：在這個例子中，我們使用for迴圈從1到10迭代，每次迭代將當前的i值加到sum變數中。最後，我們輸出sum的值，得到1到10的和。

while迴圈

while迴圈用於在滿足特定條件時重複執行一段程式碼。

案例：計算1到10的和。

let sum = 0;
let i = 1;
while (i <= 10) {
  sum += i;
  i++;
}
console.log(sum); // 輸出55

解釋：在這個例子中，我們使用while迴圈來重複執行程式碼塊，直到i的值大於10。在每次迭代中，我們將當前的i值加到sum變數中，並遞增i的值。

do-while迴圈

do-while迴圈與while迴圈類似，但它會先執行一次程式碼塊，然後再檢查條件是否滿足。

案例：計算1到10的和。

let sum = 0;
let i = 1;
do {
  sum += i;
  i++;
} while (i <= 10);
console.log(sum); // 輸出55

解釋：在這個例子中，我們使用do-while迴圈來重複執行程式碼塊，直到i的值大於10。在每次迭代中，我們將當前的i值加到sum變數中，並遞增i的值。由於do-while迴圈先執行一次程式碼塊，所以即使條件不滿足，程式碼塊也會執行一次。

以上是JavaScript中常用的迴圈結構及其案例。這些迴圈結構可以根據具體的需求選擇使用，用於重複執行一段程式碼，提高程式碼的複用性和效率。

JavaScript的迴圈控制

在JavaScript中，迴圈控制用於在迴圈執行過程中改變回圈的行為，包括跳出迴圈、跳過當前迭代和終止整個指令碼的執行。

break語句

break語句用於跳出迴圈，即使迴圈條件仍然滿足。

案例：找到陣列中的第一個負數。

const numbers = [1, 2, -3, 4, 5];
let firstNegative = null;

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] < 0) {
    firstNegative = numbers[i];
    break;
  }
}

console.log(firstNegative); // 輸出-3

解釋：在這個例子中，我們使用for迴圈遍歷陣列numbers。當找到第一個負數時，我們使用break語句跳出迴圈，並將該負數賦值給firstNegative變數。

continue語句

continue語句用於跳過當前迭代，繼續執行下一次迭代。

案例：計算陣列中正數的和。

const numbers = [1, -2, 3, -4, 5];
let sum = 0;

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] < 0) {
    continue;
  }
  sum += numbers[i];
}

console.log(sum); // 輸出9

解釋：在這個例子中，我們使用for迴圈遍歷陣列numbers。當遇到負數時，我們使用continue語句跳過當前迭代，繼續執行下一次迭代。只有當數位為正數時，我們將其加到sum變數中。

return語句

return語句用於終止整個指令碼的執行，不僅僅是迴圈。

案例：找到陣列中的第一個負數，並返回其索引。

function findFirstNegative(numbers) {
  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] < 0) {
      return i;
    }
  }
  return -1;
}

const numbers = [1, 2, -3, 4, 5];
const index = findFirstNegative(numbers);

console.log(index); // 輸出2

解釋：在這個例子中，我們定義了一個函數findFirstNegative，該函數使用for迴圈遍歷陣列numbers。當找到第一個負數時，我們使用return語句終止函數的執行，並返回負數的索引。如果沒有找到負數，則返回-1。

以上是JavaScript中常用的迴圈控制語句及其案例。這些迴圈控制語句可以根據具體的需求選擇使用，用於改變回圈的行為，提供更靈活的控制和處理方式。

JavaScript執行上下文作用域

執行上下文是JavaScript中的一個概念，它定義了變數和函數的可存取性以及程式碼的執行順序。每當JavaScript程式碼執行時，都會建立一個執行上下文，並將其新增到執行上下文棧中。

執行上下文作用域是指在當前執行上下文中可存取的變數、函數和物件。JavaScript中有三種型別的執行上下文作用域：全域性作用域、函數作用域和塊級作用域。

全域性作用域

全域性作用域是在程式碼中沒有巢狀在任何函數或塊級作用域中的部分。在全域性作用域中宣告的變數和函數可以在程式碼的任何地方存取。

案例：在全域性作用域中宣告和存取變數。

let message = "Hello, world!";

function showMessage() {
  console.log(message);
}

showMessage(); // 輸出Hello, world!

解釋：在這個例子中，變數message在全域性作用域中宣告，並且可以在函數showMessage中存取和使用。

函數作用域

函數作用域是在函數內部宣告的變數和函數所在的作用域。在函數作用域中宣告的變數和函數只能在函數內部存取。

案例：在函數作用域中宣告和存取變數。

function showMessage() {
  let message = "Hello, world!";
  console.log(message);
}

showMessage(); // 輸出Hello, world!
console.log(message); // 報錯，message未定義

解釋：在這個例子中，變數message在函數作用域中宣告，並且只能在函數內部存取和使用。在函數外部嘗試存取message變數會導致錯誤。

塊級作用域

塊級作用域是在程式碼塊（例如if語句、for迴圈等）內部宣告的變數和函數所在的作用域。在塊級作用域中宣告的變數和函數只能在該程式碼塊內部存取。

案例：在塊級作用域中宣告和存取變數。

if (true) {
  let message = "Hello, world!";
  console.log(message);
}

console.log(message); // 報錯，message未定義

解釋：在這個例子中，變數message在塊級作用域中宣告，並且只能在if語句的程式碼塊內部存取和使用。在程式碼塊外部嘗試存取message變數會導致錯誤。

執行上下文作用域決定了變數和函數的可存取性。瞭解不同型別的執行上下文作用域可以幫助我們編寫更具可讀性和可維護性的程式碼，並避免變數衝突和作用域汙染的問題。

async和defer

async和defer是用於控制指令碼載入和執行的屬性，它們通常用於在HTML檔案中引入外部JavaScript檔案。

async屬性

async屬性用於非同步載入指令碼檔案。當瀏覽器遇到帶有async屬性的指令碼標籤時，它會立即開始下載指令碼檔案，並在下載完成後立即執行指令碼，而不會等待其他資源的載入和解析。

案例：使用async屬性非同步載入指令碼檔案。

<!DOCTYPE html>
<html>
<head>
  <title>Async Example</title>
</head>
<body>
  <script async src="script.js"></script>
  <h1>Hello, world!</h1>
</body>
</html>

解釋：在這個例子中，我們使用async屬性在HTML檔案中非同步載入指令碼檔案script.js。瀏覽器會立即開始下載指令碼檔案，而不會阻塞HTML檔案的解析和其他資源的載入。因此，頁面上的"h1"標籤會在指令碼載入和執行過程中顯示出來。

defer屬性

defer屬性用於延遲載入指令碼檔案。當瀏覽器遇到帶有defer屬性的指令碼標籤時，它會繼續解析HTML檔案，並在檔案解析完成後再按照順序執行延遲載入的指令碼檔案。

案例：使用defer屬性延遲載入指令碼檔案。

<!DOCTYPE html>
<html>
<head>
  <title>Defer Example</title>
</head>
<body>
  <script defer src="script.js"></script>
  <h1>Hello, world!</h1>
</body>
</html>

解釋：在這個例子中，我們使用defer屬性在HTML檔案中延遲載入指令碼檔案script.js。瀏覽器會繼續解析HTML檔案，並在檔案解析完成後按照順序執行延遲載入的指令碼檔案。因此，頁面上的"h1"標籤會在指令碼載入和執行完成後顯示出來。

async和defer屬性都可以用於優化指令碼載入和執行的順序，提高頁面的效能和使用者體驗。它們的選擇取決於指令碼的依賴關係和執行時機的要求。

JavaScript閉包

JavaScript閉包指的是函數建立時的作用域仍然存在於函數呼叫之後的能力，即函數可以存取它所建立的作用域內的變數和函數，即使這個作用域已經被銷燬了。

閉包是由函數和函數內部狀態（即函數執行時能存取的變數）構成的組合體。在JavaScript中，只要有內部函數，就有閉包的產生。

閉包的具體作用包括：

  1. 保護變數不受全域性汙染。使用閉包可以將變數封裝在函數內部，避免其汙染全域性變數。
  2. 記錄函數執行時的狀態。通過閉包，可以記錄函數執行時的狀態，這在事件函數和回撥函數中會有很大的作用。
  3. 延長區域性變數的生命週期。如果區域性變數在函數執行結束後就被銷燬，但是如果其被閉包所參照，那麼這個變數將一直存在於記憶體中，不會被銷燬。

使用閉包時需要注意以下幾點：

  1. 閉包會佔用記憶體，過多的閉包可能會導致記憶體漏失，應該儘量避免使用過多的閉包。
  2. 閉包中的變數在被參照時必須已經存在，否則會出現undefined的情況。因此需要注意函數呼叫的順序。
  3. 閉包的作用域鏈不應該太長，否則會影響程式碼的效能。
function createCounter() {
  let count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  return increment;
}

const counter = createCounter();
counter(); // 輸出1
counter(); // 輸出2
counter(); // 輸出3

解釋：在這個例子中，我們定義了一個外部函數createCounter，該函數內部定義了一個變數count和一個內部函數increment。內部函數increment可以存取並修改外部函數作用域中的變數count。我們通過呼叫外部函數createCounter，將內部函數increment作為返回值返回，並將其賦值給變數counter。每次呼叫counter函數時，它都會存取並更新外部函數作用域中的count變數，並將其列印出來。

因此，通過使用閉包，可以實現記憶計數器的功能，不需要使用全域性變數或者類似的論壇限制方式。