Array.prototype.map()

1 语法

const new_array = arr.map(callback[, thisArg])

2 简单栗子

let arr = [1, 5, 10, 15];
let newArr = arr.map(function(x) {
return x * 2;
});
// arr is now [2, 10, 20, 30]
// newArr is still [1, 5, 10, 15]

3 参数说明

callback
生成新数组元素的函数,使用三个参数:
currentValue
callback 的第一个参数,数组中正在处理的当前元素。
index
callback 的第二个参数,数组中正在处理的当前元素的索引。
array
callback 的第三个参数,map 方法被调用的数组。
thisArg
可选的。执行 callback 函数时 使用的this 值。

4 返回值

一个新数组,每个元素都是回调函数的结果。

5 详细说明

map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。

callback 函数会被自动传入三个参数:数组元素,元素索引,原数组本身。

如果 thisArg 参数有值,则每次 callback 函数被调用的时候,this 都会指向 thisArg 参数上的这个对象。如果省略了 thisArg 参数,或者赋值为 null 或 undefined,则 this 指向全局对象 。

map 不修改调用它的原数组本身(当然可以在 callback 执行时改变原数组)。

使用 map 方法处理数组时,数组元素的范围是在 callback 方法第一次调用之前就已经确定了。在 map 方法执行的过程中:原数组中新增加的元素将不会被 callback 访问到;若已经存在的元素被改变或删除了,则它们的传递到 callback 的值是 map 方法遍历到它们的那一时刻的值;而被删除的元素将不会被访问到。

6 示列

6.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 is now [{1:10}, {2:20}, {3:30}],
// kvArray is still [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}]

6.2 字符串使用map方法进行遍历

var str="aabccd";
var obj={};
[].map.call(str,function(x,y,z){
if(!obj[x]){
obj[x]=1
}else{
obj[x]+=1
}
});
//直接使用字符串的遍历器接口 ES6
for (let x of str) {console.log(x)}
// obj is {a: 2, b: 1, c: 2, d: 1}

6.3 反转字符串

var str = '12345';
var reverseStr = Array.prototype.map.call(str, function(x) {
return x;
}).reverse().join('');
// reverseStr is '54321'

6.4 遍历dom元素节点

var elems = document.querySelectorAll("div");
var classNames = Array.prototype.map.call(elems, function(obj) {
return obj.className;
});
console.log("获取页面中所有div元素使用的class",classNames);

7 兼容旧浏览器

在那些没有原生支持 map 方法的浏览器中,你可以使用下面的 Javascript 代码来实现它。

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;
};
}

Array.prototype.map()方法详解的更多相关文章

  1. Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解

    Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解 一.Jquery遍历筛选数组 1.jquery grep()筛选遍历数组 $().ready( function(){ v ...

  2. JavaScript中Array.prototype.sort()的详解

    摘抄来源:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort sor ...

  3. Array.prototype.slice用法详解

    slice方法是定义在js数组原型中的方法,用于截取数组的部分元素,具体使用如下: arrayExample.slice(start, end); start为起始元素位置,end为截止元素位置,如: ...

  4. JavaScript中数组Array.sort()排序方法详解

    JavaScript中数组的sort()方法主要用于对数组的元素进行排序.其中,sort()方法有一个可选参数.但是,此参数必须是函数. 数组在调用sort()方法时,如果没有传参将按字母顺序(字符编 ...

  5. JavaScript中数组Array方法详解

    ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...

  6. Array.prototype.map()详解

    今天在地铁上看到这样一个小例子: ["1","2","3"].map(parseInt); 相信很多人和我一样,觉得输出的结果是[1,2,3 ...

  7. Javascript中Array.prototype.map()详解

    map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数.callback 每次执行后的返回值组合起来形成一个新数组. callback 函数只会在有值的索引上被调用:那些从来没被赋 ...

  8. 5个现在就该使用的数组Array方法: indexOf/filter/forEach/map/reduce详解(转)

    ECMAScript5标准发布于2009年12月3日,它带来了一些新的,改善现有的Array数组操作的方法.然而,这些新奇的数组方法并没有真正流行起来的,因为当时市场上缺乏支持ES5的浏览器.     ...

  9. JS Array常用方法indexOf/filter/forEach/map/reduce详解

    Array共有九个方法   Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.protot ...

随机推荐

  1. WIN7 x64下java 8的环境变量配置

    Oracle官网下载JDK进行安装:我下载的是Java 8 JDK,地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-do ...

  2. InChatter系统之客户端消息处理中心

    一.模块结构 首先来看下客户端消息处理中心模块的简单结构: ChatCallback:服务器端我们定义的回调接口IChatCallback的客户端实现 ChatMsgCenter:服务端的消息处理中心 ...

  3. 计算器Pro应用项目源码

    本计算器实现了一些简单的功能,可能本身还存在一些缺陷,希望大家提建议,能够改进一下. 源码项目我已经上传到源码天堂那里了:http://code.662p.com/list/11_1.html < ...

  4. 中国版 Office 365 (X-Tenant / Tango) 功能验证报告 - 1 简介

    花了点时间做了一次Office 365 X-Tenant的 POC,对过程做了记录和总结,在这里会陆续分享: (一) 简介 这次POC的系统环境是模拟一个公司的生产环境: 1. 公司总部在国外,拥有 ...

  5. iOS开发 数据缓存-数据库

    iOS中数据存储方式 Plist(NSArray\NSDictionary) Preference(偏好设置\NSUserDefaults) NSCoding (NSKeyedArchiver\NSk ...

  6. Linux Mint 教程

    Linux Mint 安装文本编辑软件 sudo apt-get install gedit linux操作系统上面开发程序, 光有了gcc 是不行的它还需要一个   build-essential软 ...

  7. 哈尔滨工程大学ACM预热赛 补题

    链接:https://ac.nowcoder.com/acm/contest/554/A来源:牛客网 小虎刚刚上了幼儿园,老师让他做一个家庭作业:首先画3个格子,第二行有2个格子,第三行有1个格子. ...

  8. 【C语言】控制台窗口图形界面编程(五):文本移动

    目录 00. 目录 01. CHAR_INFO结构 02. ScrollConsoleScreenBuffer函数 03. 程序示例 04. 官方参考程序 00. 目录 01. CHAR_INFO结构 ...

  9. hdfs深入:04、hdfs当中的元数据管理以及元数据节的查看

    6.HDFS的元数据信息FSimage以及edits和secondaryNN的作用 fsimage:存放的是一份最完整的元数据信息,内容比较大edits:元数据操作日志,记录了一段时间的元数据信息的变 ...

  10. PyTorch学习笔记——softmax和log_softmax的区别、CrossEntropyLoss() 与 NLLLoss() 的区别、log似然代价函数

    1.softmax 函数 Softmax(x) 也是一个 non-linearity, 但它的特殊之处在于它通常是网络中一次操作. 这是因为它接受了一个实数向量并返回一个概率分布.其定义如下. 定义 ...