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": "[e-mail]"},
    {"name": "body", "email": "[e-mail]"},
    {"name": "李小璐", "email": "[e-mail]"}
];
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);
// ["[e-mail]", "[e-mail]", "[e-mail]"]

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