详解JS中常见的5 种 for 循环

for 循环在平时开发中使用频率最高的，前后端数据交互时，常见的数据类型就是数组和对象，处理对象和数组时经常使用到 for 遍历，因此需要彻底搞懂这 5 种 for 循环。它们分别为：

1、for

for 循环是出现最早，也是应用最普遍的一个遍历，能够满足绝大多数的遍历。可以遍历 数组、对象、字符串，示例：

2、for in

for in 是在 ES5 中新增的，以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

3、for of

for of 语句在可迭代对象(包括 Array、Map、Set、String、TypedArray、arguments 对象等等)上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

4、for awaitof

创建一个循环，该循环遍历异步可迭代对象以及同步可迭代对象，包括内置的 String、Array，类数组对象(arguments 或 nodeList)，TypedArray, Map, Set 和用户定义的异步/同步迭代器。

它使用对象的每个不同属性的值调用要执行的语句来调用自定义迭代钩子。

类似于 await 运算符一样，该语句只能在一个async function 内部使用

5、forEach

forEach 是ES5版本发布的，按升序为数组中含有效值的每一项执行一次回调函数，那些已删除或者未初始化的项将被跳过(例如在稀疏数组上)，一般认为是 普通for循环 的加强版。

6、map

遍历时可以返回一个新数组，新数组的结果是原数组中每个元素都调用一次提供的函数后返回的值。

1、使用场景差异

for循环是最早最原始的循环遍历语句，for 内部定义一个变量，按照条件进行循环遍历，通常是数组的长度，当超过长度时就停止循环，一般遍历的都是数组或类数组。

遍历对象时，由于对象没有长度，所以使用 Objectkeys() 获取对象的所有属性，以数组形式返回。

for / in主要是用来遍历对象上的可枚举属性，包括原型对象上的属性，按任意顺序进行遍历，遍历对象时获取到的是属性的键值，遍历的是数组，数组的下标当做键值。

for / of用于遍历可迭代对象的数据，包括 Array、Map、Set、String、TypedArray、arguments 对象等等。

for awaitof用于遍历异步可迭代对象，该语句只能在一个async function 内部使用。

forEach 是 for 的加升级版，使用更简单，携带参数更多，但本质还是数组的循环，每个元素都执行一次回调，不会改变原数组。

map是给原数组每个元素都执行一次回调，返回一个新数组，不会改变原数组。

2、功能差异

forEach、map 不支持跳出循环，其他不支持。

for await of 能够支持异步 *** 作，其他的不支持。

对于纯对象的遍历， for in 枚举更方便。

对于数组遍历，如果不需要索引，可以直接使用 forof 获取值，还可支持 break 或 return ;如果还需要索引，使用 forEach 更适合，但不支持 return。

如果是一个数组映射成另一个数组，使用 map 最合适。

3、性能差异

在测试环境、测试数据条件一致的情况下，性能排序为：

for > for of > forEach > map > for in。

for 因为没有额外的函数调用和上下文，所以性能是最快的。

for of 具有 iterator 接口的数据结构，可以使用它来迭代成员，直接读取键值。

forEach 是 for 的语法糖，还有许多的参数和上下文，因此会慢一些。

map 因为它返回的是一个等长的全新数组，数组创建和赋值产生的性能开销较大。

forin 性能最差，因为需要列举对象的所有属性，有转化过程，开销比较大。

在项目开发中，我们应该根据实际需求，去选择一个合适的 for 遍历。以下是一些使用建议：

如果需要把数据映射成另外一个数组，如变成对应布尔值，推荐使用 map ，不会修改原数组，使用语法简单。

数组遍历时，可以使用 for 、forEach 或 forof。

遍历的是纯对象时，推荐使用 for in 。

如果是需要对迭代器遍历，推荐使用 for of。

如果是在数组中筛选符合条件的数组，使用 fillter 。

如何获取的数据呢，是服务器转发过来的还是ajax获取的json

如果是转发过来的，直接在jsp中使用java代码或者jstl遍历即可

如果是js通过ajax获取的json遍历方法有很多

for(var i in list){

    consolelog(list[i]); //遍历list

}

for(var k in map){

    consolelog(k + " = " + map[k]); //遍历map

}

jsp 页面中进入jstl 标签

<%@ taglib prefix="c" uri=">

JS 的 forEach 和 map 方法都是 ES5 为处理数组而新增的迭代方法，区别在于 map 方法返回一个新数组，而 forEach 方法没有返回值。举个例子：

var arr = [1, 2, 4, 7, 8];

// 目标：上述数组里的每一项偶数都+1，使整个数组里都是奇数。

// map 方法

var result = arrmap(function(item) {

    return item % 2 === 0  item + 1 : item;

});

consolelog(result);  // [1, 3, 5, 7, 9]

// forEach 方法

var result = [];

arrforEach(function(item) {

    if (item % 2 === 0) {

        item += 1;

    }

    resultpush(item);

});

consolelog(result);  // [1, 3, 5, 7, 9]

从上述例子可以看出，使用 map 方法要方便的多，代码也更优雅。这里需要注意的是这两个方法不支持 IE9 以下的 IE 浏览器，要兼容的话一般用 for 循环来实现：

// for 循环方法

var result = [];

for (var i = 0; i < arrlength; i++) {

    if (arr[i] % 2 === 0) {

        arr[i] += 1;

    }

    resultpush(arr[i]);

}

consolelog(result);  // [1, 3, 5, 7, 9]

LS说的对，在后台将map集合转为json格式（可以使用谷歌的Gson jar包，没有百度一个）

mapput("list",list);

Gson gson = new Gson();

String json=gsontoJson(map)toString();

转为json 后，界面js *** 作

var obj=eval("("+json+")");

var o=objlist;

for(var i=0;i<olength;i++){

可以使用JavaScript的ArrayprototypeforEach()方法中的index参数来判断是否循环到最后一次，index参数表示当前正在处理的元素的索引，可以与Arraylength进行比较，如果相等，则表示已经处理到最后一个元素。

例如：

let arr = [1, 2, 3, 4, 5];

arrforEach(function(item, index) {

if (index === arrlength - 1) {

consolelog('This is the last item!');

}

});

js循环遍历变量的方式有以下几种：

1for(let i = 0; i < 5; i++)

2forEach

3for of

4for in

那么我们来看下这几种遍历方式的用法，以及退出循环的方法

1for

这是最常用的遍历方法，for用来遍历数组，可以使用break 退出循环，使用continue来跳过本次循环。

2forEach

除了抛出异常以外，没有办法中止或跳出 forEach() 循环。

并且forEach不会改变原来的数组

3for of

for of 可以迭代 可迭代对象 （包括 Array ， Map ， Set ， String ， TypedArray ， arguments 对象等等）

对于for of，可以由break, throw 或return终止, 可以用continue略过此次循环。在这些情况下，迭代器关闭。

以上就是关于详解JS中常见的5 种 for 循环全部的内容，包括:详解JS中常见的5 种 for 循环、Map,List如何在jsp里遍历。js如何遍历这两种集合。foreach .each、在html页面的js中怎么获取Java中返回的map集合等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！