1. 引言

map() 方法是 JavaScript 數(shù)組的一部分，用于遍歷數(shù)組并返回一個(gè)新數(shù)組。與 forEach() 方法不同，map() 會(huì)對(duì)每個(gè)元素執(zhí)行回調(diào)函數(shù)并生成一個(gè)新的數(shù)組，而不會(huì)修改原始數(shù)組。這使得 map() 在許多情況下成為了更加合適的選擇，尤其是在需要對(duì)數(shù)組元素進(jìn)行轉(zhuǎn)換或映射時(shí)。

2. map() 方法基本使用

map() 方法概述

map() 方法通過(guò)提供的回調(diào)函數(shù)對(duì)每個(gè)數(shù)組元素執(zhí)行操作，并返回一個(gè)新的數(shù)組。原始數(shù)組不會(huì)受到影響。

語(yǔ)法

let newArray = array.map(function(currentValue, index, array) {
  // 返回新的值
});

• currentValue：當(dāng)前元素的值
• index：當(dāng)前元素的索引（可選）
• array：原數(shù)組本身（可選）

示例：基本的 map() 使用

let arr = [1, 2, 3, 4, 5];

let squaredArr = arr.map(function(value) {
  return value * value;
});

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

在上面的例子中，map() 方法遍歷數(shù)組 arr，對(duì)每個(gè)元素進(jìn)行平方運(yùn)算，并返回一個(gè)新的數(shù)組 squaredArr，其中包含了平方后的值。

3. 實(shí)際項(xiàng)目中的 map() 使用示例

示例 1：商品價(jià)格打折

假設(shè)我們有一個(gè)包含商品價(jià)格的數(shù)組，想要對(duì)所有商品進(jìn)行打折處理，返回一個(gè)新的包含打折后價(jià)格的數(shù)組。

let products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Phone', price: 500 },
  { name: 'Tablet', price: 700 }
];

let discountedProducts = products.map(product => {
  return { 
    name: product.name, 
    price: product.price * 0.9  // 打九折
  };
});

console.log(discountedProducts);

輸出：

[
  { name: 'Laptop', price: 900 },
  { name: 'Phone', price: 450 },
  { name: 'Tablet', price: 630 }
]

在這個(gè)示例中，map() 方法遍歷了 products 數(shù)組，對(duì)每個(gè)商品的價(jià)格進(jìn)行了打折，并返回了一個(gè)新數(shù)組 discountedProducts，其中包含了打折后的商品信息。

示例 2：提取用戶(hù)數(shù)據(jù)

假設(shè)我們有一個(gè)用戶(hù)對(duì)象數(shù)組，我們只想提取用戶(hù)的姓名和年齡，返回一個(gè)新的包含這些信息的數(shù)組。

let users = [
  { name: 'Alice', age: 25, country: 'USA' },
  { name: 'Bob', age: 30, country: 'Canada' },
  { name: 'Charlie', age: 22, country: 'UK' }
];

let userNamesAndAges = users.map(user => {
  return { name: user.name, age: user.age };
});

console.log(userNamesAndAges);

輸出：

[
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 22 }
]

在這個(gè)例子中，map() 方法用于提取用戶(hù)對(duì)象數(shù)組中的部分?jǐn)?shù)據(jù)（姓名和年齡），并生成一個(gè)包含新數(shù)據(jù)的數(shù)組。

示例 3：將數(shù)據(jù)轉(zhuǎn)換為另一種格式

假設(shè)我們有一組日期字符串，需要將這些日期格式轉(zhuǎn)換為 ISO 格式。

let dates = ['2025-01-16', '2025-01-17', '2025-01-18'];

let isoDates = dates.map(date => {
  return new Date(date).toISOString();  // 轉(zhuǎn)換為 ISO 格式
});

console.log(isoDates);

輸出：

[
  '2025-01-16T00:00:00.000Z',
  '2025-01-17T00:00:00.000Z',
  '2025-01-18T00:00:00.000Z'
]

在這個(gè)示例中，map() 方法將日期字符串?dāng)?shù)組 dates 中的每個(gè)日期轉(zhuǎn)換為 ISO 格式，并返回一個(gè)新數(shù)組 isoDates，其中包含格式化后的日期。

4. map() 與其他數(shù)組方法的比較

與 forEach 的比較

forEach 和 map() 都是用來(lái)遍歷數(shù)組的，但它們有一些關(guān)鍵的區(qū)別：

• forEach 用于執(zhí)行副作用（例如打印日志、修改原始數(shù)組等），而 map() 用于生成一個(gè)新的數(shù)組。
• map() 會(huì)返回一個(gè)新數(shù)組，而 forEach 不會(huì)。
• map() 是鏈?zhǔn)秸{(diào)用的理想選擇，而 forEach 只能用于執(zhí)行單次操作。

示例對(duì)比：

// 使用 forEach 打印每個(gè)值
let arr = [1, 2, 3, 4];
arr.forEach(value => console.log(value));  // 輸出：1 2 3 4

// 使用 map 生成新數(shù)組
let newArr = arr.map(value => value * 2);
console.log(newArr);  // 輸出：[2, 4, 6, 8]

與 filter() 的比較

map() 和 filter() 都用于遍歷數(shù)組，但它們的目的不同：

• map() 用于生成一個(gè)包含轉(zhuǎn)換后元素的新數(shù)組。
• filter() 用于返回一個(gè)新的數(shù)組，其中只包含滿(mǎn)足特定條件的元素。

map() 示例：

let arr = [1, 2, 3, 4];
let mappedArr = arr.map(value => value * 2);
console.log(mappedArr);  // 輸出：[2, 4, 6, 8]

filter() 示例：

let arr = [1, 2, 3, 4];
let filteredArr = arr.filter(value => value > 2);
console.log(filteredArr);  // 輸出：[3, 4]

與 reduce() 的比較

reduce() 方法用于將數(shù)組中的所有元素累加成一個(gè)值，而 map() 用于將每個(gè)元素轉(zhuǎn)換為新數(shù)組的元素。

reduce() 示例：

let arr = [1, 2, 3, 4];
let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);  // 輸出：10

5. 總結(jié)與最佳實(shí)踐

• 使用場(chǎng)景：map() 非常適用于需要生成新數(shù)組的場(chǎng)景，尤其是當(dāng)你需要對(duì)數(shù)組元素進(jìn)行轉(zhuǎn)換或提取數(shù)據(jù)時(shí)。
• 不可變性：map() 不會(huì)修改原數(shù)組，它返回一個(gè)新的數(shù)組，因此非常適合不希望改變?cè)瓟?shù)據(jù)的場(chǎng)景。
• 鏈?zhǔn)秸{(diào)用：map() 允許鏈?zhǔn)秸{(diào)用，通常與 filter()、reduce() 等方法一起使用，形成強(qiáng)大的數(shù)組處理鏈。
• 性能：雖然 map() 在性能上通常不錯(cuò)，但對(duì)于極大的數(shù)據(jù)集，考慮到性能優(yōu)化，可能需要選擇更高效的算法或避免不必要的數(shù)組復(fù)制。

通過(guò)掌握 map() 方法的使用，可以大大提高代碼的簡(jiǎn)潔性和可讀性，特別是在進(jìn)行數(shù)據(jù)轉(zhuǎn)換或映射時(shí)。

以上就是JavaScript使用map()方法遍歷數(shù)組并返回新數(shù)組的代碼示例的詳細(xì)內(nèi)容，更多關(guān)于JavaScript map()遍歷數(shù)組并返回新數(shù)組的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論