数组方法map的使用及与forEach的比较

prtyaa 2023-12-25 16:23:02  66054

分类专栏：资讯

先来看一下对数组map()方法的定义：map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

大家要注意map在这里并不是地图的意思，确切的解释应该是映射！也就是说通过该方法你可以经过一些自己的逻辑处理，映射出来一个新的数组，而对原数组没有影响。

先来看一个示例，对arr的元素值乘以2，并生成一个新的数组newArr:

var arr=[1,3,4,5,7,9];
var newArr=arr.map((v)=>{
    return v*2;
})
//newArr为arr元素值的2倍
console.log(newArr);//[ 2, 6, 8, 10, 14, 18 ]
//arr的值并没有发生变化
console.log(arr);//[ 1, 3, 4, 5, 7, 9 ]

如果你要你想对奇数乘以2的话，你可以这样：

var arr=[1,3,4,5,7,9];
var newArr=arr.map((v)=>{
    if(v%2==1)
        return v*2;
    return v;
})
//newArr中只有元素值为4的偶数没有发生变化
console.log(newArr);//[ 2, 6, 4, 10, 14, 18 ]
//arr的值并没有发生变化
console.log(arr);//[ 1, 3, 4, 5, 7, 9 ]

map方法中的回调必须要有返回值，否则会被映射为undefined：

var arr=[1,3];
var newArr=arr.map((v)=>{})
// 没有return 映射出来的值为undefined
console.log(newArr);//[ undefined, undefined ]
// arr的值并没有发生变化
console.log(arr);//[ 1, 3 ]

在实际使用中，咱们一般都会通过该方法取到原数组中的一些特定值，比如：

var arr=[
    {
        userName:"xiaozhang",
        phoneNum:"151098765**"
    },{
        userName:"laowang",
        phoneNum:"158984736**"
    }
];
var phoneArr=arr.map((item)=>{
    //只提取其中的手机号码
    return item.phoneNum
});
console.log(phoneArr);//[ '151098765**', '158984736**' ]

map方法与forEach使用起来类似：都是循环遍历数组中的每一项；每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组）；匿名函数中的this都是指向window：都只支持数组。

不同点在于forEach运行后的返回值为undefined。并不像map方法一样会映射一个新的数组：

var arr=[1,3,4,5,7,9];
var newArr=arr.forEach((v)=>{
    return v*2;
})
//undefined
console.log(newArr);//undefined
//arr的值并没有发生变化
console.log(arr);//[ 1, 3, 4, 5, 7, 9 ]

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=30615

赞同 0

评论 0 条

数组方法map的使用及与forEach的比较

相关文章

关注我们