CodeGym /課程 /Frontend SELF TW /遍歷陣列的方法

遍歷陣列的方法

Frontend SELF TW
等級 38, 課堂 1
開放

8.1 forEach() 方法

JavaScript 中的陣列遍歷方法提供了強大的工具來操作陣列,允許對其元素執行各種操作。在這個主題中,我們將討論主要的遍歷方法,包括 forEach(), map(), filter(), reduce(), some(), every(), find(), 和 findIndex()

forEach() 方法對陣列的每個元素執行一次指定的函數。這個方法不會返回新的陣列,也不能中斷。

語法:

    
      array.forEach(function(element, index, array) {
        // 函數體
      });
    
  

範例:

forEach() 方法遍歷 numbers[] 陣列的每一個元素,並打印其索引和值。

JavaScript
    
      const numbers = [1, 2, 3, 4, 5];

      numbers.forEach((number, index) => {
          console.log(`Index: ${index}, Value: ${number}`);
      });

      // 輸出:
      // Index: 0, Value: 1
      // Index: 1, Value: 2
      // Index: 2, Value: 3
      // Index: 3, Value: 4
      // Index: 4, Value: 5
    
  

8.2 map() 方法

map() 方法創建一個新陣列,其結果是將函數對陣列中的每一個元素調用的結果。

語法:

    
      const newArray = array.map(function(element, index, array) {
        // 函數體
        return 新值;
      });
    
  

轉換函數也可以使用箭頭函數語法來編寫:

    
      const newArray = array.map((element, index, array) => 新值);
    
  

範例:

map() 方法創建了一個新陣列 squared[],其中包含 numbers[] 陣列中數字的平方。

JavaScript
    
      const numbers = [1, 2, 3, 4, 5];
      const squared = numbers.map(number => number * number);

      console.log(squared); // [1, 4, 9, 16, 25]
    
  

8.3 filter() 方法

filter() 方法創建一個新陣列,其中包含通過在傳遞的函數中指定的測試的所有元素。

    
      const newArray = array.filter(function(element, index, array) {
        // 函數體
        return 條件;
      });
    
  

篩選函數也可以使用箭頭函數語法來編寫:

    
      const newArray = array.filter((element, index, array) => 條件);
    
  

範例:

filter() 方法創建了一個新陣列 evenNumbers[],其中只包含 numbers[] 陣列中的偶數。

JavaScript
    
      const numbers = [1, 2, 3, 4, 5];
      const evenNumbers = numbers.filter(number => number % 2 === 0);

      console.log(evenNumbers); // [2, 4]
    
  

8.4 reduce() 方法

reduce() 方法對累加器和陣列中的每一個元素(從左到右)應用一個函數,將其減少為單一的值。

語法:

    
      const result = array.reduce(function(accumulator, current, index, array) {
        // 函數體
        return 新的累加器值;
      }, initialValue);
    
  

累加函數也可以使用箭頭函數語法來編寫:

    
      const result = array.reduce((accumulator, current, index, array) =>
        新的值, initialValue
      );
    
  

範例:

reduce() 方法將 numbers[] 陣列壓縮成單一的值 sum,通過將所有元素相加。

JavaScript
    
      const numbers = [1, 2, 3, 4, 5];
      const sum = numbers.reduce((acc, number) => acc + number, 0);

      console.log(sum); // 15
    
  

8.5 some() 方法

some() 方法檢查是否至少一個 陣列元素滿足由提供的函數指定的條件。返回 truefalse

語法:

    
      const result = array.some(function(element, index, array) {
        // 函數體
        return 條件;
      });
    
  

檢查函數也可以使用箭頭函數語法來編寫:

    
      const result = array.some((element, index, array) => 條件);
    
  

範例:

some() 方法檢查 numbers[] 陣列中是否至少有一個偶數,並返回 true

JavaScript
    
      const numbers = [1, 2, 3, 4, 5];
      const hasEvenNumber = numbers.some(number => number % 2 === 0);

      console.log(hasEvenNumber); // true
    
  

8.6 every() 方法

every() 方法檢查陣列中的所有元素是否滿足由提供的函數指定的條件。返回 truefalse

語法:

    
      const result = array.every(function(element, index, array) {
        // 函數體
        return 條件;
      });
    
  

檢查函數也可以使用箭頭函數語法來編寫:

    
      const result = array.every((element, index, array) => 條件);
    
  

範例:

every() 方法檢查 numbers[] 陣列的所有元素是否都是正數,並返回 true

JavaScript
    
      const numbers = [1, 2, 3, 4, 5];
      const allPositive = numbers.every(number => number > 0);

      console.log(allPositive); // true
    
  

8.7 find() 方法

find() 方法返回第一個陣列元素,該元素滿足由提供的函數指定的條件。如果沒有元素滿足條件,則返回 undefined

語法:

    
      const result = array.find(function(element, index, array) {
        // 函數體
        return 條件;
      });
    
  

檢查函數也可以使用箭頭函數語法來編寫:

    
      const result = array.find((element, index, array) => 條件);
    
  

範例:

find() 方法返回 numbers[] 陣列中的第一個偶數。

JavaScript
    
      const numbers = [1, 2, 3, 4, 5];
      const firstEven = numbers.find(number => number % 2 === 0);

      console.log(firstEven); // 2
    
  

8.8 findIndex() 方法

findIndex() 方法返回第一個陣列元素的索引,該元素滿足由提供的函數指定的條件。如果沒有元素滿足條件,則返回 -1

語法:

    
      const result = array.findIndex(function(element, index, array) {
        // 函數體
        return 條件;
      });
    
  

檢查函數也可以使用箭頭函數語法來編寫:

    
      const result = array.findIndex((element, index, array) => 條件);
    
  

範例:

findIndex() 方法返回 numbers[] 陣列中第一個偶數的索引。

JavaScript
    
      const numbers = [1, 2, 3, 4, 5];
      const firstEvenIndex = numbers.findIndex(number => number % 2 === 0);

      console.log(firstEvenIndex); // 1
    
  
1
任務
Frontend SELF TW, 等級 38, 課堂 1
上鎖
學生的信息
學生的信息
1
任務
Frontend SELF TW, 等級 38, 課堂 1
上鎖
數字轉換
數字轉換
留言
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION