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]