Map 函数：一对一数据转换
有时需要修改数据以返回其一部分或执行一致的操作，这就是 映射。
| 方法 | 返回值 | 一对一 | 对所有元素运行 |
|---|---|---|---|
| .map((value, index, array) => *) | 数组 | 是 | 是 |
每当需要为每个输入生成一个输出时，map 通常是首选方法。它接受一个 映射 函数，该函数对每个记录进行操作。映射函数返回的值将出现在新数组中，其位置与原始值相同。
从 for 循环到 .map()
.map() 与基本的 for 循环完美匹配。
例如，需要将以下数组中的所有元素转换为大写字母：
<code class="language-javascript">const data = ['a', 'b', 'c', 'd'];</code>
以下是几种实现方式：
<code class="language-javascript">// 旧的命令式方法 - 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());</code>一些变体，例如 `const newData = new Array(data.length)` 与 `const newData = []`，并非由不同的循环类型强制要求，而是代表了一些历史上的编码风格差异。
`.map()` 的常见用途包括从对象中获取值或对数据执行一致的更改或 *转换*。
通常需要从每个较大的记录中获取一条信息。`map` 正是为此而设计的。
<code class="language-javascript">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' ]</code>如果需要对订单提供员工折扣，`map` 也能做到！
<code class="language-javascript">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,
}));
};</code>此处未给出输出结果。如果您想自己尝试，建议将其粘贴到浏览器控制台或 RunJS 等工具中，我使用该工具编写和测试这些示例。
这是数据转换的一个特殊版本。从“无信息”开始，但拥有数组这一行为为每个条目提供了 *索引*，并且可以通过添加 1 将索引（从零开始）转换为计数数字。
不需要使用 `value`（提供给 *映射* 函数的第一个参数），但必须为其提供一个名称才能访问第二个参数。下划线字符是一个有效的变量名，通常用于表示不需要的值，就像在本例中一样。
<code class="language-javascript">const getCountingNumbers = (upTo) => new Array(upTo)
// 新数组是“稀疏的”，需要值才能映射
.fill('')
// 第二个参数是数组索引。
.map((_, index) => index + 1);
getCountingNumbers(5);
// [ 1, 2, 3, 4, 5 ]</code>虽然这是一个 `.map()` 的示例，但较新的函数也可以执行此操作：`Array.from()`。
<code class="language-javascript">const getCountingNumbers = (upTo) => Array.from(
// 通过提供具有长度的对象来“伪造”类似数组的对象
{ length: upTo },
// 使用与 .map() 相同的映射函数。
(_, index) => index + 1
);</code>在使用 `.map()` 时讨论另一种方法似乎很奇怪，但在幕后，`Array.from()` 至少会为上面的示例调用 `.map()`。
希望这能帮助您了解如何使用 `.map()`。数据转换是许多工具和行业的核心，因此 `.map()` 是许多项目中的关键部分。
如果您对 `.map()` 有任何问题或意见，我很乐意讨论！
以上是JavaScript 数组：地图的详细内容。更多信息请关注PHP中文网其他相关文章！
