學習內容來源：JavaScript 陣列迭代

JavaScript 陣列迭代

注意：陣列迭代方法對每個陣列項進行操作。

Array.forEach()

forEach() 方法為每個陣列元素呼叫一次函式（回撥函式）。

回撥函式接受 3 個引數：

• 專案值
• 專案索引
• 陣列本身

例子：

// 這個例子將 txt 每次賦值為 txt + 專案值 + " * "， 得到 txt = "45 * 4 * 9 * 16 * 25 * "
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt = txt + value + " * "; 
}

// 如果回撥函式僅使用第一個引數（值）時，可以省略其他引數
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
  txt = txt + value + " * "; 
}
 

Array.map()

map() 方法通過對每個陣列元素執行函式來建立新陣列。
map() 方法不會對沒有值的陣列元素執行函式。
map() 方法不會更改原始陣列。

回撥函式有 3 個引數：

• 專案值
• 專案索引
• 陣列本身

例子：

// 這個例子將每個陣列值乘以2，得到 numbers2 = [90, 8, 18, 32, 50]
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

// 如果回撥函式僅使用第一個引數（值）時，可以省略其他引數
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}
 

Array.filter()

filter() 方法建立一個包含通過測試的陣列元素的新陣列。

回撥函式接受 3 個引數：

• 專案值
• 專案索引
• 陣列本身

例子：

// 這個例子將篩選出專案值大於 18 的元素，得到 over18 = [45, 25]
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

// 如果回撥函式僅使用第一個引數（值）時，可以省略其他引數
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
}
 

Array.reduce()

reduce() 方法在每個陣列元素上執行函式，以生成（減少它）單個值。
reduce() 方法在陣列中從左到右工作。
reduce() 方法不會減少原始陣列。

回撥函式接受 4 個引數：

• 總數（初始值/先前返回的值）
• 專案值
• 專案索引
• 陣列本身

例子：

// 這個例子將陣列的每個值相加，得到 sum = 99
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

// 上例並未使用 index 和 array 引數。可以將它改寫為
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}

// reduce() 方法能夠接受一個初始值，得到 sum = 199
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);

function myFunction(total, value) {
  return total + value;
}

補充：Array.reduceRight() 和 Array.reduce() 相似，區別在於 該方法在陣列中從右到左工作。

Array.every()

every() 方法檢查所有陣列值是否通過測試。

回撥函式接受 3 個引數：

• 專案值
• 專案索引
• 陣列本身

例子：

// 這個例子判斷陣列所有元素是不是都大於 18，的到 allOver18 = false
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

// 如果回撥函式僅使用第一個引數（值）時，可以省略其他引數
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

Array.some()

some() 方法檢查某些陣列值是否通過了測試。

回撥函式接受 3 個引數：

• 專案值
• 專案索引
• 陣列本身

例子：

// 這個例子判斷陣列中是否有元素大於 18，得到 someOver18 = true
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

// 如果回撥函式僅使用第一個引數（值）時，可以省略其他引數
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

function myFunction(value) {
  return value > 18;
}

Array.indexOf()

indexOf() 方法在陣列中搜索元素值並返回其位置（索引）。
如果未找到專案，Array.indexOf() 返回 -1。
如果專案多次出現，則返回第一次出現的位置。

此函式接受 2 個引數：

• 要檢索的專案
• 搜尋位置（可選引數，負值將從結尾開始的給定位置開始，並搜尋到結尾。）

例子：

// 這個例子查詢陣列中出現 "Apple" 的位置，陣列中出現了兩次 "Apple"，返回第一次出現的位置，得到 a = 0
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

// 給定搜尋位置，沒有找到得到 "Apple"，得到 a = -1
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple", -1);

補充：Array.lastIndexOf() 與 Array.indexOf() 類似，但是從陣列結尾開始搜尋。

Array.find()

find() 方法返回通過測試函式的第一個陣列元素的值。
沒有通過測試函式的話返回 undefined。

回撥函式接受 3 個引數：

• 專案值
• 專案索引
• 陣列本身

例子：

// 這個例子返回陣列中第一個大於 18 的元素，得到 first = 25
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

// 如果回撥函式僅使用第一個引數（值）時，可以省略其他引數
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value) {
  return value > 18;
}

// 這個例子返回陣列中第一個大於 30 的元素，沒有大於 30 的元素，得到 first = undefined
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value) {
  return value > 30;
}

Array.findIndex()

findIndex() 方法返回通過測試函式的第一個陣列元素的索引。
沒有通過測試函式的話返回 -1。

回撥函式接受 3 個引數：

• 專案值
• 專案索引
• 陣列本身

例子：

// 這個例子返回陣列中第一個大於 18 元素索引，得到 first = 3
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

// 如果回撥函式僅使用第一個引數（值）時，可以省略其他引數
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value) {
  return value > 18;
}

// 這個例子返回陣列中第一個大於 30 元素索引，沒有大於 30 的元素，得到 first = -1
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value) {
  return value > 30;
}