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中文网其他相关文章！