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. 处理函数(必须),下属参数依次为:当前值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)