<script type="text/javascript">
/*对比:
1、map速度比foreach快
2、map会返回一个新数组,不对原数组产生影响,foreach不会产生新数组,foreach返回undefined
3、map因为返回数组所以可以链式操作,foreach不能
4, map里可以用return ,而foreach里用return不起作用,foreach不能用break,会直接报错*/
/*方法一:*/
var arr1 = [1, 2, 3, 4, 5, 6];
for(var i = 0, len = arr1.length; i < len; i++) { //优化性能处理
console.log(arr1[i], 'for遍历出来的数据'); //每个item 1,2,3,4,5,6
}
/*方法二:*/
/*forEach方法中的function回调支持3个参数,第1个是遍历的数组内容;第2个是对应的数组索引,第3个是数组本身*/
var arr2 = [{
name: 'bob',
age: 20
},
{
name: 'tom',
age: 18
},
{
name: 'sos',
age: 19
}
]
arr2.forEach((val, i) => { //没有返回值的,对原来数组也没有影响
console.log(val, '遍历出来的每个obj')
});
/*方法三:*/
var fruits = [1, 2, 3, 4, 5, 6, 7, 8];
let arr = fruits.map((item, index) => {
console.log(item, 'top')
console.log(index, 'top')
return item * 8
})
console.log(arr, 'newarr') //[8, 16, 24, 32, 40, 48, 56, 64] "newarr"
var a = fruits.indexOf("Apple", 4);
console.log(a)
//for 和 forEach都是普通循环,map 带返回值并且返回一个新数组;
/*
*当前元素的值,当期元素的索引值,当期元素属于的数组对象;
语法:array.map(function(currentValue,index,arr), thisValue)
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。
* */
/*方法四:*/
/*兼容写法:
不管是forEach还是map在IE6 - 8 下都不兼容( 不兼容的情况下在Array.prototype上没有这两个方法), 那么需要我们自己封装一个都兼容的方法:*/
/**
* 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;
}
</script>

js数组遍历的常用的几种方法以及差异和性能优化的更多相关文章

  1. js数组和字符串去重复几种方法

    js数组去重复几种方法 第一种:也是最笨的吧. Array.prototype.unique1 = function () { var r = new Array(); label:for(var i ...

  2. JS中遍历对象属性的四种方法

    Object.keys().Object.values().Object.entries().for...in.Map (1)Object.keys(): let ex1 = {c1: 'white' ...

  3. JS跳转页面常用的几种方法

    第0种:(常用) function triggerAOnclick(){ window.open("http://localhost/jwxt/forward/2TrainSchemeDat ...

  4. 浅谈MySQL中优化sql语句查询常用的30种方法 - 转载

    浅谈MySQL中优化sql语句查询常用的30种方法 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中使 ...

  5. 浅谈6种JS数组遍历方法的区别

    本篇文章给大家介绍一下6种JS数组遍历方法:for.foreach.for in.for of.. each. ().each的区别.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...

  6. 转→js数组遍历 千万不要使用for...in...

    看到一篇内容还不错,但是排版实在糟糕, 逼死强迫症患者啊,直接拉下去找原文连接,找到了,但是已经消失了···500错误... 第一次因为实在看不下去一篇博客的排版, 为了排版而转载... 转载地址:h ...

  7. JS去除数组中重复值的四种方法

    JS去除数组中重复值的四种方法 1 /// <summary>            o[this[i]] = "";  }      }       newArr.p ...

  8. js数组遍历和对象遍历

    针对js各种遍历作一个总结分析,从类型用处:分数组遍历和对象遍历:还有性能,优缺点等. JS数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9]; for ( ...

  9. js页面跳转常用的几种方式(转)

    js页面跳转常用的几种方式 转载  2010-11-25   作者:    我要评论 js实现页面跳转的几种方式,需要的朋友可以参考下. 第一种: 复制代码代码如下: <script langu ...

随机推荐

  1. 2014山东省“浪潮杯”第五届ACM省赛总结

    一次比赛做一次总结,弱菜又来总结了…… 我这种大四的又死皮赖来混省赛了,貌似就我和山大威海的某哥们(不详其大名)了吧.颁奖前和他聊天,得知他去百度了,真是不错,ORZ之. 比赛流水账: 题目目前不知道 ...

  2. skynet源码阅读<2>--网络部分

    先来看下socket_server的数据结构,这里简称为ss: struct socket_server { int recvctrl_fd; int sendctrl_fd; int checkct ...

  3. python中PIL.Image和OpenCV图像格式相互转换

    PIL.Image转换成OpenCV格式: import cv2 from PIL import Image import numpy image = Image.open("plane.j ...

  4. 一题多解 —— linux 日志文件(log)reload 重新载入

    1. tail -F 等同于–follow=name –retry,根据文件名进行追踪,并保持重试,即该文件被删除或改名后,如果再次创建相同的文件名,会继续追踪 也即可以间接实现从日志文件末尾,不断载 ...

  5. Opencv+Zbar二维码识别(标准条形码/二维码识别)

    使用Opencv+Zbar组合可以很容易的识别图片中的二维码,特别是标准的二维码,这里标准指的是二维码成像清晰,图片中二维码的空间占比在40%~100%之间,这样标准的图片,Zbar识别起来很容易,不 ...

  6. ekhtml使用总结

    ekhtml是一个高效SAX方式的HTML解析库. 文件说明 官网下载ekhtml-0.3.2.tar.gz文件解压后,内部包括源码.测试文件.文档.编译脚本等. 如需编译成静态库或动态库后进行集成, ...

  7. 「网络流24题」「LuoguP2774」方格取数问题(最大流 最小割

    Description 在一个有 m*n 个方格的棋盘中,每个方格中有一个正整数.现要从方格中取数,使任意 2 个数所在方格没有公共边,且取出的数的总和最大.试设计一个满足要求的取数算法.对于给定的方 ...

  8. JAVA GUI THREAD---***

    针对用户界面的多线程 GUI下面的多线程方式 1.与GUI类分离方式 分离方式,在创建线程类实例时需要代入GUI句柄,通过GUI句柄操作GUI,也就是说线程类和GUI类都要有对方的实例,以便相互操作. ...

  9. org.hibernate.hql.ast.QuerySyntaxException: Student is not mapped [from Student as stu where stu.sclass=?]

    java.lang.IllegalArgumentException: org.hibernate.hql.ast.QuerySyntaxException: t_aty_disease is not ...

  10. Codeforces - 9D - How many trees? - 简单dp - 组合数学

    https://codeforces.com/problemset/problem/9/D 一开始居然还想直接找公式的,想了想还是放弃了.原来这种结构是要动态规划. 状态是知道怎么设了,$t_{nh} ...