Array.prototype.map()
Map Array prototype
2023-09-11 14:15:02 时间
map()方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
此方法返回一个新数组,不改变原数组。
let new_array = arr.map(function callback(currentValue, index, array) { // Return element for new_array }[, thisArg])
callback
生成新数组元素的函数,使用三个参数:
currentValue
callback 的第一个参数,数组中正在处理的当前元素。
index
callback 的第二个参数,数组中正在处理的当前元素的索引。
array
callback 的第三个参数,map 方法被调用的数组。
thisArg
可选的。执行 callback 函数时 使用的this 值。
返回一个新数组,每个元素都是回调函数的结果。
map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。
map 不修改调用它的原数组本身(当然可以在 callback 执行时改变原数组)。
使用 map 方法处理数组时,数组元素的范围是在 callback 方法第一次调用之前就已经确定了。在 map 方法执行的过程中:原数组中新增加的元素将不会被 callback 访问到;若已经存在的元素被改变或删除了,则它们的传递到 callback 的值是 map 方法遍历到它们的那一时刻的值;而被删除的元素将不会被访问到。
求数组中每个元素的平方根
var numbers = [1, 4, 9]; var roots = numbers.map(Math.sqrt); // roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]
使用 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}], // kvArray 数组未被修改: // [{key: 1, value: 10}, // {key: 2, value: 20}, // {key: 3, value: 30}]
一般的 map 方法
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]
querySelectorAll 应用
var elems = document.querySelectorAll('select option:checked'); var values = Array.prototype.map.call(elems, function(obj) { return obj.value; });
反转字符串
var str = '12345'; Array.prototype.map.call(str, function(x) { return x; }).reverse().join(''); // 输出: '54321' // Bonus: use '===' to test if original string was a palindrome
通常情况下,map 方法中的 callback 函数只需要接受一个参数,就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。
// 下面的语句返回什么呢: ["1", "2", "3"].map(parseInt); // 你可能觉的会是[1, 2, 3] // 但实际的结果是 [1, NaN, NaN] // 通常使用parseInt时,只需要传递一个参数. // 但实际上,parseInt可以有两个参数.第二个参数是进制数. // 可以通过语句"alert(parseInt.length)===2"来验证. // map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, // 元素索引, 原数组本身. // 第三个参数parseInt会忽视, 但第二个参数不会,也就是说, // parseInt把传过来的索引值当成进制数来使用.从而返回了NaN. function returnInt(element) { return parseInt(element, 10); } ['1', '2', '3'].map(returnInt); // [1, 2, 3] // 意料之中的结果 // 也可以使用简单的箭头函数,结果同上 ['1', '2', '3'].map( str => parseInt(str) ); // 一个更简单的方式: ['1', '2', '3'].map(Number); // [1, 2, 3] // 与`parseInt` 不同,下面的结果会返回浮点数或指数: ['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
polyfill
// 实现 ECMA-262, Edition 5, 15.4.4.19 // 参考: http://es5.github.com/#x15.4.4.19 if (!Array.prototype.map) { Array.prototype.map = function(callback, thisArg) { var T, A, k; if (this == null) { throw new TypeError(" this is null or not defined"); } // 1. 将O赋值为调用map方法的数组. var O = Object(this); // 2.将len赋值为数组O的长度. var len = O.length >>> 0; // 3.如果callback不是函数,则抛出TypeError异常. if (Object.prototype.toString.call(callback) != "[object Function]") { throw new TypeError(callback + " is not a function"); } // 4. 如果参数thisArg有值,则将T赋值为thisArg;否则T为undefined. if (thisArg) { T = thisArg; } // 5. 创建新数组A,长度为原数组O长度len A = new Array(len); // 6. 将k赋值为0 k = 0; // 7. 当 k < len 时,执行循环. while(k < len) { var kValue, mappedValue; //遍历O,k为原数组索引 if (k in O) { //kValue为索引k对应的值. kValue = O[ k ]; // 执行callback,this指向T,参数有三个.分别是kValue:值,k:索引,O:原数组. mappedValue = callback.call(T, kValue, k, O); // 返回值添加到新数组A中. A[ k ] = mappedValue; } // k自增1 k++; } // 8. 返回新数组A return A; }; }
相关文章
- PHP中array_map与array_column之间的关系分析
- go shard map实现
- Java集合中List,Set以及Map等集合体系详解
- [jQuery] $.map, $.each, detach() , $.getJSOIN()
- python用reduce和map把字符串转为数字的方法
- [Javascript] Create 2d array by using Array.from
- [Javascript] Compare a Generator to Using Array Map and Filter
- [ES6] Converting an array-like object into an Array with Array.from()
- [Javascript] Using map() function instead of for loop
- java中List、Array、Map、Set等集合相互转换的最佳方法
- ATITIT提升效率 保持简单性 优化 简化 目录 1.1. 概念简单1 1.2. 语言简单性 弱类型 动态变量 动态实体1 1.3. 数据结构简单 arr 代替了array map s
- 从零开始_学_数据结构(五)——STL(map、set、list、vector)
- ML:分类预测任务中模型评估指标(ER/混淆矩阵ACC、Precision、Recall、AP、mAP、F1、ROC-AUC)简介、使用方法、代码实现、案例应用之详细攻略
- C++ Map取值的坑
- 【方法2】删除Map中Value反复的记录,而且仅仅保留Key最小的那条记录
- 左右Map
- 【编程技巧】Stream流之list转map、分组取每组第一条