在现代的前端开发中，JavaScript 作为一种非常重要的编程语言使用广泛。其中最常用的 API 之一就是 Array.prototype.map。
Array.prototype.map 方法可以对数组中的每个元素执行一个函数，并且构建一个新的数组，包含每个元素对应的函数执行结果。在本文中我们将详细介绍 ECMAScript 2019 中的 Array.prototype.map，包括其功能、用法和示例代码。
功能和用法
Array.prototype.map 接受一个函数作为参数，该函数参数还包括：
- item（数组中待处理的元素）
- index（数组中待处理的元素索引）
- array（原始数组本身）
array.map(function(item, index, array) {
// 处理 item，返回一个新的值
});该方法将返回新的数组，新数组中包含了原数组中每个元素调用函数的结果。函数中返回的每个值都会构建成一个新数组。
-- -------------------- ---- ------- ----- ------ - --- -- -- -- --- -- -- --- ---------------- - ---- ----- ------ - ------------------------ - ------ --- - -- --- -- ----------- -------------------- -- --- -- -- -- ---
从上述代码片段可以看出，通过 map，我们可以非常简洁地创建一个新的数组，其中每个元素是原始数组中每个元素乘以 2 所得到的结果。
深入理解 Array.prototype.map
此处将从以下几个方面深入探索 Array.prototype.map：
- Array.prototype.map 的性能
- 使用 Array.prototype.map 时的实践技巧
- 深度处理 JavaScript 数组
Array.prototype.map 的性能
在大多数情况下，Array.prototype.map 是一个可靠的方法，可以用于处理大型数组并提高性能。例如，如果要对一个数组中的每个项使用 10 次方根号（或说指数运算），那么使用 Array.prototype.map 会比用循环语句（for 或 while）更快。
-- -------------------- ---- ------- ----- ------ - --- -- -- -- -- --- -- ---- --- ------- - --- --- ---- - - -- - - -------------- ---- - -------------------------------- -- - ------ - -- -- --- -- --- ------- - ---------------------------- - ------ ----------------- -- - ----- --- -- --------- --------------------- -- --- ------------------- ------------------- ------------------ ------------------- ----------- --------------------- -- --- ------------------- ------------------- ------------------ ------------------- -----------
在上述代码片段中，使用循环方式运算和 map 运算都可以得出相同的输出结果。但经过测试，Array.prototype.map 运算的速度会更快。这是因为在 Array.prototype.map 的操作中，作为迭代器的函数只会被调用一次。
因此，请确保使用 Array.prototype.map 时，写出高效性能的代码。如果需要处理大型数组，请尤其关注代码的性能。（注：性能是个比较复杂的问题，本文不作过多解释，感兴趣的读者可以查看 React 原理中关于数据处理的部分）
使用 Array.prototype.map 时的实践技巧
在实际使用 Array.prototype.map 时，我们经常会遇到的一些实践技巧，例如：
1. 不改变原数组
在 Array.prototype.map 操作中，不会改变原始数组。因此，可以在 map 操作结束后把新数组中的项目赋回原数组。
-- -------------------- ---- ------- ----- ------ - --- -- -- -- --- -- --- ---------- ----- ------ - ------------------------ - ------ --- - -- --- -- ---------- ------ - ------- -- ----- -------------------- -- --- -- -- -- ---
2. 理解返回值
在 Array.prototype.map 操作中，最后返回的是一个新数组。
-- -------------------- ---- ------- ----- ------ - --- -- -- -- --- -- -- --- ------------------ ---------- --- ----- ---------- - ------------------------ - ------ --- - -- --- -- ----- ------------------------ -- --- -- -- -- ---
3. 简化代码
我们可以简化代码，通过箭头函数表达式来使用 map 操作：
const array1 = [1, 2, 3, 4, 5];
const array2 = array1.map(num => {
return num * 2;
});
console.log(array2); // [2, 4, 6, 8, 10]4. 使用少数参数
在使用 Array.prototype.map 操作时，你可以只使用参数 item（item 为数组中的元素）而忽略其他参数。这样做通常会使代码变得更为简洁。
const array1 = [1, 2, 3, 4, 5]; const array2 = array1.map(num => num * 2); console.log(array2); // [2, 4, 6, 8, 10]
深度处理 JavaScript 数组
在前端开发中，JavaScript 数组是使用最频繁的数据结构之一。但有时候我们需要处理到复杂类型的数组（嵌套数组或对象数组），此时我们需要使用 Array.prototype.map 方法进行深度处理。
以下是一个数组含有嵌套数组的示例：
-- -------------------- ---- -------
----- --------- - -
-
----- --------
--------- --
------ ----
--------- ------- ------- -------
--
-
----- ---------
--------- --
------ -----
--------- ------- ------- -------
--
-
----- -------------
--------- --
------ ----
--------- ------- ------- -------
-
--如何使用 Array.prototype.map 对此数组中的 price 属性进行加倍处理？答案如下：
const prices = inventory.map(fruit => {
return fruit.price * 2;
});
console.log(prices); // [1, 0.5, 0.2]结果还是一个数组，但是处理过的每个成员都是原始数组里每个对象中属性 price 的值乘以 2。这个处理过的数组成员并不等同于原数组中的每个成员，而是二者之间通过一个函数联系起来得到的结果。
总结
在使用 Array.prototype.map 方法时，请确保完成以下步骤：
- 参数是要迭代的数组和一个返回新元素的函数
- 返回一个新数组，新数组中的元素转化自原数组中迭代过的每一个元素
- 尽可能使用简介并高效的代码，理解代码性能的影响
- 可以使用箭头函数表达式和少量参数以简化代码
- 对于复杂类型的数组，我们需要使用 Array.prototype.map 方法进行深度处理。
通过理解 Array.prototype.map 的功能、用法以及指导意义，我们可以更好地在前端编程中应用这个方法，提高程序的效率和时间性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3258548841e9894f8c805