数组map用法详解

小蓝 • 2024-12-12 13:30 • 编程

一、数组map方法

在JavaScript中，数组是非常常用的数据类型之一，为了方便开发者对数组进行处理，ES5新增了数组map方法。它作用于数组的每一个元素，返回一个新数组，并且不改变原数组。map方法接收一个回调函数作为参数，回调函数的返回值将会作为新数组的每一个元素。


const arr = [1, 2, 3, 4, 5];
const newArr = arr.map(item => item * 2);
console.log(newArr);
// Output: [2, 4, 6, 8, 10]

上述代码中，原数组arr中的每一个元素都被乘以2，得到新数组newArr。

二、数组方法map用法

除了在ES5中数组原生提供的map方法，还有一些常用的数组方法会使用到map方法。比如数组的forEach、filter、reduce等方法都能用map来实现。


const arr = [1, 2, 3, 4, 5];
// forEach实现
arr.forEach((item, index, array) => {
  array[index] = item * 2;
});
console.log(arr);
// Output: [2, 4, 6, 8, 10]

// map实现
const newArr = arr.map(item => item * 2);
console.log(newArr);
// Output: [2, 4, 6, 8, 10]

上述代码中，forEach和map都使用了回调函数来对数组进行遍历并对每个元素进行操作。但是，map返回了一个新数组，不改变原数组。

三、数组map应用

数组map方法可以应用于对数组元素进行处理、筛选、查找等操作。下面是一些应用场景的示例：

1. 将数组对象中某个属性提取出来组成新的数组


const arr = [{name: 'apple', count: 2}, {name: 'banana', count: 3}, {name: 'orange', count: 4}];
const newArr = arr.map(item => item.name);
console.log(newArr);
// Output: ['apple', 'banana', 'orange']

2. 将数组中的字符串元素转化成数字类型


const arr = ['1', '2', '3', '4', '5'];
const newArr = arr.map(Number);
console.log(newArr);
// Output: [1, 2, 3, 4, 5]

3. 将数组中所有元素转化成小写字母


const arr = ['APPLE', 'BANANA', 'ORANGE'];
const newArr = arr.map(item => item.toLowerCase());
console.log(newArr);
// Output: ['apple', 'banana', 'orange']

四、数组map方法的使用

数组map方法的使用要点：

传入的回调函数应该是一个纯函数，即没有副作用并且始终返回相同的结果。
map方法返回的新数组长度和原数组长度相同。
如果数组元素为undefined，map不会调用回调函数处理该项。
回调函数接收三个参数：当前元素值、当前元素索引、数组本身。

五、数组map

除了数组自带的map方法，ES6中还新增了Map类型。Map类型是一个无序的键值对集合，可以使用任何值（包括对象）作为键或值。对于不需要使用到数组 index 下标的数据结构，使用 Map 会是一个更好的选择。

1. 遍历map数组


const myMap = new Map();
myMap.set(0, 'hello');
myMap.set(1, 'world');
const newArr = Array.from(myMap).map(([key, value]) => value);
console.log(newArr);
// Output: ['hello', 'world']

2. js数组的map方法


Array.prototype.map = function(callback){
  let result = [];
  for(let i = 0; i < this.length; i++){
    result.push(callback(this[i], i, this));
  }
  return result;
};

让我们一起来了解一个新的方法，就是：

3. js数组对象转map对象


const arr = [['key1', 'value1'], ['key2', 'value2']];
const myMap = new Map(arr);
console.log(myMap);
// Output: Map(2) {"key1" => "value1", "key2" => "value2"}

六、map和数组效率选取

虽然数组和Map都有遍历和查找的需求，但是它们的特点不一样。如果你需要类似于“索引”的查找方式，那么使用数组可能更适合。如果你想存储键值对并且需要快速查找和遍历键值对，那么使用Map就更好。

七、小结

本文详细介绍了JavaScript中数组map方法的用法及其应用。map方法作为数组的核心功能之一，为开发者提供了更加便捷的数据处理方式。同时，本文也介绍了一些与map方法相关的小技巧，如forEach、filter、reduce方法使用map实现、Map类型的使用等。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/248980.html