JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来哪个比较快,不同循环方法使用在哪些场景,小萌简单总结了下,如果有什么不合适不对的地方还望指出。

for 循环

循环可以将代码块执行指定的次数。

关于具体for循环的介绍小萌这里就不啰嗦了,相信小伙伴儿都是比较清楚的,下面是标准for循环的写法也是最传统的语句。这里不一定是数组,字符串也是支持的,但是不支持遍历对象。先定义一个变量i作为索引,以跟踪访问的位置,条件就是i不能超过数组的长度,一旦超过,跳出循环体,结束循环。

for (var i=0;i<arr.length;i++){
  document.write(arr[i] + "<br>");
}

While 循环

While 循环会在指定条件为真时循环执行代码块。即只要指定条件为 true,循环就可以一直执行代码。

var i=0;
while (i<5){
  x=x + "The number is " + i + "<br>";
  i++;
}

do while 循环

do-while 循环是 while 循环的变体。所不同的是,它先执行循环语句,再判断条件是否满足,也就是说,循环语句至少能执行一次,即使条件是 false。

var text = "";
var i = 0;
do {
  text += "The number is " + i;
  i++;
}
while (i < 3);

for 和 while 的区别

在for循环中,for语句将初始化,循环条件和每次循环后对循环变量的修改放在一起,较清晰直观,?#38382;?#36739;简洁,常用于能够预先判断循环次数的循环或遍历中

在while循环中,循环控制变量的初始化一般放在while语句之前,循环控制变量的修改一般放在循环体中,?#38382;?#19978;不如for语句简洁,但它比较常用于无法事先判断循环次数的循环或遍历中(用某一条件控制循环)。

两种?#38382;?#21508;有优点,但它们在功能上是等价的,可以相互转换。

for in 循环

前面我们说到for循环不能循环对象,那么如果我们想要循环对象应用什么呢?不着急,for in 可用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。它输出的只是数组的索引和对象的key, But我们可以通过索引和key来取到对应的值。需要注意的是数组Array?#23548;?#19978;也是对象。

  • 语法:for(var item in arr|obj){}
    遍历数组时,item表示索引值, arr表示当前索引值对应的元素 arr[item]
    遍历对象时,item表示key值,arr表示key值对应的value值 obj[item]
var obj = {name: "xm",age: "23",sex: "girl",};
for(var item in obj){
  console.log(item);
}
var arr = [1,2,3,4];
for(var item in arr){
  console.log(item);
}

注意:for in对Array的循环得到的是String而不是Number。

for of 循环 (ES 6)

for of 循环遍历集合,循环遍历的是对象的值,和for in遍历key相反。for of语句是ES6新引入的特性,修复了ES5中的for in的不足。需要注意的是,这里不能只能直接for(var value of obj){}。会弹出错误提示obj is not iterableiterable类型是ES6标准引入一个新的类型。具有iterable类型的集合可以通过新的for of循环来遍历。 Array,Map,Set,String,TypedArray,arguments 对象等等都属于iterable类型。

var arr = [1,2,3,4];
for(var value of arr){
  console.log(value);
}

这里我们做一个小延伸,遍历数组arr,当我们手动给Array添加了额外的属性arr.name = 'text',再分别查看上面写的两个循环:

for(var item in arr){
  console.log(item);// '0', '1', '2','3', 'name'
}
for(var value of arr){
  console.log(value);// 1,2,3,4
}

for in循环打印结果中把name包括在内,所?#36816;担?#20316;用于数组的for in循环除了遍历数组元素以外,还会遍历自定义属性。但Array的length属性是原数组的长度,并不包括自定义属性。for of循环则修复了这个问题,它只循环集合本身的元素,所以打印结果是不包括自定义属性的值的,也因此for of循环不能循环遍历普通对象,但是如果想用for of来遍历普通对象的属性或者值的话,可以通过和Object.keys()搭配使用,先获取对象的所有key的数组,然后遍历。

var obj = {name: "xm",age: "23",sex: "girl",};
for(var key of Object.keys(obj)){//使用Object.keys()方法获取对象key的数组
    console.log(key + ":" + obj[key]);
}

forEach 循环

  • 语法:array.forEach(callback[, thisObject])。forEach的回调function默认有三个参数: item(数组元素), index(元素的索引), array(数组本身)。
var arr = [1,2,3,4];
arr.forEach(function(item){//参数item表示数组每一项的元素,从头到尾把数组遍历一遍。
    console.log(item);// 1,2,3,4
})
  • 使用forEach循环有几点需要特别注意:
    1)forEach无法遍历对象
    2)forEach无法在IE中使用,只是在firefox和chrome中实?#33267;?#35813;方法
    3)forEach无法使用break,continue跳出循环,使用return时,效果和在for循环中使用continue一致

注意:forEach无法在所有元素都传递给调用的函数之前终止(而for循环却有break方法)。

map 方法

