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. 平凡的世界小说txt下载完整版

    <平凡的世界>正白纸黑字的告诉我们这样的人生真谛.它响亮的提出,人,无论在什么位置,无论多么贫寒,只要一颗火热的心在,只要能热爱生活,上帝对他就是平等的.只有作一名劳动者,不把不幸当作负担 ...

  2. Alpha项目测试

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/homework/3338 这个作业要求在哪里 htt ...

  3. Docker方式安装QIIME 2

    # 下载最新版QIIME 2 docker pull qiime2/core:2017.7 # 测试是否安装成功 docker run -t -i -v $(pwd):/mnt/hgfs/2017 q ...

  4. Java基础(三)--final关键字

    final通常是指"不可改变的",例如我们使用的常量 通常可以有三种使用情况: 一.final修饰数据 如果final修饰数据,也就是通常所说的常量,从字面上看,常量就是不能修改的 ...

  5. Linux常用命令——压缩与解压缩命令

    常用压缩格式:  .zip   .gz   .bz2   .tar.gz   .tar.bz2 1..zip格式压缩 zip 压缩文件名 源文件 压缩文件 zip -r 压缩文件名 源目录 压缩目录 ...

  6. java几种连接数据库的方法

    package bean; import java.sql.Connection;import java.sql.DriverManager; public class jdbcTest { //不同 ...

  7. [转载] kprobe原理解析(一)

    From: https://www.cnblogs.com/honpey/p/4575928.html kprobe原理解析(一) kprobe是linux内核的一个重要特性,是一个轻量级的内核调试工 ...

  8. 我的MYSQL学习心得链接

    http://www.cnblogs.com/lyhabc/p/3793524.html

  9. libevent reference Mannual I

    FYI:http://www.wangafu.net/~nickm/libevent-book/ This lib is a integral of asynchronous IO. we shoul ...

  10. chrome浏览器中解决embed标签 loop="true" 背景音乐无法循环的问题。

    今天试了下在html网页中加入背景音乐并设置为循环播放.一开始用<embed>标签,设置loop="true", 但是结果发现在IE浏览器可以,但是在chrome浏览器 ...