js数组高阶函数——map()方法_js map方法

最新推荐文章于 2025-05-13 17:53:31 发布

2401_84617356

最新推荐文章于 2025-05-13 17:53:31 发布

阅读量4.6k

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/2401_84617356/article/details/139932097

版权

⭐将一个数组中的对象转换为另一个数组，只保留对象中的某些属性：

const users = [
  {name: 'Alice', age: 25},
  {name: 'Bob', age: 30},
  {name: 'Charlie', age: 35},
];
const names = users.map(function(user) {
  return user.name;
});
console.log(names); // ['Alice', 'Bob', 'Charlie']

⭐将一个数组中的字符串转换为另一个数组，只保留长度大于等于5的字符串：

const words = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
const longWords = words.map(function(word) {
  if (word.length >= 5) {
    return word;
  }
});
console.log(longWords); // ['apple', 'banana', 'cherry', undefined, 'elderberry']

⭐⭐⭐需要注意的是，在使用 map() 方法时，我们可以选择传递可选参数 thisArg 来设置回调函数的 this 值。如果不传递 thisArg 参数，则默认情况下，回调函数的 this 值为undefined。

举个例子：

let numbers = [1, 2, 3];
let obj = { multiplier: 2 };
let doubled = numbers.map(function(num) {
    return num \* this.multiplier;
}, obj);
console.log(doubled); // 输出 [2, 4, 6]

上面的例子中，我们定义了一个名为 numbers 的数组，其中包含三个数字。我们还定义了一个名为 obj 的对象，其中包含一个名为 multiplier 的属性，该属性的值为 2。我们在回调函数中使用 this.multiplier，其中 this 值为 obj，来将数组中的每个元素乘以 2。

map（）的优缺点

优点：

map（）默认会有返回值，一般返回一个数组。这里要强调一下，函数默认没有返回值。如果函数内部没有明确使用return语句返回一个值，那么该函数执行完毕后会自动返回undefined。所以这个也是map（）的一个特色
可以方便地对数组中的每个元素进行操作，并生成一个新的数组；
不会改变原始数组。

缺点：

无法使用break，continue，return等关键字控制循环，必须全部遍历完毕才能停止；
对于大型数据集合而言，可能会导致性能问题。

数据小的时候，用map（）循环非常的爽，不是很消耗性能。但数据大的情况下，用map（）会很耗性能，因为map（）会对数组中的每个元素执行一次callback方法。建议数据大的时候，用for循环。虽然多次for循环嵌套看着恶心，但是性能好，是底层的东西。而所谓的map（），set（），for in，for of 都是在for循环的基础上再封装。单从性能角度考虑，远不如for循环优秀。

map（）的使用场景

将一组数据转换为另一种形式或格式；
对一组数据进行过滤、去重等操作；
对一组DOM元素进行修改等操作；

去重

一般情况下，去重一个数组，有这么几种方法。

双重for循环配合splie去重

//先定义一个数组
var arr=[1,2,2,3,4,4,5]
//双重for循环
for(i = 0;i < arr.length; i++){
  for(j = i+1;j < arr.length; j++){ 
//如果数组中有两个数相等，这里用三位运算符
    if(arr[i] === arr[j]){ 
//在第j个元素开始删除，删除1个元素。splice方法,还可以对多个对象中的某个或某几个对象删除
      arr.splice(j,1);
      j--;
    }
  }
}
console.log(arr)

在这里插入图片描述

map循环配合Array.from去重

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

const newArr = Array.from(new Map(arr.map(item => [item, item])).values());

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

这段代码的原理是，先使用map方法将数组元素映射为键值对的数组。然后使用Map构造函数将键值对数组转换为Map对象，其中键和值均为数组的元素。由于Map对象中键是唯一的，这样就自动去除了数组中的重复项。最后，通过Array.from()方法将去重后的Map对象的值转换为新的数组。

set（）去重

以下是使用Set数据结构进行数组去重的例子：

let arr = [1, 2, 2, 3, 4, 4, 5];
let newArr = [...new Set(arr)];
console.log(newArr);  // [1, 2, 3, 4, 5]

在这里插入图片描述

这里使用了ES6中的Set数据结构来创建一个去重后的新数组newArr。

filter()去重

let arr = [1, 2, 2, 3, 4, 4, 5];
let newArr = arr.filter((value, index, self) => {
  return self.indexOf(value) === index;
});
console.log(newArr);  // [1, 2, 3, 4, 5]

filter()函数遍历数组中的每个元素，并通过比较当前元素在数组中的索引位置来判断是否保留。只有第一次出现的元素会被保留下来，从而实现了去重的效果

在这里插入图片描述