一、ECMA5中新增了forEach()方法

JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组首先想到的当然是for(var i=0;i<count;i++),在ECMA5中新增了forEach()方法。因为forEach()方法是ECMAscript5增加的方法,IE8以下(包括IE8)浏览器不完全支持ES5。写法简单了许多,但也有短处:你不能中断循环(使用break语句或使用return语句,这个之后实现中断或跳出循环)。

语法:array1.forEach(callbackfn[, thisArg])

参数

定义

array1

必选。一个数组对象。

callbackfn

必选。最多可以接受三个参数的函数。对于数组中的每个元素,forEach 都会调用 callbackfn 函数一次。

thisArg

可选。 callbackfn 函数中的 this 关键字可引用的对象。如果省略 thisArg,则 undefined 将用作 this 值。

异常:如果 callbackfn 参数不是函数对象,则将引发 TypeError 异常。

1、1:原生写法

[].forEach(function(value, index, array) {// ...
});

例如:

var arr = [1,2,3,4];
arr.forEach(function(value,index,array){console.info("index:"+index+" value: "+value);
});

结果输出为:

"index:0 value: 1"
"index:1 value: 2"
"index:2 value: 3"
"index:3 value: 4"

1、2:jQuery方式

$.each([], function(index, value, array) {// ...
});

1.3:map映射模式

[].map(function(value,index,array){//code
})

二、forEach()方法兼容与实现

2、1:因为forEach()方法是ECMAscript5增加的方法,IE8以下(包括IE8)浏览器不完全支持ES5,这里给出了一个IE兼容模式

if (!Array.prototype.forEach) {Array.prototype.forEach = function(callback, thisArg) {var T, k; if (this == null) { throw new TypeError("this is null or not defined"); } var O = Object(this); var len = O.length >>> 0; // Hack to convert O.length to a UInt32 if ({}.toString.call(callback) != "[object Function]") { throw new TypeError(callback + " is not a function"); } if (thisArg) { T = thisArg; } k = 0;while (k < len) { var kValue; if (k in O) { kValue = O[k]; callback.call(T, kValue, k, O); } k++; }  };
}

在IE8环境中贴出代码

var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);
arr.push(4);
arr.forEach(function(value,index,array){alert("index:"+index+" value: "+value);
});

输出结果:

"index:0 value: 1"
"index:1 value: 2"
"index:2 value: 3"
"index:3 value: 4"

三、如何中断forEach()方法

由于之前说到一个问题,如何在forEach里实现break,目前有几种方案

3、1:throw法抛出一个错误,但是需要注意的是要抛出一个可以与别的错误区别开的错误,这样不会干扰别的代码抛出的错误

