JavaScript中的迭代器与循环

JavaScript中的迭代器与循环
引言：

本文涉及内容包括：
- forEach方法
- for-in方法
- for-of方法
- eval（）方法
- map（）方法
今天来总结一下，JS中我们常见的循环方式与迭代器，深入了解他们之间的区别，及适合的使用场景。

最早的数组遍历方式
```
var a = ["a", "b", "c"];
for(var index = 0;index < a.length;index++){
  console.log(a[index]);
}
```
for循环，我们最熟悉也是最常用的循环迭代方式，后来的许多迭代方法都是基于for循环封装的。

1 forEach

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

forEach遍历数组，而不是遍历对象哦，而且在遍历的过程中不能被终止,必须每一个值遍历一遍后才能停下来. 也就是说：你不能使用break来退出循环, 不能使用return语句来返回到外层 jquery中forEach 注意其与jQuery的$.each类似，只不过参数正好是相反的！ $.each([], function(index, value, array) { // ... });

2 for...in 适合进行普通对象的遍历 for-in循环遍历对象的key，即键值对的键名。特性如下： 1. 方法遍历到的index（或key）类型为String，若无意间进行了字符串计算，会带来许多不便。 2. for-in循环会遍历对象的所有可枚举属性。什么意思呢？就是除了遍历数组元素之外，还会遍历：自定义属性，原型上的属性。 3. 一般不推荐遍历数组，因为for in遍历顺序是随机的，适合进行普通对象的遍历。
```
 var myArry =[1,2,3,4]; 
myArry.desc ='four'; 
for(var value in myArry){
//循环key console.log(value) 
}

//"0" 
//"1" 
//"2" 
//"3" 
//"desc"
```
注意这里添加上去的属性也被遍历出来了 for…in由于历史遗留问题，它遍历的实际上是对象的属性名称，一个Array数据也是一个对象，数组中的每个元素的索引被视为属性名称，所以我们可以看到使用for…in循环Array数组时，拿到的其实是每个元素的索引. PS:若要避免原型链上的属性也被遍历到，可采用hasOwnProperty()方法去过滤掉对象原型链上的属性。 for…of for-of循环适合遍历数组循环遍历对象的值，即键值对的键值。
```
var myArry =[1,2,3,4];
myArry.desc ='four';
for(var value of myArry){
  console.log(value)
}
//1
//2
//3
//4
```
特性如下：

- 这是最简洁、最直接的遍历数组元素的语法。

- 这个方法避开了for-in循环的所有缺陷，解决了forEach的不可中断问题。

- for…of为ES6新增方法。

- 不推荐for…of遍历普通对象，实在需要用for…of遍历，可搭配Object.keys()实现。

代码如下：
```
var student={
    name:'wujunchuan',
    age:22,
    locate:{
    country:'china',
    city:'xiamen',
    school:'XMUT'
    }
}
for(var key of Object.keys(student)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+student[key]);
}
```
for…of

for-of循环适合遍历数组

循环遍历对象的值，即键值对的键值。
```
var myArry =[1,2,3,4];
myArry.desc ='four';
for(var value of myArry){
  console.log(value)
}
//1
//2
//3
//4
```
特性如下：

- 这是最简洁、最直接的遍历数组元素的语法。

- 这个方法避开了for-in循环的所有缺陷，解决了forEach的不可中断问题。

- for…of为ES6新增方法。

- 不推荐for…of遍历普通对象，实在需要用for…of遍历，可搭配Object.keys()实现。

代码如下：
```
var student={
    name:'wujunchuan',
    age:22,
    locate:{
    country:'china',
    city:'xiamen',
    school:'XMUT'
    }
}
for(var key of Object.keys(student)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+student[key]);
}
```
总结：

for…in与for…of
语法格式对比：
```
for (var key in arr){
    console.log(arr[key]);
}

for (var value of arr){
    console.log(value);
}
```
1. 推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of。
2. for in是遍历键名，for of是遍历键值。
3. 注意，for...of是ES6新引入的特性。修复了ES5引入的for...in的不足。
map（）方法

map理解为“映射”的意思，基本用法同forEach，为ES5新增属性方法。

❤map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。

❤map()方法按照原始数组元素顺序依次处理元素。

注意：

map不会对空数组进行检测

map不会改变原始数组

处理函数必须有返回值，否则会映射成undefined。

map使用语法：

arr.map(function(currentValue，index，arr),thisValue)

参数:
1. 处理函数（必须），下属参数依次为：当前值value，序号index，原数组arr。
2. thisValue(可选)

❤另外，由于map方法为ES5新增方法，不支持IE9以下浏览器。如果需要兼容，可用原型扩展。
方法如下：
```
if (typeof Array.prototype.map != "function") {
  Array.prototype.map = function (fn, context) {
    var arr = [];
    if (typeof fn === "function") {
      for (var k = 0, length = this.length; k < length; k++) {      
         arr.push(fn.call(context, this[k], k, this));
      }
    }
    return arr;
  };
}
```
jquery中map方法用法同原生

且从 1.6 开始，该函数也支持遍历对象。它接受两个参数，分别是要处理的数组/对象和处理函数，其处理函数也接受键值和键名两个参数。
```
/**** jQuery $.map() ****/

// 筛选数组元素
var arrTmp = [1,2,3,4,5];
var bigNum = $.map(arrTmp,function(num){
    if(num>2){
        return num;
    }
});
// bigNum -> [3,4,5]

// 处理对象
var person = {
    jack:{age:9},
    tom:{age:20},
    bobo:{age:30}
}

var oldMan = $.map(person,function(value,key){

    if(value.age>26){

        return key;
    }
})

// oldMan -> ["bobo"]
```
map定义和方法

map理解为“映射”的意思，基本用法同forEach，为ES5新增属性方法。

❤map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。

❤map()方法按照原始数组元素顺序依次处理元素。

注意：

map不会对空数组进行检测

map不会改变原始数组

处理函数必须有返回值，否则会映射成undefined。

map使用语法：

arr.map(function(currentValue，index，arr),thisValue)

1

参数:

1. 处理函数（必须），下属参数依次为：当前值value，序号index，原数组arr。

2. thisValue(可选)

❤另外，由于map方法为ES5新增方法，不支持IE9以下浏览器。如果需要兼容，可用原型扩展。

方法如下：
```
if (typeof Array.prototype.map != "function") {
  Array.prototype.map = function (fn, context) {
    var arr = [];
    if (typeof fn === "function") {
      for (var k = 0, length = this.length; k < length; k++) {      
         arr.push(fn.call(context, this[k], k, this));
      }
    }
    return arr;
  };
}
```
jquery中map方法用法同原生

且从 1.6 开始，该函数也支持遍历对象。它接受两个参数，分别是要处理的数组/对象和处理函数，其处理函数也接受键值和键名两个参数。
```
/**** jQuery $.map() ****/

// 筛选数组元素
var arrTmp = [1,2,3,4,5];
var bigNum = $.map(arrTmp,function(num){
    if(num>2){
        return num;
    }
});
// bigNum -> [3,4,5]

// 处理对象
var person = {
    jack:{age:9},
    tom:{age:20},
    bobo:{age:30}
}

var oldMan = $.map(person,function(value,key){

    if(value.age>26){

        return key;
    }
})

// oldMan -> ["bobo"]
```
eval（）方法

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

注意：
strong text该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。
例子：
```
<script type="text/javascript">

eval("x=10;y=20;document.write(x*y)")

document.write(eval("2+2"))

var x=10
document.write(eval(x+17))

</script>
```
JavaScript中的迭代器与循环原创Little_ChenH 最后发布于2018-03-19 16:32:28 阅读数 1119 收藏展开引言：本文涉及内容包括：
forEach方法for-in方法for-of方法eval（）方法map（）方法今天来总结一下，JS中我们常见的循环方式与迭代器，深入了解他们之间的区别，及适合的使用场景。
最早的数组遍历方式var a = ["a", "b", "c"];for(var index = 0;index < a.length;index++){ console.log(a[index]);}1234for循环，我们最熟悉也是最常用的循环迭代方式，后来的许多迭代方法都是基于for循环封装的。
1 forEach语法：
[].forEach(function(value, index, array) { // ... });1forEach遍历数组，而不是遍历对象哦，而且在遍历的过程中不能被终止,必须每一个值遍历一遍后才能停下来.也就是说：你不能使用break来退出循环, 不能使用return语句来返回到外层
jquery中forEach注意其与jQuery的$.each类似，只不过参数正好是相反的！
$.each([], function(index, value, array) { // ... });12 for...in适合进行普通对象的遍历for-in循环遍历对象的key，即键值对的键名。
特性如下：1. 方法遍历到的index（或key）类型为String，若无意间进行了字符串计算，会带来许多不便。2. for-in循环会遍历对象的所有可枚举属性。什么意思呢？就是除了遍历数组元素之外，还会遍历：自定义属性，原型上的属性。3. 一般不推荐遍历数组，因为for in遍历顺序是随机的，适合进行普通对象的遍历。
var myArry =[1,2,3,4];myArry.desc ='four'; for(var value in myArry){ //循环key console.log(value)}//"0"//"1"//"2"//"3"//"desc" 注意这里添加上去的属性也被遍历出来了12345678910for…in由于历史遗留问题，它遍历的实际上是对象的属性名称，一个Array数据也是一个对象，数组中的每个元素的索引被视为属性名称，所以我们可以看到使用for…in循环Array数组时，拿到的其实是每个元素的索引.
PS:若要避免原型链上的属性也被遍历到，可采用hasOwnProperty()方法去过滤掉对象原型链上的属性。
for…offor-of循环适合遍历数组循环遍历对象的值，即键值对的键值。
var myArry =[1,2,3,4];myArry.desc ='four';for(var value of myArry){ console.log(value)}//1//2//3//4123456789特性如下：- 这是最简洁、最直接的遍历数组元素的语法。- 这个方法避开了for-in循环的所有缺陷，解决了forEach的不可中断问题。- for…of为ES6新增方法。- 不推荐for…of遍历普通对象，实在需要用for…of遍历，可搭配Object.keys()实现。代码如下：
var student={ name:'wujunchuan', age:22, locate:{ country:'china', city:'xiamen', school:'XMUT' }}for(var key of Object.keys(student)){ //使用Object.keys()方法获取对象key的数组 console.log(key+": "+student[key]);}12345678910111213for…offor-of循环适合遍历数组循环遍历对象的值，即键值对的键值。
var myArry =[1,2,3,4];myArry.desc ='four';for(var value of myArry){ console.log(value)}//1//2//3//4123456789特性如下：- 这是最简洁、最直接的遍历数组元素的语法。- 这个方法避开了for-in循环的所有缺陷，解决了forEach的不可中断问题。- for…of为ES6新增方法。- 不推荐for…of遍历普通对象，实在需要用for…of遍历，可搭配Object.keys()实现。代码如下：
var student={ name:'wujunchuan', age:22, locate:{ country:'china', city:'xiamen', school:'XMUT' }}for(var key of Object.keys(student)){ //使用Object.keys()方法获取对象key的数组 console.log(key+": "+student[key]);}12345678910111213总结：for…in与for…of语法格式对比：
for (var key in arr){ console.log(arr[key]);}
for (var value of arr){ console.log(value);}1234567推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of。
for in是遍历键名，for of是遍历键值。
注意，for...of是ES6新引入的特性。修复了ES5引入的for...in的不足。
map（）方法map理解为“映射”的意思，基本用法同forEach，为ES5新增属性方法。
❤map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。❤map()方法按照原始数组元素顺序依次处理元素。
注意：map不会对空数组进行检测map不会改变原始数组处理函数必须有返回值，否则会映射成undefined。map使用语法：
arr.map(function(currentValue，index，arr),thisValue)1参数:1. 处理函数（必须），下属参数依次为：当前值value，序号index，原数组arr。2. thisValue(可选)
❤另外，由于map方法为ES5新增方法，不支持IE9以下浏览器。如果需要兼容，可用原型扩展。方法如下：
if (typeof Array.prototype.map != "function") { Array.prototype.map = function (fn, context) { var arr = []; if (typeof fn === "function") { for (var k = 0, length = this.length; k < length; k++) { arr.push(fn.call(context, this[k], k, this)); } } return arr; };}1234567891011jquery中map方法用法同原生且从 1.6 开始，该函数也支持遍历对象。它接受两个参数，分别是要处理的数组/对象和处理函数，其处理函数也接受键值和键名两个参数。
/**** jQuery $.map() ****/
// 筛选数组元素var arrTmp = [1,2,3,4,5];var bigNum = $.map(arrTmp,function(num){ if(num>2){ return num; }});// bigNum -> [3,4,5]
// 处理对象var person = { jack:{age:9}, tom:{age:20}, bobo:{age:30}}
var oldMan = $.map(person,function(value,key){
if(value.age>26){
return key; }})
// oldMan -> ["bobo"]123456789101112131415161718192021222324252627map定义和方法map理解为“映射”的意思，基本用法同forEach，为ES5新增属性方法。
❤map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。❤map()方法按照原始数组元素顺序依次处理元素。
注意：map不会对空数组进行检测map不会改变原始数组处理函数必须有返回值，否则会映射成undefined。map使用语法：
arr.map(function(currentValue，index，arr),thisValue)1参数:1. 处理函数（必须），下属参数依次为：当前值value，序号index，原数组arr。2. thisValue(可选)
❤另外，由于map方法为ES5新增方法，不支持IE9以下浏览器。如果需要兼容，可用原型扩展。方法如下：
if (typeof Array.prototype.map != "function") { Array.prototype.map = function (fn, context) { var arr = []; if (typeof fn === "function") { for (var k = 0, length = this.length; k < length; k++) { arr.push(fn.call(context, this[k], k, this)); } } return arr; };}1234567891011jquery中map方法用法同原生且从 1.6 开始，该函数也支持遍历对象。它接受两个参数，分别是要处理的数组/对象和处理函数，其处理函数也接受键值和键名两个参数。
/**** jQuery $.map() ****/
// 筛选数组元素var arrTmp = [1,2,3,4,5];var bigNum = $.map(arrTmp,function(num){ if(num>2){ return num; }});// bigNum -> [3,4,5]
// 处理对象var person = { jack:{age:9}, tom:{age:20}, bobo:{age:30}}
var oldMan = $.map(person,function(value,key){
if(value.age>26){
return key; }})
// oldMan -> ["bobo"]123456789101112131415161718192021222324252627eval（）方法eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
注意：strong text该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。例子：
<script type="text/javascript">
eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
var x=10document.write(eval(x+17))
</script>————————————————版权声明：本文为CSDN博主「Little_ChenH」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/Little_ChenH/article/details/79613562
相关阅读:
mysql8.0授权远程登录
 vbox 网络配置
 dnmp安装
 Unix/Linux环境C编程入门教程(7) OPENBSDCCPP开发环境搭建
 Unix/Linux环境C编程入门教程(6) 安装Fedora C/C++开发环境
 Unix/Linux环境C编程入门教程(5) Red Hat Enterprise Linux(RHEL)环境搭建
 Unix/Linux环境C编程入门教程(4) Debian Linux环境搭建
 C语言入门（8）——形参与实参
 C语言入门（7）——自定义函数
 C语言入门（6）——C语言常用数学函数
原文地址：https://www.cnblogs.com/lguow/p/12559721.html

JavaScript中的迭代器与循环

引言：

最早的数组遍历方式

1 forEach

for…of

for-of循环适合遍历数组

总结：

jquery中map方法用法同原生

jquery中map方法用法同原生

eval（）方法

1 `forEach`