介绍
在 JavaScript 中，数组是一种常见的数据类型，常常被用于存储和操作一系列相关的数据。ECMAScript 2016 引入了新的数组方法 map()，可以使我们更加方便地对数组进行操作，本文将详细讲解 map() 方法的用法及其在前端开发中的应用。
什么是 map()？
map() 方法是数组原型对象上的一个方法，它会对原始数组中的每一个元素都执行一个回调函数，生成一个新的数组，并返回这个新的数组。这个新的数组和原始数组一一对应，即新数组的第 i 个元素就是原始数组第 i 个元素执行完回调函数后的返回值。
map() 方法的语法如下：
array.map(callback[, thisArg])
其中，array 是要调用 map() 方法的数组；callback 是要对每一个元素执行的回调函数，它接受三个参数：当前元素的值、当前元素的下标，以及原始数组；thisArg 是可选的，它为回调函数指定了 this 的值。
map() 的例子
下面，我们来看几个简单例子，以更好地理解 map() 方法的用法。
例 1
我们有一个数组 $arr = [1, 2, 3]$，我们希望将每个元素都乘以 $2$。
const arr = [1, 2, 3];
const newArr = arr.map((num) => {
return num * 2;
});
console.log(newArr); // [2, 4, 6]在这个例子中，我们定义了一个 arr 数组，并使用 map() 方法对其进行操作，将每个元素都乘以 $2$。回调函数接收一个参数 num，表示数组中的每一个元素，然后返回 num * 2 作为新数组中对应元素的值。最终，打印出了新的数组 [2, 4, 6]。
例 2
我们有一个数组 $arr = ['apple', 'banana', 'orange']$，我们希望将每一个元素转为大写字母。
const arr = ['apple', 'banana', 'orange'];
const newArr = arr.map((str) => {
return str.toUpperCase();
});
console.log(newArr); // ['APPLE', 'BANANA', 'ORANGE']在这个例子中，我们定义了一个 arr 数组，并使用 map() 方法对其进行操作，将每个元素都转为大写字母。回调函数接收一个参数 str，表示数组中的每一个元素，然后返回 str.toUpperCase() 作为新数组中对应元素的值。最终，打印出了新的数组 ['APPLE', 'BANANA', 'ORANGE']。
map() 的应用
对象数组转换
在前端开发中，我们常常从后端获取一些数据，这些数据往往以对象数组的形式返回。如果我们只需要其中的某些属性值，可以使用 map() 方法将其转化成一个包含所需属性值的数组。
-- -------------------- ---- ------- ----- ----- - - - --- -- ----- ------- -- - --- -- ----- ----- -- - --- -- ----- --------- - -- ----- ------- - ---------------- -- - ------ -------- --- --------------------- -- --- -- --
在这个例子中，我们有一个对象数组 users，每个对象都包含 id 和 name 两个属性。我们使用 map() 方法将其转化成了一个只包含 id 属性的数组 userIds。回调函数接收一个参数 user，表示数组中的每一个元素对象，然后返回 user.id 作为新数组中对应元素的值。最终，打印出了新的数组 [1, 2, 3]。
数组过滤与重组
在前端开发中，我们有时需要对一个数组进行过滤，并将过滤后的元素重新组合成一个新的数组。
const nums = [1, 2, 3, 4, 5]; const evenSquares = nums .filter((num) => num % 2 === 0) .map((num) => num ** 2); console.log(evenSquares); // [4, 16]
在这个例子中，我们有一个数组 nums，我们使用 filter() 方法选择出其中的偶数，并使用 map() 方法将其平方得到新的数组 evenSquares。首先，使用 filter() 方法选择出所有偶数，并返回一个新的数组 [2, 4]；然后，使用 map() 方法将这个新数组中的每个元素都平方得到新的数组 [4, 16]。最终，打印出了新的数组 [4, 16]。
总结
本文讲解了 ECMAScript 2016 中的 map() 方法，以及它的用法和在前端开发中的应用。map() 方法对于数组操作非常有用，可以使我们更加方便地对数组进行操作，并生成新的数组，是前端开发必备的基础技能之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f32755f6b2d6eab3ca43ad