ES6 中的 map() 方法详解及实例
在 ES6 中，map() 是一个非常常用的方法，它的作用是将数组中的每个元素都应用一个函数，然后将结果存储在一个新的数组中返回。这篇文章将详细介绍 map() 的用法和常见实例，并给出例子代码教程，希望对前端开发者有一定的学习和指导作用。
语法
map() 的语法很简单，它的基本语法如下：
array.map(function(currentValue, index, arr), thisValue)
其中，array 必须是一个数组，而 function 则是一个函数。该函数会被应用于数组中的每个元素，currentValue 表示当前正在处理的元素，index 表示当前元素在数组中的位置，arr 数组本身。函数返回值将存储在一个新的数组中。
另外，thisValue 是一个可选参数，用来指定在 function 函数中 this 的值。
使用实例
下面我们通过一些常见实例来学习 map() 的详细用法。这些实例都可以在浏览器控制台中运行。
实例一
// 使用 map() 将数组元素转换成它们的平方值，并保存在一个新数组中 const array1 = [1, 2, 3, 4, 5]; const newArray1 = array1.map(x => x * x); console.log(newArray1); // [1, 4, 9, 16, 25]
实例二
// 将字符串数组的所有元素转换为大写字母 const array2 = ['apple', 'banana', 'grape']; const newArray2 = array2.map(x => x.toUpperCase()); console.log(newArray2); // ['APPLE', 'BANANA', 'GRAPE']
实例三
// 获取每个对象的 "name" 字段，并保存在一个新数组中 const array3 = [ { name: 'apple', price: 0.5 }, { name: 'banana', price: 0.25 }, { name: 'grape', price: 0.1 } ]; const newArray3 = array3.map(x => x.name); console.log(newArray3); // ['apple', 'banana', 'grape']
实例四
// 获取每个数字的 double 和 half 值，并将它们保存在一个新数组中 const array4 = [1, 2, 3, 4, 5]; const newArray4 = array4.map(x => ({ double: x * 2, half: x / 2 })); console.log(newArray4); /* [ { double: 2, half: 0.5 }, { double: 4, half: 1 }, { double: 6, half: 1.5 }, { double: 8, half: 2 }, { double: 10, half: 2.5 } ] */
实例五
// 将两个数组的每个元素相加，并将结果保存在一个新数组中 const array5_1 = [1, 2, 3]; const array5_2 = [4, 5, 6]; const newArray5 = array5_1.map((x, i) => x + array5_2[i]); console.log(newArray5); // [5, 7, 9]
注意事项
在使用 map() 方法时，需要注意以下几点：
- 在 function 函数中不应该修改它的参数，而是应该返回新的值。
- 如果数组中有 undefined 或 null，它们也会用函数进行处理，返回值就是 undefined 或 null。
- 如果没有找到匹配元素，那么就会在数组中创建一个新的 undefined 值。
结论
通过本文的介绍，读者应该对 map() 方法有了更加深入的理解。在实际的项目中，map() 方法可以帮助我们将数组中的元素进行转换和处理，并将结果保存到一个新的数组中。在应用 map() 方法时，需要注意不要修改函数的参数，并且需要返回新的值。最后希望本文对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673176580bc820c58238eb17