JavaScript中map的用法示例詳解

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

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

簡介

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

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

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

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

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

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

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

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

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

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'對象
}, counter); // 將'counter'作為'thisArg'傳遞

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

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

這里有一些 map 的常見用法和示例：

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

你可以使用 map 來轉(zhuǎn)換數(shù)組中的每個元素。這可能包括改變元素的數(shù)據(jù)類型，或者根據(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. 提取對象數(shù)組的屬性

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

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 對數(shù)組的數(shù)據(jù)進行格式化，例如格式化日期或數(shù)字，或?qū)⑽淖中畔⑥D(zhuǎn)換成大寫或小寫。

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ū)設置不同而異)

4. 添加或修改對象屬性

使用 map 可以很容易地添加新的屬性或修改現(xiàn)有屬性到對象數(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)，這使得處理對象數(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 是一個非常靈活的方法，幾乎可以用在任何需要從一個數(shù)組生成一個新數(shù)組的場合。它尤其在數(shù)據(jù)處理和轉(zhuǎn)換時非常有用，能夠幫助你編寫簡潔和聲明式的代碼。