谈谈JavaScript的ECMA5中forEach
一、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里还有一种循环方法:for
–in.该循环实际是为循环"
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"
总之,for
–in
是用来循环带有字符串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相关推荐
- JavaScript中foreach()用法及使用的坑
JavaScript中foreach()用法及使用的坑 JavaScript中foreach是用于遍历数组的方法,将遍历到的元素传递给回调函数,遍历的数组不能是空的要有值. foreach 语法: [ ...
- 也谈谈Javascript中的几个怪异特性(上)
2019独角兽企业重金招聘Python工程师标准>>> Andy Croxall在Ten Oddities And Secrets About JavaScript罗列了他认为的10 ...
- 谈谈JavaScript数组使用注意事项及踩过的坑,排序问题,for in遍历问题等
JavaScript中数组的使用还是比较广发的,尤其与服务器交互的时候,返回结果多半有数组集合,本文探讨JavaScript中数组使用的一些注意事项及踩过的坑汇总. 1.认识数组 JavaScript ...
- 16种JavaScript设计模式(中)
简介 上文中介绍了学习设计模式前需要了解的一些基础概念和js的基础模式-原型模式,没看过的同学可以点这里,本章将介绍以下几种模式 单例模式 策略模式 代理模式 迭代器模式 发布订阅模式 命令模式 组合 ...
- javascript 数组对象中的迭代方法
/* javascript 数组对象中的迭代方法 * ECMAScript5为数组定义了5个迭代方法.每个方法都接受两个参数,第一个是进行迭代的函数,第二个是该函数的作用域对象[可选]. * 进行迭代 ...
- VN-SGG JavaScript 基础(中)
[VN-SGG] JavaScript 基础(中) JavaScript视频课程笔记[入门到精通],这只是笔记!!! 主要内容: this,对象,原型对象,垃圾回收,数组: call.apply,ar ...
- 一家之言:谈谈JavaScript匿名函数(转)
匿名函数的概念大家也许不会陌生,但是我相信下面的内容会打开一些新的思路. 我们知道函数的定义方式有两种: 1 function fn1(){alert('fn1 works');} 2 var fn2 ...
- [转]JavaScript/Node.JS 中的 Promises
JavaScript Promises 初体验 Promise 是什么? Promise 对象用来进行延迟(deferred) 和 异步(asynchronous) 计算. 一个 Promise 处于 ...
- Js中forEach,for in,for of循环的用法
取出数组里边对象的key和value值: 取出数组里边对象的key和value值_chu_geng的博客-CSDN博客_获取数组里面对象的value值 转自:js中forEach,for in,for ...
最新文章
- C# 获取图片的EXIF 信息
- springboot~Compiler时开启插件的注解功能
- html情侣计时器,情侣计时间的app,有没有什么计算情侣在一起 或
- 熟练掌握python是什么概念-Quant面试时说:熟练掌握Python,请三思,不然凉凉~
- 如何摆脱穷打工的命?
- [JavaScript]使用document.createDocumentFragment优化性能
- 什么是功率因数补偿/校正
- Python Basic - write()方法
- ODI 11g安装记录
- 传国宝玺 第二部 降墓 第十六章 三煞天棺
- 前端实战:教你写出简单的侧边栏功能以及返回顶部特效
- 经典怀旧FCgame红白机小游戏在线网页合集版畅玩HTML网站源码
- css_解决浏览器显示盒子的实际像素和你设置的像素不一致的问题;
- 十四届蓝桥青少组模拟赛Python-20221108
- Python实现批量修改图片名称并存入新文件夹
- 2022年漏洞事件盘点
- 原创 牛客网产品笔试题刷题打卡——用户研究
- Velocity模板语言VTL
- 7 数据挖掘案例实战1—百度新闻标题、网址、日期及来源
- 大一适合做什么副业?适合在大学里做的副业
热门文章
- Spring容器创建流程(7)事件派发机制
- Java成神之路——CountDownLatch、CyclicBarrier
- l298n电机哪一端为正_汽车维修要知道的几个答案,交流发电机、调节器有什么功用?...
- flutter android 和 ios 发布
- 2015计算机类专业课类试卷,2015计算机专业知识试题.doc
- 断网python第三方库安装_Python离线断网情况下安装numpy、pandas和matplotlib等常用第三方包...
- Redis--Windos下的安装和使用
- 【maven】scalac:error while loading <root>,Error accessing
- 【算法】剑指 Offer 53 - II. 0~n-1中缺失的数字
- 【Flink】Flink使用withParameters(Configuration)传参