JavaScript 陣列：地圖

Map 函數：一對一資料轉換

有時需要修改資料以傳回其一部分或執行一致的操作，這就是 映射。

方法	返回值	一对一	对所有元素运行
.map((value, index, array) => *)	数组	是	是

每當需要為每個輸入產生一個輸出時，map 通常是首選方法。它接受一個 映射 函數，該函數對每個記錄進行操作。映射函數傳回的值將出現在新數組中，其位置與原始值相同。

從 for 迴圈到 .map()

.map() 與基本的 for 迴圈完美匹配。

例如，需要將以下數組中的所有元素轉換為大寫字母：

const data = ['a', 'b', 'c', 'd'];

以下是幾種實作方式：

// 旧的命令式方法 - for 循环
function mapToUpper(data) {
  const newData = new Array(data.length);

  for (let i = 0; i < data.length; i++) {
    newData[i] = data[i].toUpperCase();
  }

  return newData;
}


// 新的命令式方法 - for...of 循环
function mapToUpper(data) {
  const newData = [];

  for (let value of data) {
    newData.push(value.toUpperCase());
  }

  return newData;
}


// 新的声明式方法 - .map()
const mapToUpper = (data) => data.map(value => value.toUpperCase());

一些變體，例如 `const newData = new Array(data.length)` 與 `const newData = []`，並非由不同的循環類型強制要求，而是代表了一些歷史上的編碼風格差異。

用例

資料轉換

`.map()` 的常見用途包括從物件中取得值或對資料執行一致的變更或 *轉換*。

通常需要從每個較大的記錄中獲取一條資訊。 `map` 正是為此而設計的。

const data = [{
  name: 'Alec Berg',
  roles: ['Creator', 'Executive Producer'],
}, {
  name: 'Bill Hader',
  roles: ['Creator', 'Executive Producer', 'Actor', 'Director'],
}];

// 只需要姓名
data.map((entry) => entry.name);
// [ 'Alec Berg', 'Bill Hader' ]

如果需要對訂單提供員工折扣，`map` 也能做到！

const cart = [{
  itemId: 12345,
  name: 'shoes',
  price: 70.00,
},{
  itemId: 54321,
  name: 'shirt',
  price: 15.25,
}];

// 应用折扣
const applyDiscount = (discountPercent, order) => {
  // 首先，获取“剩余”金额。
  // 如果折扣为 10%，则乘数为 0.9
  const multiplier = 1 - (discountPercent / 100);
  // 为每个项目创建一个新条目，其中包含折扣后的价格。
  // 我们将包含旧价格以供参考。
  return order.map((item) => ({
    ...item,
    price: item.price * multiplier,
    originalPrice: item.price,
  }));
};

此處未給出輸出結果。如果您想自己嘗試，建議將其貼上到瀏覽器控制台或 RunJS 等工具中，我使用該工具編寫和測試這些範例。

遞增

這是資料轉換的一個特殊版本。從「無資訊」開始，但擁有陣列此行為為每個條目提供了 *索引*，並且可以透過新增 1 將索引（從零開始）轉換為計數數字。

不需要使用 `value`（提供給 *映射* 函數的第一個參數），但必須為其提供一個名稱才能存取第二個參數。底線字元是一個有效的變數名，通常用於表示不需要的值，就像在本例中一樣。

const getCountingNumbers = (upTo) => new Array(upTo)
  // 新数组是“稀疏的”，需要值才能映射
  .fill('')
  // 第二个参数是数组索引。
  .map((_, index) => index + 1);

getCountingNumbers(5);
// [ 1, 2, 3, 4, 5 ]

雖然這是一個 `.map()` 的範例，但較新的函數也可以執行此操作：`Array.from()`。

const getCountingNumbers = (upTo) => Array.from(
  // 通过提供具有长度的对象来“伪造”类似数组的对象
  { length: upTo },
  // 使用与 .map() 相同的映射函数。
  (_, index) => index + 1
);

在使用 `.map()` 時討論另一種方法似乎很奇怪，但在幕後，`Array.from()` 至少會為上面的範例呼叫 `.map()`。

總結

希望這能幫助您了解如何使用 `.map()`。資料轉換是許多工具和產業的核心，因此 `.map()` 是許多專案中的關鍵部分。

如果您對 `.map()` 有任何問題或意見，我很樂意討論！

以上是JavaScript 陣列：地圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！