JavaScript中数组数据的预处理方法，数组遍历方法array.map()的应用，实际操作中比for循环高级好用的解决方案

目录

一、为什么要使用array.map(）

二、array.map(）的使用与技巧

2.1、基本语法

2.2、返回值

2.3、使用技巧

2.3.1、将数字数组元素都+1

2.3.2、将数组中所有元素都变成字符串

2.3.3、将数组中的元素变成对象

三、总结

---

一、为什么要使用array.map(）

        因为它简单，好用，清晰，可拓展性强，而且比for、foreach还有非常不常用的while、do...while高级，代码清晰，可读性强，代码就看起来很优雅，如果都是嵌套循环和嵌套回调，看起来就是一团乱麻，可读性差，很不优雅。

        要做优雅的程序员，写优雅的代码。

二、array.map(）的使用与技巧

2.1、基本语法

array.map(function callback(currentValue, index, array) { // 返回值将包含在新数组中 }[, thisArg]);

        其中callback回调函数是对每个数组元素执行的函数；currentValue即正在处理的当前元素；index是当前元素的索引；array是要操作原始数组；thisArg是执行 callback 函数时的 this 值。

2.2、返回值

        一个新的数组。可以用一个变量接受返回的新数组并执行接下来的逻辑。

2.3、使用技巧

        综上所述，array.map(）常用来对数组数据进行预处理或者改变数组中元素的数据类型（比如字符串变成对象）

2.3.1、将数字数组元素都+1

        举个最简单的例子，将数字数组的每个元素数值都加一：

// 实例1：将数字数组的每个元素数值都加一

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

const numbersAddOne = numbers.map(number => number + 1);

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

2.3.2、将数组中所有元素都变成字符串

        有时候我们的方法只能接收字符串，但是数字类型在js中会一直保留，就可以用array.map（）清理数组中的数字元素。

// 实例2：将数组中所有元素都变成字符串

const arr = [1, "flowers", "21岁", "99", 5];

const noNumberArr = arr.map(element => {

  return element + "" 

});

console.log(noNumberArr); // ["1", "flowers", "21岁", "99", "5"]

2.3.3、将数组中的元素变成对象

        实际开发中，有些方法和库需要接收特定格式的数据，比如echarts中像图例这样的配置项接受的数据类型就是数组装对象

// 实例3：将数组中的元素变成对象

const legendName= [ "林地" , "草地" , "水域" , "建筑用地" , "耕地" ];

const legendData = legendName.map((legend) => {

    return { name: legend };

});

// [ name："林地" , name："草地" , name："水域" , name："建筑用地" , name："耕地" ]
console.log(legendData); 

三、总结

        用array.map(）来代替for循环，能显著提升代码的可读性和可维护性。

        博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~