var BreakException = {};
try {[1, 2, 3].forEach(function(v) {console.log(v); //只输出1,2if (v === 2) throw BreakException;});
} catch (e) {if (e !== BreakException) throw e;
}//结果
1
2

3、2:空循环,在外层加一个标识,如果此标识为true,接下来的循环空跑

[1, 2, 3].forEach(function(v) {if (this.breakFlag === true) {return false;}if (v === 2) {this.breakFlag = true}console.log(v) //只输出1,2
});

3、3:修改数组

var array = [1, 2, 3, 4, 5];
array.forEach(function(item, index) {if (item === 2) {array = array.concat(array.splice(index, array.length - index));}console.log(item); //只输出1,2
});

3、4:使用的every:需要break的场景下,直接使用every或者some.
every: 碰到return false的时候,循环中止
some: 碰到return ture的时候,循环中止

var a = [1, 2, 3, 4, 5]
a.every(function(item, index, arry) {console.log(item); //返回1,2if (item === 2) {return false} else {return true}
});
var a = [1, 2, 3, 4, 5]
a.some(function(item, index, arry) {console.log(item); //返回1,2if (item === 2) {return true} else {return false}
})

四、总结

4、1:for-in
JavaScript里还有一种循环方法:forin.该循环实际是为循环"enumerable"对象而设计的,所以不推荐用for-in来循环一个数组,因为,不像对象,数组的index跟普通的对象属性不一样,是重要的数值序列指标。

var obj = {a:1, b:2, c:3};
for (var prop in obj) {console.log("obj." + prop + " = " + obj[prop]);
}
// 输出:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

  

总之,forin是用来循环带有字符串key的对象的方法。

4.2:参考
  https://msdn.microsoft.com/zh-cn/library/ff679980(v=vs.94).aspx

转载于:https://www.cnblogs.com/molao-doing/articles/6950917.html

谈谈JavaScript的ECMA5中forEach相关推荐

  1. JavaScript中foreach()用法及使用的坑

    JavaScript中foreach()用法及使用的坑 JavaScript中foreach是用于遍历数组的方法,将遍历到的元素传递给回调函数,遍历的数组不能是空的要有值. foreach 语法: [ ...

  2. 也谈谈Javascript中的几个怪异特性(上)

    2019独角兽企业重金招聘Python工程师标准>>> Andy Croxall在Ten Oddities And Secrets About JavaScript罗列了他认为的10 ...

  3. 谈谈JavaScript数组使用注意事项及踩过的坑,排序问题,for in遍历问题等

    JavaScript中数组的使用还是比较广发的,尤其与服务器交互的时候,返回结果多半有数组集合,本文探讨JavaScript中数组使用的一些注意事项及踩过的坑汇总. 1.认识数组 JavaScript ...

  4. 16种JavaScript设计模式(中)

    简介 上文中介绍了学习设计模式前需要了解的一些基础概念和js的基础模式-原型模式,没看过的同学可以点这里,本章将介绍以下几种模式 单例模式 策略模式 代理模式 迭代器模式 发布订阅模式 命令模式 组合 ...

  5. javascript 数组对象中的迭代方法

    /* javascript 数组对象中的迭代方法 * ECMAScript5为数组定义了5个迭代方法.每个方法都接受两个参数,第一个是进行迭代的函数,第二个是该函数的作用域对象[可选]. * 进行迭代 ...

  6. VN-SGG JavaScript 基础(中)

    [VN-SGG] JavaScript 基础(中) JavaScript视频课程笔记[入门到精通],这只是笔记!!! 主要内容: this,对象,原型对象,垃圾回收,数组: call.apply,ar ...

  7. 一家之言:谈谈JavaScript匿名函数(转)

    匿名函数的概念大家也许不会陌生,但是我相信下面的内容会打开一些新的思路. 我们知道函数的定义方式有两种: 1 function fn1(){alert('fn1 works');} 2 var fn2 ...

  8. [转]JavaScript/Node.JS 中的 Promises

    JavaScript Promises 初体验 Promise 是什么? Promise 对象用来进行延迟(deferred) 和 异步(asynchronous) 计算. 一个 Promise 处于 ...

  9. Js中forEach,for in,for of循环的用法

    取出数组里边对象的key和value值: 取出数组里边对象的key和value值_chu_geng的博客-CSDN博客_获取数组里面对象的value值 转自:js中forEach,for in,for ...

最新文章

  1. C# 获取图片的EXIF 信息
  2. springboot~Compiler时开启插件的注解功能
  3. html情侣计时器,情侣计时间的app,有没有什么计算情侣在一起 或
  4. 熟练掌握python是什么概念-Quant面试时说:熟练掌握Python,请三思,不然凉凉~
  5. 如何摆脱穷打工的命?
  6. [JavaScript]使用document.createDocumentFragment优化性能
  7. 什么是功率因数补偿/校正
  8. Python Basic - write()方法
  9. ODI 11g安装记录
  10. 传国宝玺 第二部 降墓 第十六章 三煞天棺
  11. 前端实战:教你写出简单的侧边栏功能以及返回顶部特效
  12. 经典怀旧FCgame红白机小游戏在线网页合集版畅玩HTML网站源码
  13. css_解决浏览器显示盒子的实际像素和你设置的像素不一致的问题;
  14. 十四届蓝桥青少组模拟赛Python-20221108
  15. Python实现批量修改图片名称并存入新文件夹
  16. 2022年漏洞事件盘点
  17. 原创 牛客网产品笔试题刷题打卡——用户研究
  18. Velocity模板语言VTL
  19. 7 数据挖掘案例实战1—百度新闻标题、网址、日期及来源
  20. 大一适合做什么副业?适合在大学里做的副业

热门文章

  1. Spring容器创建流程(7)事件派发机制
  2. Java成神之路——CountDownLatch、CyclicBarrier
  3. l298n电机哪一端为正_汽车维修要知道的几个答案,交流发电机、调节器有什么功用?...
  4. flutter android 和 ios 发布
  5. 2015计算机类专业课类试卷,2015计算机专业知识试题.doc
  6. 断网python第三方库安装_Python离线断网情况下安装numpy、pandas和matplotlib等常用第三方包...
  7. Redis--Windos下的安装和使用
  8. 【maven】scalac:error while loading <root>,Error accessing
  9. 【算法】剑指 Offer 53 - II. 0~n-1中缺失的数字
  10. 【Flink】Flink使用withParameters(Configuration)传参