关于前端:理解JS中的map的多种用法

4次阅读

共计 1457 个字符,预计需要花费 4 分钟才能阅读完成。

map()
map() 办法会返回一个新数组,数组中的元素为原始数组元素调用函数解决后的值。该办法依照原始数组元素程序顺次解决元素。

其语法如下参数

体现
map 办法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值(包含 undefined)组合起来造成一个新数组。callback 函数只会在有值的索引上被调用;那些素来没被赋过值或者应用 delete 删除的索引则不会被调用。因为 map 生成一个新数组,当你不打算应用返回的新数组却应用 map 是违反设计初衷的,请用 forEach 或者 for-of 代替。你不该应用 map: A) 你不打算应用返回的新数组,或 / 且 B) 你没有从回调函数中返回值。
callback 函数会被主动传入三个参数:数组元素,元素索引,原数组自身 var map = Array.prototype.map var a = map.call(“Hello World”, function(x) {return x.charCodeAt(0);}) // a 的值为 [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] 能够链式调用
arr.map(item=>item.time).map(item=>item.scaner) 留神点:map 办法不会对空数组进行检测;map 办法遍历数组时会返回一个新数组,不会扭转原始数组;map 办法有返回值,能够 return 进去,map 的回调函数中反对 return 返回值;map 办法无奈遍历对象,仅实用于数组的遍历。
map 办法解决数组元素的范畴是在 callback 办法第一次调用之前就曾经确定了。
调用 map 办法之后追加的数组元素不会被 callback 拜访。如果存在的数组元素扭转了,那么传给 callback 的值是 map 拜访该元素时的值。
在 map 函数调用后但在拜访该元素前,该元素被删除的话,则无奈被拜访到。

场景实例 1. 应用 map 从新格式化数组中的对象 var kvArray = [{key: 1, value: 10},                {key: 2, value: 20},                {key: 3, value: 30}]; var reformattedArray = kvArray.map(function(obj) {var rObj = {};    rObj[obj.key] = obj.value;    return rObj; }); // reformattedArray 数组为:[{1: 10}, {2: 20}, {3: 30}],2.querySelectorAll 利用 var elems = document.querySelectorAll(‘select option:checked’); var values = Array.prototype.map.call(elems, function(obj) {return obj.value;});3. 误导案列 [“1”, “2”, “3”].map(parseInt);
后果 [1,NaN,NaN] 原理 parseInt 作为了一个函数,而后 parseInt(表达式值,callback 的基数),也就是 map 将 item,index 均传进去了,为 parseInt(1,0),parseInt(2,1),parseInt(3,2)

正文完
 0