一、map方法的基本概念
map方法是JavaScript中数组的一个基础方法。它可以将数组中的每个元素传入一个回调函数中进行处理，并将返回的结果组成一个新的数组返回。map方法可以不改变原数组，而是返回一个新的数组。
map方法的语法如下：
array.map(function(currentValue, index, arr), thisValue)
其中参数function(currentValue, index, arr)是回调函数，thisValue是可选参数，表示函数中this的值。
二、map方法的使用方法
1.将数组中的元素映射为新的数组
使用map方法可以将数组中的每个元素映射为新的数组，根据映射的规则进行操作，最后将得到一个新的数组。例如，我们有一个数组，表示摄氏度的温度值。
let celsius = [0, 15, 20, 25, 30];
现在我们要将这些摄氏度的温度值转换为华氏度的温度值，并存入一个新的数组fahrenheit中，可以使用如下代码：
let fahrenheit = celsius.map(function(temp) {
return temp * 1.8 + 32;
});
这里我们传入回调函数function(temp)，参数temp就是数组中每个元素，回调函数中的操作是将摄氏度转换为华氏度。
执行结果：
fahrenheit = [32, 59, 68, 77, 86];
2.将对象中的某个属性值提取出来为新的数组（对象数组）
在JavaScript中，我们经常会遇到对象数组，比如：
let students = [
{name: '小明', gender: '男', age: 18},
{name: '小红', gender: '女', age: 19},
{name: '小黄', gender: '男', age: 17},
];
如果想提取出所有学生的年龄，可以使用map方法。
let ages = students.map(function(student) {
return student.age;
});
执行结果：
ages = [18, 19, 17];
3.数组去重
使用map方法可以轻松地将数组中重复的元素去掉，只保留不重复的元素。例如，现在有一个包含重复元素的数组。
let arr = [1, 2, 3, 4, 2, 3, 5, 6, 6];
我们可以使用map方法和indexOf方法来实现数组去重：
let newArr = arr.map(function(item) {
if (arr.indexOf(item) === arr.lastIndexOf(item)) {
return item;
}
});
执行结果：
newArr = [1, 4, 5];
三、map方法的应用场景
1.数据的转换
map方法很适合对数据进行转换的场景，如将摄氏度转换为华氏度，将分数转换为等级等。
2.多个数组的合并
在实际开发中，我们可能需要将多个数组合并成一个数组。使用map方法可以将多个数组合并成一个新的数组。
let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let arr3 = [7, 8, 9]; let result = [arr1, arr2, arr3].map(Function.prototype.call, Array.prototype.concat.bind([]));
执行结果：
result = [1, 2, 3, 4, 5, 6, 7, 8, 9];
3.表单验证
在表单验证时，我们可以使用map方法来验证一个或多个输入框的内容是否符合要求，并返回一个包含验证结果的数组。例如，我们在一个表单中有两个输入框，分别是用户名和密码，可以使用如下代码进行验证：
let inputs = document.querySelectorAll('input');
let results = Array.from(inputs).map(function(input) {
let value = input.value.trim();
if (input.type === 'text' && value.length > 6) {
return true;
} else if (input.type === 'password' && value.length > 8) {
return true;
} else {
return false;
}
});
执行结果：
results = [true, false];
4.根据条件筛选出数组中的元素
使用map方法可以根据条件筛选出数组中符合要求的元素，并返回一个包含筛选结果的新数组。例如，现在有一个对象数组：
let users = [
{name: '小明', age: 18, gender: '男'},
{name: '小红', age: 19, gender: '女'},
{name: '小黄', age: 17, gender: '男'},
{name: '小兰', age: 20, gender: '女'},
{name: '小刚', age: 16, gender: '男'},
];
我们想要筛选出所有年龄大于等于18岁的用户，可以使用如下代码：
let adultUsers = users.map(function(user) {
if (user.age >= 18) {
return user;
}
}).filter(function(user) {
return user != null;
});
执行结果：
adultUsers = [
{name: '小明', age: 18, gender: '男'},
{name: '小红', age: 19, gender: '女'},
{name: '小兰', age: 20, gender: '女'},
];
四、小结
本文详细介绍了数组的map方法的基本概念、使用方法和应用场景。map方法可以将数组中的元素映射为新的数组，去重，以及用于数据转换、多个数组的合并、表单验证和根据条件筛选出数组中的元素等场景。map方法在实际开发中应用广泛，是JavaScript中数组的基础方法之一。
原创文章，作者：FXHS，如若转载，请注明出处：https://www.506064.com/n/147417.html
微信扫一扫 
支付宝扫一扫 