map()方法:

  Array.map((数组元素, 数组元素的下标, 数组本身)=>{}[,thisArray])

  1、调用时在数组内部发生了一次从 0 到 length-1 的循环;

  2、返回值是由每次循环调用的返回值所组成的数组;

  3、thisArray 可选,指定函数中的 this,注意箭头函数

测试用例及结果: 

1、未指定this 

var arr1 = ['a', , 'c', 'd'];
arr1.map(function(parameter, index, arr) {
console.log('--------------');
console.log('parameter:', parameter);
console.log('index:', index);
console.log('arr:', arr);
console.log('this', this);
console.log('--------------');
return '这是第 ' + index + '次';
});

2、指定 this

 var arr1 = ['a', , 'c', 'd'];
var arr2 = ['e', 'f', 'g', 'h'];
arr1.map(function(parameter, index, arr) {
console.log('--------------');
console.log('parameter:', parameter);
console.log('index:', index);
console.log('arr:', arr);
console.log('this', this);
console.log('--------------');
return '这是第 ' + index + '次';
}, arr2);

this 指向了我们指定的 arr2

3、使用 箭头函数 的情况下,指定 this

 var arr1 = ['a', , 'c', 'd'];
var arr2 = ['e', 'f', 'g', 'h'];
arr1.map((parameter, index, arr) => {
console.log('--------------');
console.log('parameter:', parameter);
console.log('index:', index);
console.log('arr:', arr);
console.log('this', this);
console.log('--------------');
return '这是第 ' + index + '次';
}, arr2);

这时我们发现this指向了全局作用域的 this

与Array.forEach的区别就是,forEach 在每次循环的过程中没有 return

var arr1 = ['a', , 'c', 'd'];
var arr2 = ['e', 'f', 'g', 'h'];
arr1.forEach(function(parameter, index, arr) {
console.log('--------------');
console.log('parameter:', parameter);
console.log('index:', index);
console.log('arr:', arr);
console.log('this', this);
console.log('--------------');
return '这是第 ' + index + '次';
}, arr2);

无论是 map 方法还是 forEach 方法,在IE6-8下都不兼容!

兼容方法:

 /**
* forEach遍历数组
* @param callback [function] 回调函数;
* @param context [object] 上下文;
*/
Array.prototype.myForEach = function myForEach(callback,context){
context = context || window;
if('forEach' in Array.prototye) {
this.forEach(callback,context);
return;
}
//IE6-8下自己编写回调函数执行的逻辑
for(var i = 0,len = this.length; i < len;i++) {
callback && callback.call(context,this[i],i,this);
}
}
/**
* map遍历数组
* @param callback [function] 回调函数;
* @param context [object] 上下文;
*/
Array.prototype.myMap = function myMap(callback,context){
context = context || window;
if('map' in Array.prototye) {
return this.map(callback,context);
}
//IE6-8下自己编写回调函数执行的逻辑
var newAry = [];
for(var i = 0,len = this.length; i < len;i++) {
if(typeof callback === 'function') {
var val = callback.call(context,this[i],i,this);
newAry[newAry.length] = val;
}
}
return newAry;
}

数组方法-->map()的更多相关文章

  1. 数组方法map(映射),reduce(规约),foreach(遍历),filter(过滤)

    数组方法map(映射),reduce(规约),foreach(遍历),filter(过滤) map()方法返回一个由原数组中每一个元素调用一个指定方法后返回的新数组 reduce()方法接受一个函数作 ...

  2. ES5 数组方法map

    概述 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组. 语法 array.map(callback[, thisArg]) 参数 callback 原数组中的元素经 ...

  3. 用ES5实现ES6的数组方法map

    先举个常见的栗子: var arr = [1,2,3,4,6,7,8,9,12,3,25,63,100] var arr2 = arr.map(item => item += 1) consol ...

  4. ES6新增的常用数组方法(forEach,map,filter,every,some)

    ES6新增的常用数组方法 let arr = [1, 2, 3, 2, 1]; 一 forEach => 遍历数组 arr.forEach((v, i) => { console.log( ...

  5. JavaScript数组方法--flat、forEach、map

    今天到flat了,一个第一次知道该方法还是看到一个面试题,别人给了个答案,用到了flat才知道的方法. 前面也写过关于这道面试题的文章,<一道关于数组的前端面试题>. 这里再来说说吧! f ...

  6. js高级-数组的map foreach 方法

    函数式编程  sort map forEach  ....  jQuery() 数组的sort 方法 传入一个匿名函数 就是函数式编程 ie9 以上的浏览器支持 map 方法 map方法 返回一个新数 ...

  7. JavaScript数组方法的兼容性写法 汇总:indexOf()、forEach()、map()、filter()、some()、every()

    ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实 ...

  8. 【前端_js】javascript中数组的map()方法

    数组的map()方法用于遍历数组,每遍历一个元素就调用回调方法一次,并将回调函数的返回结果作为新数组的元素,被遍历的数组不会被改变. 语法:let newAarray = arr.map(functi ...

  9. 数组的高阶方法map filter reduce的使用

    数组中常用的高阶方法: foreach    map    filter    reduce    some    every 在这些方法中都是对数组中每一个元素进行遍历操作,只有foreach是没有 ...

随机推荐

  1. Windows下80端口被进程System&PID=4占用的解决方法

    我的占用原因是 SQL Server Reporting Services,停止掉这个服务并设置其为手动启动即可 如果你并没有安装 SQL Server,请参考下文解决 =============== ...

  2. mongodb Shell 启动

    开始运行mongodb 准备 上篇说过,通过brew安装的程序目录在 /usr/local/Cellar下面 下面,我们先看一下 mongodb的可执行程序命令 cd /usr/local/Cella ...

  3. Erwin 带注释(comment )

    1. Database>Pre & Post Script > Model-level %ForEachTable() { alter TABLE %TableName COMME ...

  4. 创建一个 Vue 的实例

    每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({         // 选项 }) 选项:el.data.methods el: 类型: ...

  5. thinkphp 5.0 “No input file specified”问题

    最近在用thinkphp5.0,想要试一下强制路由模式,却发现一直报错, 在网上一通乱找,最后发现是因为不能正确识别path_info造成的, 解决方案就是在 public目录下修改 ".h ...

  6. Go:字符串操作

    Package strings:https://golang.google.cn/pkg/strings/ package main import ( "fmt" "st ...

  7. 微信小程序官方指南手册,教你如何使用微信小程序!

    2017年1月9日,小程序如约而至.程序员们都讨论的热火朝天,但是真正使用过微信小程序的又有几个呢?下面今天我们给大家介绍下微信小程序到底应该如何使用? 首先,你的微信必须是最新版本的,微信官方是从要 ...

  8. 浅谈微信小程序对于房地产行业的影响

    前几日,我们曾经整理过一篇文章是关于微信小程序对于在线旅游业的影响的一些反思(浅谈微信小程序对OTA在线旅游市场的影响),近日由于生活工作的需要走访了一些房地产的住宅商品房,突然想到微信小程序对于房地 ...

  9. 782B The Meeting Place Cannot Be Changed(二分)

    链接:http://codeforces.com/problemset/problem/782/B 题意: N个点,需要找到一个点使得每个点到这个点耗时最小,每个点都同时开始,且都拥有自己的速度 题解 ...

  10. How Can You Tell the Difference Between LINQ Methods and Query Builder Methods?

    LINQ's method syntax looks very similar to the query builder methods,except for one big difference:t ...