目录
一、为什么要使用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循环,能显著提升代码的可读性和可维护性。
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~