最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

<code>array：可选参数，表示正在处理的当前数组。

thisArg：可选参数，表示执行 callback 函数时的 this 值。

map（）的基本使用

⭐使用 map() 方法将数组中的数字乘以 2 并返回新的数组：

let numbers = [1, 2, 3, 4];

let doubled = numbers.map(function(num) {

return num \* 2;

});

console.log(doubled); // 输出 [2, 4, 6, 8]

首先我们定义了一个名为 numbers 的数组，其中包含四个数字。我们使用 map() 方法对该数组中的每个元素执行了一次函数，该函数将每个数字乘以 2 并返回新的数组 doubled

⭐将字符串数组转换为数字数组：

let strings = ['1', '2', '3'];

let numbers = strings.map(function(str) {

return parseInt(str, 10);

});

console.log(numbers); // 输出 [1, 2, 3]

我们声明了一个名为 strings 的数组。我们使用 map() 方法对该数组中的每个元素使用了一次函数，该函数将每个字符串转换为数字并返回新的数组 numbers。

⭐将对象数组转换为属性值数组：

let objects = [{ name: 'apple', color: 'red' }, { name: 'banana', color: 'yellow' }, { name: 'orange', color: 'orange' }];

let colors = objects.map(function(obj) {

return obj.color;

});

console.log(colors); // 输出 ["red", "yellow", "orange"]

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

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--;

}

### 文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

**269页《前端大厂面试宝典》**

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/b98713ee557d94286de8afe404cb51d1.png)

**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/1d691ca297c9016828aff783a701e065.png)

net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/b98713ee557d94286de8afe404cb51d1.png)

**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/1d691ca297c9016828aff783a701e065.png)