JavaScript – 數組 map() 方法

JavaScript 中的 Array.map() 方法用于對數組中的每個元素進行操作后，生成一個新數組。愛掏網 - it200.com這個新數組由原數組中的元素轉變而來，通常情況下轉變的形式為對元素執行某種函數操作后返回一個新的值。愛掏網 - it200.com

自 JavaScript ES6 版本以來，使用箭頭函數表達式使 map() 方法更加簡便易用。愛掏網 - it200.com下面我們來看一個例子：

// ES6 箭頭函數
let numbers = [2, 4, 6, 8, 10];
let doubles = numbers.map(num => num * 2);
console.log(doubles);  // [4, 8, 12, 16, 20]

在這個例子中，我們首先定義了一個數組 numbers，由 5 個偶數組成。愛掏網 - it200.com接下來，我們使用 map() 方法將每個元素取兩倍，并用變量 doubles 保存返回的新數組。愛掏網 - it200.com最后，使用 console.log() 打印這個新數組，輸出結果為 [4, 8, 12, 16, 20]。愛掏網 - it200.com

基本語法

map() 方法的基本語法如下：

array.map(func(currentValue, index, arr))

其中，

• array：必需。愛掏網 - it200.com要進行映射操作的數組對象。愛掏網 - it200.com
• func：必需。愛掏網 - it200.com該參數是函數，它執行有三個參數：currentValue，index 和 arr。愛掏網 - it200.com分別表示正在處理的當前元素的值，當前元素的索引和正在處理的原數組。愛掏網 - it200.com
• currentValue：必需。愛掏網 - it200.com當前元素的值。愛掏網 - it200.com
• index：可選。愛掏網 - it200.com當前元素的索引值。愛掏網 - it200.com
• arr：可選。愛掏網 - it200.com當前元素所在的原始數組。愛掏網 - it200.com

下面，我們通過一個完整的例子展示 map() 方法如何使用。愛掏網 - it200.com

// 聲明一個原始數組
let students = [
  { name: "Tom", age: 18 },
  { name: "Jerry", age: 20 },
  { name: "John", age: 25 },
  { name: "Alex", age: 28 }
];

// 使用 map() 方法生成一個新數組
let studentNames = students.map((item) => item.name);

// 打印新數組
console.log(studentNames); // ["Tom", "Jerry", "John", "Alex"]

在這個例子中，我們聲明了一個包含四個對象的數組 students，并使用 map() 方法將所有對象的 name 屬性映射到了一個新數組 studentNames 中。愛掏網 - it200.com最后，執行 console.log() 輸出結果。愛掏網 - it200.com

參數

map() 方法支持三個可選參數，分別是thisArg，arg 和 iterator。愛掏網 - it200.com

• thisArg：可選，指定調用 func 函數時的 this 值（即 this 關鍵字指向的對象）。愛掏網 - it200.com如果不指定，則默認為當前運行環境的全局對象（如瀏覽器環境下為 window 對象）。愛掏網 - it200.com
• arg：可選，在調用 func 函數時需要傳入的額外參數。愛掏網 - it200.com
• iterator：可選，用于替代默認的迭代器。愛掏網 - it200.com

示例

下面是 map() 方法的一些簡單的演示。愛掏網 - it200.com

將所有元素取平方

let numbers = [1, 2, 3, 4];

let squares = numbers.map((item) => item ** 2);

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

在這個例子中，我們定義了一個包含四個數字的數組 numbers，并使用箭頭函數將其每個值都取平方。愛掏網 - it200.com

數組去重復

let items = ["a", "b", "a", "c", "d", "e", "d", "f", "g", "c"];

let uniqueItems = items.filter((value, index, self) => {
  return self.indexOf(value) == index;
});

console.log(uniqueItems); // ["a", "b", "c", "d", "e", "f", "g"]

在這個例子中，我們定義了一個包含 10 個字符串元素的數組 items。愛掏網 - it200.com為了去掉其中的重復元素，我們使用了 filter() 方法并在其中嵌套了一個 indexOf() 函數。愛掏網 - it200.com由于 indexOf() 將返回第一個匹配到的元素的索引，因此我們將其與當前元素的索引進行比對，若相等則加入數組。愛掏網 - it200.com

字符串轉換為數字

let strings = ["123", "456", "789"];

let numbers = strings.map((item) => parseInt(item));

console.log(numbers); // [123, 456, 789]

在這個例子中，我們定義了一個包含 3 個字符串元素的數組 strings。愛掏網 - it200.com我們使用了 map() 方法將字符串類型的元素轉換為數字類型的元素，并將其保存到了新數組 numbers 中。愛掏網 - it200.com最終，我們輸出 numbers 數組的值。愛掏網 - it200.com

對象映射轉換

let products = [
  { name: "Apple", price: 1.99 },
  { name: "Banana", price: 2.99 },
  { name: "Orange", price: 2.49 }
];

let salePrices = products.map((item) => {
  return {
    name: item.name,
    salePrice: item.price * 0.8
  };
});

console.log(salePrices);

在這個例子中，我們定義了一個包含了三個對象的數組 products，每個對象都包含 name 和 price 兩個屬性。愛掏網 - it200.com我們使用了 map() 方法將每個對象中的 name 和 price 轉換為一個新數組 salePrices 中的 name 和 salePrice 屬性。愛掏網 - it200.com其中 salePrice 表示打折后的價格，即原價格的 0.8 倍。愛掏網 - it200.com最終，我們輸出了 salePrices 數組的值。愛掏網 - it200.com

結論

本文介紹了 JavaScript 中的 map() 方法，并給出了一些基本的語法和示例。愛掏網 - it200.com還給出了針對數組的不同操作的其他代碼示例。愛掏網 - it200.com在實際應用中，使用 map() 方法可以使代碼更簡潔，更易于維護。愛掏網 - it200.com在實際開發中，我們建議您多嘗試一些新的操作或使用原生代碼和庫來實現更多的功能。愛掏網 - it200.com