快捷導(dǎo)航

JavaScript中map的用法示例詳解

更新時(shí)間：2024年12月26日 10:40:33 作者：楓葉原

這篇文章主要給大家介紹了關(guān)于JavaScript中map用法的相關(guān)資料,JavaScript的map方法用于對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)函數(shù),并返回一個(gè)新數(shù)組,它接受一個(gè)回調(diào)函數(shù)作為參數(shù),該函數(shù)可以訪問(wèn)當(dāng)前元素、索引和原始數(shù)組,需要的朋友可以參考下

簡(jiǎn)介

JavaScript 的 map 方法是數(shù)組的一個(gè)非常強(qiáng)大且常用的功能，它允許你對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)函數(shù)，并返回一個(gè)新數(shù)組，該數(shù)組是通過(guò)將原始數(shù)組中的每個(gè)元素通過(guò)這個(gè)函數(shù)處理后得到的結(jié)果。

map是數(shù)組的一個(gè)方法，它的基本語(yǔ)法如下：

let newArray = arr.map(function(element, index, array) {
    // 返回新數(shù)組的元素
}, thisArg);

element：當(dāng)前正在處理的數(shù)組元素。
index（可選）：當(dāng)前元素的索引。
array（可選）：原始數(shù)組的引用，可以在函數(shù)內(nèi)部訪問(wèn)完整的數(shù)組。
thisArg （可選）：執(zhí)行回調(diào)函數(shù)時(shí)使用的 this 值。

const numbers = [10, 20, 30, 40];

// 使用 element, index, 和 array 參數(shù)
const newArray = numbers.map(function(element, index, array) {
    console.log(`當(dāng)前正在處理的數(shù)組元素： ${element} 當(dāng)前元素的索引： ${index}, 原始數(shù)組的引用： ${array}`);
    return element / 10;
});

console.log(newArray); // 輸出: [1, 2, 3, 4]

在這個(gè)示例中，我們打印了正在處理的元素、它的索引以及整個(gè)數(shù)組，然后每個(gè)元素都除以 10 來(lái)創(chuàng)建一個(gè)新數(shù)組。

thisArg 參數(shù)的使用可以幫助我們?cè)诨卣{(diào)函數(shù)中設(shè)定 this 的值。這在你希望回調(diào)函數(shù)內(nèi)部訪問(wèn)外部對(duì)象的屬性時(shí)特別有用。

function Counter() {
  this.num = 2;
}

const counter = new Counter();

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

// 使用 thisArg 參數(shù)
const multiplied = numbers.map(function(element) {
    return element * this.num; // 'this'現(xiàn)在指的是'counter'對(duì)象
}, counter); // 將'counter'作為'thisArg'傳遞

console.log(multiplied); // 輸出: [2, 4, 6, 8]

在這個(gè)例子中， map 方法的 thisArg 參數(shù)被設(shè)置為 counter 對(duì)象，所以回調(diào)函數(shù)內(nèi)的 this.num 指向 counter.num。

這里有一些 map 的常見(jiàn)用法和示例：

1. 轉(zhuǎn)換數(shù)組元素

你可以使用 map 來(lái)轉(zhuǎn)換數(shù)組中的每個(gè)元素。這可能包括改變?cè)氐臄?shù)據(jù)類(lèi)型，或者根據(jù)現(xiàn)有的數(shù)據(jù)生成新的數(shù)據(jù)格式。

const numbers = [1, 2, 3, 4];
const squares = numbers.map(number => number * number);
console.log(squares); // 輸出: [1, 4, 9, 16]

2. 提取對(duì)象數(shù)組的屬性

如果你有一個(gè)對(duì)象數(shù)組，你可以使用 map 來(lái)創(chuàng)建一個(gè)新的數(shù)組，該數(shù)組只包含原數(shù)組對(duì)象的某些屬性。

const users = [
  { id: 1, name: 'Alice', age: 22 },
  { id: 2, name: 'Bob', age: 25 }
];
const names = users.map(user => user.name);
console.log(names); // 輸出: ['Alice', 'Bob']

3. 格式化數(shù)組數(shù)據(jù)

你可以使用 map 對(duì)數(shù)組的數(shù)據(jù)進(jìn)行格式化，例如格式化日期或數(shù)字，或?qū)⑽淖中畔⑥D(zhuǎn)換成大寫(xiě)或小寫(xiě)。

const dates = ['2021-01-01', '2021-12-31'];
const formattedDates = dates.map(date => new Date(date).toLocaleDateString('zh-CN'));
console.log(formattedDates); // 輸出: ['2021/1/1', '2021/12/31'] (輸出格式可能因地區(qū)設(shè)置不同而異)

4. 添加或修改對(duì)象屬性

使用 map 可以很容易地添加新的屬性或修改現(xiàn)有屬性到對(duì)象數(shù)組中。

const products = [
  { id: 1, price: 100 },
  { id: 2, price: 200 }
];
const productsWithTax = products.map(product => ({
  ...product,
  priceWithTax: product.price * 1.15
}));
console.log(productsWithTax);
// 輸出: [{ id: 1, price: 100, priceWithTax: 115 }, { id: 2, price: 200, priceWithTax: 230 }]

5. 結(jié)合解構(gòu)使用

你可以在 map 的回調(diào)函數(shù)中使用解構(gòu)，這使得處理對(duì)象數(shù)組中的元素更加直接和清晰。

const points = [
  { x: 10, y: 20 },
  { x: 20, y: 30 }
];
const shiftedPoints = points.map(({ x, y }) =&gt; ({ x: x + 5, y: y + 5 }));
console.log(shiftedPoints); // 輸出: [{ x: 15, y: 25 }, { x: 25, y: 35 }]

map 是一個(gè)非常靈活的方法，幾乎可以用在任何需要從一個(gè)數(shù)組生成一個(gè)新數(shù)組的場(chǎng)合。它尤其在數(shù)據(jù)處理和轉(zhuǎn)換時(shí)非常有用，能夠幫助你編寫(xiě)簡(jiǎn)潔和聲明式的代碼。