javascript 中的map()方法

接口数据映射从接口得到数据 res:let r = res.map(item => {return {title: item.name,sex: item.sex === 1? '男':item.sex === 0?'女':'保密',age: item.age,avatar: item.img...

小胖梅

81094人浏览 · 2019-03-19 09:52:21

小胖梅 · 2019-03-19 09:52:21 发布

Vue全套学习免费视频：B站

小胖梅-的个人空间_哔哩哔哩_Bilibili

个人微信：renxm2023（有前端技术群提供技术问答）

接口数据映射

从接口得到数据 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不会改变原始数组

如果没有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 第一次

在实际应用场景中，在便利出的数据需要处理的时候用到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]