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循环的所有缺陷。而且，它可以正确响应break、continue和return语句。

//循环数组
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循环之类的其它循环方法，都没提。因为根据我的使用经验，上面的几种已经可以应对几乎所有情况了。

相关资源：JS5种遍历对象的方式_遍历对象的方法-其它代码类资源-CSDN文库

js循环的几种方式总结相关推荐

在HTML 中嵌入 JS 代码的三种方式
一,在HTML中嵌入JS代码的第一种方式:行间事件行间事件是指将JavaScript函数写到HTML元素中的执行事件. 1.JavaScript 是一种事件驱动型的编程语言,通常都是在发生某个事件的 ...
shell - 循环的2种方式
shell - 循环的2种方式 0, 题目描述以打印0-50以内7的倍数为列 1, for循环 1.1 常规for循环 #!/bin/bash for((i=0; i<50; i+=7)) d ...
java跳出for循环_Java跳出多层for循环的4种方式
Java跳出多层for循环的4种方式一.使用return关键字控制 for (int i = 0;i<10;i++){ for (int j = 0; j<10; j++) { if ( ...
Java循环的三种方式分享
转自: Java循环的三种方式分享下文笔者讲述java循环的三种方式分享,如下所示一.while循环 while语法:while(循环条件){循环体}while关键字处理循环先判断循环条件当条件成 ...
JavaScript系列-02 HTML嵌入js代码的第二种方式
javaScript系列 HTML中嵌入js代码的第二种方式脚本块的方式文章目录 javaScript系列前言一.了解脚本块的方式 1.1运行规则二.执行原理 1.编写代码 2.效果总结 ...
JavaScript——关于JavaScript、在HTML中嵌入JS代码的三种方式、变量
文章目录 JavaScript 01 关于JavaScript 1.1 JS的发展历史 1.2 JS的特性 1.3 JS的组成 1.4 JSP和JS的区别 02 在HTML中嵌入JS代码的三种方式 2 ...
HTML嵌入JS代码的三种方式
目录一.HTML嵌入JS代码的第一种方式:直接加一个事件句柄跟表达式二.HTML嵌入JS代码的第二种方式:脚本块三.HTML嵌入JS代码的第三种方式:外部引入js文件一.HTML嵌入JS代码的 ...
java中Map循环的几种方式
package com.xhx.collection;import org.junit.Test;import java.util.HashMap; import java.util.Iterator ...
js循环遍历数组的方式
前言最近在写前端代码,里面经常涉及到数组的循环取值.这里简单总结下前端中数组遍历的四种方式: 数组下标循环 for in 循环 for of 循环 foreach循环例子假设有如下数组:memb ...

js循环的几种方式总结

js循环的几种方式总结相关推荐

最新文章

热门文章