一、基础概念
1、arr.map是什么？
在JavaScript中，arr.map()是一个用于数组映射的函数，它会将数组中每个元素传入一个回调函数内部，并返回一个新数组，新数组的每个元素都是回调函数的返回值。
2、arr.map的语法结构
arr.map(callback(currentValue[, index[, array]])[, thisArg])
其中，callback是必需的参数，currentValue是当前元素的值，index是当前元素的索引，array是原始数组。
二、实战演练
1、对数组元素进行平方操作
const arr = [1, 2, 3, 4];
const newArr = arr.map(item => item ** 2);
console.log(newArr);
//输出 [1, 4, 9, 16]
可以看出，我们通过arr.map()方法对原数组中的元素进行平方操作，并将结果保存在新数组中。
2、对数组元素进行过滤
const arr = [1, 2, 3, 4, 5];
const newArr = arr.map(item => {
if (item > 2) {
return item;
}
});
console.log(newArr);
//输出 [undefined, undefined, 3, 4, 5]
这里我们通过arr.map()方法进行了一个筛选操作，只将大于2的元素返回到新数组中，而小于等于2的元素会在新数组中变成undefined。
三、高级应用
1、将对象数组中的某个属性提取出来
const arr = [
{id: 1, name: '张三'},
{id: 2, name: '李四'},
{id: 3, name: '王五'}
];
const newArr = arr.map(item => item.id);
console.log(newArr);
//输出 [1, 2, 3]
通过arr.map()方法，我们可以将对象数组中id属性提取出来并保存到新数组中。
2、将字符串数组中的每个元素转成数字类型
const arr = ['1', '2', '3', '4'];
const newArr = arr.map(item => parseInt(item));
console.log(newArr);
//输出 [1, 2, 3, 4]
对于一些需要进行类型转换的操作，如将字符串数组中的每个元素都转成对应的数字类型，我们可以通过arr.map()方法实现。
四、总结
arr.map()是JavaScript中用于数组映射的重要函数之一，通过多种方式的演示与实践，我们可以清楚地了解其语法结构、常见的使用场景以及高级应用。在实际开发过程中，arr.map()的威力不容小觑，值得我们在代码编写中加以充分的利用。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/233935.html
微信扫一扫 
支付宝扫一扫 