当前位置: 首页 > Web前端 > HTML

理解map在JS中的多种使用

时间:2023-03-29 13:04:12 HTML

map()map()方法会返回一个新的数组,数组中的元素是调用函数后原数组元素处理后的值。此方法按原始数组元素顺序依次处理元素。它的语法如下。参数表示map方法会对原数组中的每个元素按顺序调用一次回调函数。每次执行callback后的返回值(包括undefined)组合起来组成一个新的数组。回调函数只会在有值的索引上调用;那些从未被赋值或被delete删除的索引将不会被调用。因为map生成了一个新的数组,所以当你不打算使用返回的新数组但使用map又违背设计初衷时,请改用forEach或for-of。您不应该使用map:A)您不打算使用返回的新数组,或/和B)您不从回调函数返回值。回调函数会自动传入三个参数:数组元素、元素索引和原始数组本身varmap=Array.prototype.mapvara=map.call("HelloWorld",function(x){returnx.charCodeAt(0);})//a的值为[72,101,108,108,111,32,87,111,114,108,100],可以链式调用arr.map(item=>项目。时间)。map(item=>item.scanner)注意:map方法不会检测空数组;map方法在遍历数组时会返回一个新的数组,不会改变原数组;map方法有返回值,可以返回,map的回调函数中支持返回值;map方法不能遍历对象,只适用于数组的遍历。map方法处理的数组元素范围是在第一次调用回调方法之前确定的。调用map方法后追加的数组元素不会被回调访问。如果现有数组元素已更改,则传递给回调的值是地图访问该元素时的值。如果在调用map函数之后,访问该元素之前删除了该元素,则无法访问该元素。场景1.使用map重新格式化数组中的对象varkvArray=[{key:1,value:10},{key:2,value:20},{key:3,value:30}];varreformattedArray=kvArray.map(function(obj){varrObj={};rObj[obj.key]=obj.value;returnrObj;});//重新格式化后的Array数组为:[{1:10},{2:20},{3:30}],2.querySelectorAllapplicationvarelems=document.querySelectorAll('selectoption:checked');varvalues=Array.prototype.map.call(elems,function(obj){returnobj.value;});3.误导性案例["1","2","3"].map(parseInt);result[1,NaN,NaN]原理parseInt作为一个函数,然后parseInt(expressionvalue,回调的基数),即map同时传入item和index,分别是parseInt(1,0),parseInt(2,1),parseInt(3,2)