javascript 中的map()方法

红太狼 2022-03-06 13:38 313阅读 0赞

想获取更多的前端技术-请专注公众号：**胖梅web前端**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70][]

**接口数据映射**

从接口得到数据 res:

let r = res.map(item => {
        return {
            title: item.name,
            sex: item.sex === 1? '男':item.sex === 0?'女':'保密',
            age: item.age,
            avatar: item.img
        }
    })

**map定义和方法**   
map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。   
map()方法按照原始数组元素顺序依次处理元素。   
**注意：**   
map不会对空数组进行检测   
map不会改变原始数组

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 1][]

如果没有thisvalue  默认是undefined 或者是null

看一个例子：demo

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>map方法</title>
    </head>
    <body>
        <p>点击按钮将数组中的每个元素乘以输入框指定的值，并返回新数组</p>
        <p>
            最小年龄:
            <input type="number" id="age" value="10" />
        </p>
        <button id="btn">点我</button>
        <p id="data">新数组</p>
     
        <script type="text/javascript">
            var btn = document.getElementById("btn");
            var data = document.getElementById("data");
            var age = document.getElementById("age");
            var numbers = [25,36,121,49];
     
            function myFunction(num,index,arr){
                console.log('arr',arr);
                console.log('index',index);
                console.log('num',num);
                return num * age.value;
            }
     
            btn.onclick = function(){
                data.innerHTML = numbers.map(myFunction);
            }
     
        </script>
    </body>

页面效果：默认num=undefied 第一次

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 2][]

**在实际应用场景中，在便利出的数据需要处理的时候用到map比较多一些，例如商品列表数据回来之后进行展示需要进行另外的操作时，如此不会改变原数组，便可实现效果**

map()方法是不会改变原来的数组，也就是例子中的arr，数据处理之后会返回一个新的数组result，这两者之间没有指向关系

举个例子：

要求：为数组 arr 中的每个元素求二次方。不要直接修改数组 arr，结果返回新的数组

实现：

function square(arr){
            return arr.map(function(item){
                return item*item;});
        }
        var arr=[1, 2, 3, 4];
        console.log(square(arr));
          结果：[1,4,9,16]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70]: /images/20220303/69d4985d58c6446bbd66f451fbd288ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 1]: /images/20220303/46f010bd05524e84b34c584ddbb1dadf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 2]: /images/20220303/efe35c81f5e946ffa4e18ac193f75c84.png