数组方法-->map()
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()的更多相关文章
- 数组方法map(映射),reduce(规约),foreach(遍历),filter(过滤)
数组方法map(映射),reduce(规约),foreach(遍历),filter(过滤) map()方法返回一个由原数组中每一个元素调用一个指定方法后返回的新数组 reduce()方法接受一个函数作 ...
- ES5 数组方法map
概述 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组. 语法 array.map(callback[, thisArg]) 参数 callback 原数组中的元素经 ...
- 用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 ...
- ES6新增的常用数组方法(forEach,map,filter,every,some)
ES6新增的常用数组方法 let arr = [1, 2, 3, 2, 1]; 一 forEach => 遍历数组 arr.forEach((v, i) => { console.log( ...
- JavaScript数组方法--flat、forEach、map
今天到flat了,一个第一次知道该方法还是看到一个面试题,别人给了个答案,用到了flat才知道的方法. 前面也写过关于这道面试题的文章,<一道关于数组的前端面试题>. 这里再来说说吧! f ...
- js高级-数组的map foreach 方法
函数式编程 sort map forEach .... jQuery() 数组的sort 方法 传入一个匿名函数 就是函数式编程 ie9 以上的浏览器支持 map 方法 map方法 返回一个新数 ...
- JavaScript数组方法的兼容性写法 汇总:indexOf()、forEach()、map()、filter()、some()、every()
ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实 ...
- 【前端_js】javascript中数组的map()方法
数组的map()方法用于遍历数组,每遍历一个元素就调用回调方法一次,并将回调函数的返回结果作为新数组的元素,被遍历的数组不会被改变. 语法:let newAarray = arr.map(functi ...
- 数组的高阶方法map filter reduce的使用
数组中常用的高阶方法: foreach map filter reduce some every 在这些方法中都是对数组中每一个元素进行遍历操作,只有foreach是没有 ...
随机推荐
- 【译】x86程序员手册28-7.7任务地址空间
7.7 Task Address Space 任务地址空间 The LDT selector and PDBR fields of the TSS give software systems desi ...
- java对于07excel的读、改、写、并触发计算
InputStream is = null; try { is = new FileInputStream(filePath); } catch (FileNotFoundException e1) ...
- java读取03、07版EXCEL
03版excel,需要用到jxl.jar这个jar包 package test.poi; import java.io.File; import java.io.IOException; import ...
- 个人觉得比较好用的chrome插件
印象笔记·悦读 "悦读"可使博文.文章和网页变得简明而又易于阅读.将其保存至印象笔记以便随时随地阅读. Anything to QRcode 通过右键菜单或地址栏按钮将当前页面地址 ...
- MySql学习笔记(四) —— 数据的分组
前面介绍的聚集函数只是用来计算行数,平均数,最大值,最小值而不用检索所有数据.通过count()函数,我们可以计算生产商1003提供的产品数目,但如果我要查询所有生产商提供的商品数,这就需要进行分组查 ...
- C++算法库学习__std::sort__对 vector进行排序_排序后就可以进行使用std::lower_bound进行二分查找(查找第一个大于等于指定值的迭代器的位置)__std::unique
std::sort 对vector成员进行排序; std::sort(v.begin(),v.end(),compare); std::lower_bound 在排序的vector中进行 ...
- 删除链表中重复的结点_java
package algorithms; /* public class ListNode { int val; ListNode next = null; ListNode(int val) { th ...
- js数组的处理
//重写Array中的indexOf方法,获取数组中指定值的元素的索引 Array.prototype.indexOf = function (val) { for (var i = 0; i < ...
- 华登区块狗系统APP开发
华登区块狗系统开发,陈翎:{.l8O..285l..l22O.}华登区块狗软件开发,华登区块狗APP开发,华登区块狗模式开发,华登区块狗现成源码,狗狗集市理财模式开发 华登区块狗是什么?华登区块狗ap ...
- document.write() 和 document.writeln区别
document.write() 和 document.writeln 都是JavaScript向客户端写入的方法,writeln是以行方式输出的,但并不是指页面实际效果中的换行,两种方法在查看源代码 ...