map() 方法指的是映射,即原数组被“映射”成对应新数组,map() 方法会给原数组中的每个元素都?#27492;?#24207;调用一次 callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。另外,map() 方法不会对空数组进行检测。map() 方法让数组通过某种计算产生一个新数组,影射成一个新的数组,新数组中的元素为原始数组元素顺序?#26469;?#35843;用函数处理后的值。map的回调function跟forEach一样接收三个参数:array.map(function(currentValue,index,arr), thisValue)。

  • 语法:array.map(callback,[ thisArg])。
    callback (执行数组中每个值的函数,包含三个参数)

    • currentValue:必需,当前元素的值;
    • currentIndex:可选,当前元素的索引值;
    • arr:可选,当期元素属于的数组对象。
var arr=[1, 2, 3, 4];
var square = arr.map(function(val){
  return val*val;
})
console.log(square);//1, 4, 9, 16

注意:ie9以下的浏览器还不支持map和forEach这两个方法,不过可以从Array原型扩展可以实现以上的功能。

reduce 方法

reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。reduce() 方法为数组中的每一个元素?#26469;?#25191;行回调函数,不包括数组中被删除或从未被?#25345;?#30340;元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。

  • 语法:arr.reduce(callback,[initialValue])
    callback (执行数组中每个值的函数,包含四个参数)

    • total:必需,初始值(initialValue)或者计算结束后的返回值(上一次调用回调返回的值);
    • currentValue:必需,当前元素的值;
    • currentIndex:可选,当前元素的索引值;
    • array:可选,当前元素所属的数组对象。
var arr = [1, 2, 3, 4];
var total = arr.reduce(function (x, y) {
  return x + y;
});
console.log(total)// 10

filter 方法

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。filter() 方法为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。callback 只会在已经?#25345;?#30340;索引上被调用,对于那些已经被删除或者从未被?#25345;?#30340;索引不会被调用。另外,filter() 方法不会对空数组进行检测。那些没有通过 callback 测试的元素会被跳过,不会被包含在新数组中,筛选出过滤出数组中符合条件的项,组成新数组。

  • 语法:arr.filter(callback[, thisArg])
    callback (执行数组中每个值的函数,包含三个参数)

    • currentValue:必须。当前元素的值;
    • currentIndex:可选,当前元素的索引;
    • array:可选,当前元素所属的数组对象。
var arr = [1, 2, 4, 9, 34, 21];
var result = arr.filter(function (x) {
 return x % 2 !== 0;
});
console.log(result) // [1, 9, 21]

every 方法

every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。every() 方法为数组中的每个元素执行一次 callback 函数,直到它找到一个使 callback 返回 false(表示可转换为布尔值 false 的值)的元素。如果发?#33267;?#19968;个这样的元素,every 方法将会立即返回 false,且剩余的元素不会再进行检测。否则every() 就会返回 true。callback 只会为那些已经被?#25345;?#30340;索引调用,不会为那些被删除或从来没被?#25345;?#30340;索引调用。另外,every() 方法不会对空数组进行检测。

  • 语法:arr.every(callback[, thisArg])
    callback (执行数组中每个值的函数,包含三个参数)

    • currentValue:必须。当前元素的值;
    • currentIndex:可选,当前元素的索引;
    • array:可选,当前元素所属的数组对象。
var arr = [1, 2, 3, 4];
var result = arr.every(function(item,index,array){
return item > 2;
});
console.log(result)//false

some 方法

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。。为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some 将会立即返回 true,且剩余的元素不会再进行检测。否则,some() 返回 false。检测数组中的每一项是否符合条件,如果每一项都符合条件,就会返回true,否则返回false,有点像遍历数组?#20063;?#20316;callback。callback 只会在那些”有值“的索引上被调用,不会在那些被删除或从来未被?#25345;?#30340;索引?#31995;?#29992;。另外,some() 方法不会对空数组进行检测。

  • 语法:arr.every(callback[, thisArg])
    callback (执行数组中每个值的函数,包含三个参数)

    • currentValue:必须。当前元素的值;
    • currentIndex:可选,当前元素的索引;
    • array:可选,当前元素所属的数组对象。
var arr = [1, 2, 3, 4];
var result = arr.some(function(item,index,array){
return item > 3;
});
console.log(result)//true
  • 遍历数组和对象的几种方法简单的介绍完,小结如下:
    1)for in 既支持对象也支持数组遍历;
    2)for , do/while , forEach 只支持数组;
    3)Array.prototype.map, Array.prototype.every 只支持数组和形似数组的对象;
    4)forEach不能退出循环,只能通过return来进入?#36739;?#19968;个元素的遍历中(相当于for循环的continue),且在IE没有实?#25351;?#26041;法;
    5)$.each循环只能通过return false 来退出循环,使用return 或 return true 将跳过一个元素,继续执行后面的循环。

以上就是这篇文章的全部内容了, 如果发?#30452;?#25991;有不对之处, 欢迎批评斧正。同时也希望本?#21738;?#23481;对大家的学习或者工作能带来帮助,如有疑问大家可以留言交流,谢谢大家对小萌的支持。