探秘arr.map

一、基础概念

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()的威力不容小觑，值得我们在代码编写中加以充分的利用。