利用 ES7 的 Array.prototype.map 方法对数组元素进行批量操作

在前端开发中，我们日常会处理大量的数组数据，为了提高代码的效率和可读性，我们需要能够对数组进行批量操作。ES7 的 Array.prototype.map 方法是一种非常高效、简单且易于学习的处理数组的方式，可以帮助我们快速完成对数组元素的批量操作。

ES7 的 Array.prototype.map 方法

Array.prototype.map 方法是一个高阶函数，它会将指定的一个函数应用到数组的每个元素上，并返回一个新数组。这个新数组的元素是被指定函数处理后的结果。

下面是 Array.prototype.map 方法的基本语法：

array.map(callback(currentValue[, index[, array]])[, thisArg])

• callback：应用于每个元素的函数。
• currentValue：当前被处理的元素。
• index（可选）：当前被处理元素的下标。
• array（可选）：当前数组对象。
• thisArg（可选）：可选参数，当执行回调函数时，用作 this 的值。

利用 Array.prototype.map 方法对数组元素进行批量操作

我们下面来看几个实际的应用场景。

例一：将数组中的每个元素加 1

const arr = [1, 2, 3, 4, 5];

const newArr = arr.map(item => item + 1);

console.log(newArr); // [2, 3, 4, 5, 6]

例二：将数组中的每个字符串转换为数字

const arr = ['1', '2', '3', '4', '5'];

const newArr = arr.map(item => parseInt(item));

console.log(newArr); // [1, 2, 3, 4, 5]

例三：将数组中的对象转换为字符串

const arr = [{name: '张三', age: 18}, {name: '李四', age: 20}, {name: '王五', age: 22}];

const newArr = arr.map(item => JSON.stringify(item));

console.log(newArr); // ['{"name":"张三","age":18}', '{"name":"李四","age":20}', '{"name":"王五","age":22}']

例四：筛选数组中满足条件的元素

const arr = [{name: '张三', age: 18}, {name: '李四', age: 20}, {name: '王五', age: 22}];

const newArr = arr.map(item => item.age > 20 ? item.name : '');

console.log(newArr); // ['', '', '王五']

总结

使用 Array.prototype.map 方法可以大大提高数组元素的处理效率和代码可读性。这种方法非常简单易学，能够让我们快速完成对数组元素的批量操作。在实际开发中，我们可以根据具体的业务需求，灵活运用这种方法，提升自己的开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d3870db5eee0b525b2ab65