脚本宝典收集整理的这篇文章主要介绍了

js循环的几种方式总结

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

前言

只描述了一些最基本的用法,和一些可能遇到的问题。一些细节,或者特殊写法之类的,没有。

1.for循环

最基本的循环方式,不多说。但是我在其它某篇文章上,听别人说,这种最基本的循环才是速度最快的,效率最高的。(就是这https://www.jb51.net/article/...

for(var i = 0;i<5;i++){
 console.log(i)
}

2.for in循环

for in循环是用来遍历对象的。要知道JavaScript对象的所有属性都是字符串,不过属性对应的值可以是任意数据类型。(注意:遍历时不仅能读取对象自身上面的成员属性,也能遍历出对象的原型属性)

let obj = {a:1, b:2, c:3};
for (let prop in obj) {    //prop指对象的属性名
console.log(prop, obj[prop]);
}
// 输出:
// a,1
// b,2
// c,3

for in同样可以用来循环数组,但是不推荐这么做。由于Array也是对象,而它的每个元素的索引被视为对象的属性,因此,for in循环可以直接循环出Array的索引,但得到的是String而不是Number,所以一旦你想用这个index去进行计算,就会出错。而且因为会遍历原型属性,所以可能得出的结果不会是你想要的(具体细节不多说,需要了解的自己查询,反正很多坑)。虽然可以用hasOwnProperty()方法避免这个缺陷,但是何必呢,循环方法那么多,换一个就是了。

for (var index in myArray) { // 不推荐这样
console.log(myArray[index]);
}

3. forEach循环

没什么好说的,看例子。(注意:forEach循环里面没办法用break跳出循环。而且在IE中无法实现,需要做兼容处理。)

let arr = ['123','qwewq','sfds'];
myArray.forEach(function (value, index) {
    console.log(value,index);
});
//输出
//"123",1
//"qwewq",2
//"sfds",3

4.for of循环

作为ES6新增的循环方法,个人觉得相当好用,而且方便。这个方法避开了for-in循环的所有缺陷。而且,它可以正确响应breakcontinuereturn语句。

//循环数组
let arr = ['123','qwewq','sfds'];
for(let item of arr){
    console.log(item);    //item指的的就是数组每一项的值。不是索引。
}
//输出
//'123'
//'qwewq'
//'sfds'

for-of循环不仅支持数组,还支持大多数类数组对象,例如DOM NodeList对象。但是for of也有一个致命伤,就像例子看到的,没有索引。对,这是优点也是缺点。遍历数组对象,直接就是item.属性(或者item[属性]),而不用像for循环那样arr[index].属性(arrindex)。但是你有的时候真的就得用到index。不好意思,只能把数组转成Map()。但我觉得真的需要用到index,还是换成forEach吧。

//遍历字符串
let name = 'Asher';
for (let char of name){
    console.log(char);         //A s h e r
}

此外,对于在ES6中新增的两种类型,Map和Set(如果学过Java或者其他有这两种类型的语言,会发现用法几乎一样)。for of同样适用。

let mapArray = new Map();
for (let [key, value] of mapArray) {
   console.log(key,value);
}
//Set集合同理,不列举了。

总结

以上就是常用的几种for循环总结,很多细节,原理之类的没有写。因为这只是一个简单使用的介绍,不想写那么多。此外,还有很多像while循环,do-while循环之类的其它循环方法,都没提。因为根据我的使用经验,上面的几种已经可以应对几乎所有情况了。

总结

以上是脚本宝典为你收集整理的

js循环的几种方式总结

全部内容,希望文章能够帮你解决

js循环的几种方式总结

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过