JavaScript .map() 方法：强大的数据转换工具13

簡介

在 JavaScript 中，.map() 方法是一個強大的工具，可以輕鬆地將陣列中的每一項轉換為新陣列中的一個新項。它接收一個函式作為參數，該函式對每個陣列元素執行映射操作。結果是一個包含轉換後元素的新陣列，而原始陣列保持不變。

語法

.map() 方法的語法如下：```
(callback(currentValue, index, array))
```
* currentValue：當前陣列元素。
* index：當前元素在陣列中的索引。
* array：原始陣列。

使用方法

要使用 .map() 方法，您需要傳遞一個函式作為參數。此函式必須返回您希望在轉換後陣列中看到的結果。例如，以下程式碼將陣列中的每個數字乘以 2：```
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = (number => number * 2);
```
doubledNumbers 現在是一個包含 [2, 4, 6, 8, 10] 的新陣列。

範例

以下是 .map() 方法的一些實際範例：* 將陣列中的字串轉換為大寫：
```
const names = ["john", "mary", "bob"];
const upperNames = (name => ());
```
* 將陣列中的物件轉換為陣列：
```
const objects = [{id: 1, name: "John"}, {id: 2, name: "Mary"}];
const namesArray = (object => );
```
* 從陣列中的物件中提取特定屬性：
```
const products = [{name: "iPhone", price: 1000}, {name: "iPad", price: 800}];
const prices = (product => );
```

陣列方法鏈

.map() 方法可以與其他陣列方法鏈接在一起，以執行更複雜的轉換。例如，以下程式碼將陣列中的數字乘以 2，然後將結果過濾掉大於 5 的數字：```
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const filteredNumbers = (number => number * 2).filter(number => number > 5);
```

優點* 執行陣列元素的快速且簡潔的轉換。
* 產生一個包含轉換後元素的新陣列，而不會修改原始陣列。
* 可以與其他陣列方法鏈接在一起以執行更複雜的操作。

缺點* 如果陣列很大，則映射操作可能很慢。
* 函式的回傳值必須與輸入值為同類型，否則映射操作將會失敗。

結論

JavaScript .map() 方法是一個強大的工具，可以用於快速、輕鬆地轉換陣列中的資料。它易於使用，並且可以與其他陣列方法鏈接在一起以執行更複雜的操作。通過了解如何使用 .map() 方法，您可以大幅簡化您的 JavaScript 程式碼。

2024-12-10

上一篇：JavaScript 计算：全面指南

下一篇：JavaScript 按钮：揭秘按钮功能和自定义技巧