想获取更多的前端技术-请专注公众号：胖梅web前端
接口数据映射
从接口得到数据 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]