js数组map⽅法
map()经常⽤来遍历数据。
map()的作⽤就是“映射”,也就是原数组被“映射”成对应新数组。
1. ⽅法概述
map() ⽅法返回⼀个新数组,这个新数组:由原数组中的每个元素调⽤⼀个指定⽅法后的返回值组成的新数组。 map() 不会对空数组进⾏检测。
map() 不会改变原始数组。
var arr = ["a","b","c","d","e"];
js方法arr.map(function(currentValue,index,arr){
console.log("当前元素"+currentValue)
console.log("当前索引"+index)
console.log("数组对象"+arr)
})
map的参数:
currentValue必须。当前元素的值
index可选。当期元素的索引值
arr 可选。当期元素属于的数组对象
map()跟filter() 和reduce() 的区别
1,举个例⼦使⽤:数值项求平⽅
// 例⼦数值项求平⽅
let data = [1,2,3,4,5];
let newData = data.map(function (item){
return item * item;
});
console.log(newData);
//箭头函数的写法
let newData2 = data.map(item => item *item);
console.log(newData2);
2,在实际⼯作中使⽤,我们可以利⽤map⽅法⽅便获得数组对象中的特定属性值
/
/ 在实际中,我们可以利⽤map⽅法⽅便获得数组对象中的特定属性值
let users = [
{"name": "张⼩花", "email": "zhang@qq"},
{"name": "body", "email": "body@qq"},
{"name": "李⼩璐", "email": "li@qq"}
];
let newEmail = users.map(function (item) {
return item.name;
});
console.log(newEmail.join(','));
//第2种获取数组对象中的值
let emails = [];
users.map(function (item){
emails.ail);
});
console.log(emails);
// ["zhang@qq", "body@qq", "li@qq"]
3,⽤map()调⽤⼀个⽅法的使⽤
// 调⽤⼀个⽅法:把字符串转整数
let arr1 = ["1", "2", "3"];
function returnInt (element){
return parseInt(element, 10);
}
let newArr1 = arr1.map(returnInt);
console.log(newArr1);
4,接⼝数据映射,从接⼝得到数据 res
// 接⼝数据映射,从接⼝得到数据 res
let r = res.map(item => {
return {
title: item.name,
sex: item.sex === 1? '男':item.sex === 0?'⼥':'保密',
age: item.age,
avatar: item.img
}
})
5,JS模拟实现数组的map⽅法
// JS模拟实现数组的map⽅法
//思路:直接Array.map()就可以调⽤到map⽅法,那他应该是在原型链上的,然后接收⼀个匿名函数做参数,通过循环调⽤传⼊的匿名函数wMap = function (fn){
let newArr = [];
for (let i = 0; i <this.length; i++) {
newArr.push(fn(this[i], i, this))
}
return newArr;
}
let arr5 = ["1", "2", "33"];
console.log(item);
})
6,map()⽅法⽤箭头函数容易出现的错误
举了个例⼦:
var array1 = [1,4,9,16];
const map1 = array1.map(x => x *2);
console.log(map1);
// 结果为 [2,8,18,32]
⽽我这样写时:有多条语句时
var array1 = [1, 4, 9, 16];
const map1 = array1.map(x => {
if (x == 4) {
return x * 2;
}
});
console.log(map1);
// 打印结果为 [undefined, 8, undefined, undefined]
为什么会出现三个undefined呢?⽽不是我预期的[1,8,9,16]。
这样写只是增加了⼀个条件,即x的值为4时才乘以2,之所以会出现undefined,是因为map()⽅法创建了⼀个新数组,但新数组并不是在遍历完array1后才被赋值的,⽽是每遍历⼀次就得到⼀个值。所以,下⾯这样修改后就正确了:
var array1 = [1, 4, 9, 16];
const map1 = array1.map(x => {
if (x == 4) {
return x * 2;
}
return x;
});
这⾥注意箭头函数有两种格式:
1.只包含⼀个表达式,这时花括号和return都省略了。
2.包含多条语句,这时花括号和return都不能省略。
⼤家可以参考:
可以参考:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论