js 数组 map方法

map()经常用来遍历数据。

map()的作用就是“映射”，也就是原数组被“映射”成对应新数组。

1. 方法概述

     map() 方法返回一个新数组，这个新数组：由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

 　map() 不会对空数组进行检测。

　 map() 不会改变原始数组。

 var arr = ["a","b","c","d","e"];
        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.com"},
    {"name": "body", "email": "body@qq.com"},
    {"name": "李小璐", "email": "li@qq.com"}
];
let newEmail = users.map(function (item) {
    return item.name;
});
console.log(newEmail.join(','));
//第2种获取数组对象中的值
let emails = [];
users.map(function (item){
    emails.push(item.email);
});
console.log(emails);
// ["zhang@qq.com", "body@qq.com", "li@qq.com"]

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方法，那他应该是在原型链上的，然后接收一个匿名函数做参数，通过循环调用传入的匿名函数
Array.prototype.newMap = 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"];
arr5.newMap((item, index, arr) =>{
    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都不能省略。

大家可以参考：ES6标准新增了一种新的函数

可以参考：https://blog.csdn.net/weixin_41646716/article/details/91509295