JavaScript数组遍历:for、foreach、for in、for of、$.each、$().each的区分

一、for

Javascript中的for轮回,它用来遍历数组

var arr = [1,2,3,4]
for(var i = 0 ; i< arr.length ; i++){
    console.log(arr[i])
}
//1,2,3,4

九九乘法表:

for ( var x = 1; x <= 9; x++) {
    var str="";
    for ( var y = 1; y <= x; y++) {
    str+=x + "*" + y + " = " + (x * y)+"  ";         
    }
    console.log(str);
}

二、foreach

forEach轮回我们能够直接取到元素,同时也能够取到index值。然则forEach也有一些范围,不能continue跳过或许break停止轮回

let arr = ['a', 'b', 'c', 'd']
arr.forEach(function (val, index, arr) {
    console.log('index:'+index+','+'val:'+val) // val是当前元素,index当前元素索引,arr数组
    console.log(arr)
})
//index:0,val:a
//["a", "b", "c", "d"]0: "a"1: "b"2: "c"3: "d"
//index:1,val:b
//["a", "b", "c", "d"]
//index:2,val:c
//["a", "b", "c", "d"]
//index:3,val:d
//["a", "b", "c", "d"]
[].forEach(function(value,index,array){     
    //do something     
  });          
 等价于:
 $.each([],function(index,value,array){     
   //do something     
 })

三、for in

for(var item in arr|obj){} 能够用于遍历数组和对象
遍历数组时,item示意索引值, arr示意当前索引值对应的元素 arr[item]
遍历对象时,item示意key值,arr示意key值对应的value值 obj[item]
for in平常轮回遍历的都是对象的属性,遍历对象自身的一切可罗列属性,以及对象从其组织函数原型中继续的属性

var obj = {a:1, b:2, c:3};    
for (let item in obj) {
  console.log("obj." + item + " = " + obj[item]);
}
// obj.a = 1
// obj.b = 2
// obj.c = 3
var arr = ['a','b','c'];
for (var item in arr) {
    console.log(item) //0 1 2
    console.log(arr[item]) //a b c
}

四、for of

ES6中新增添的语法 for of 语句建立一个轮回来迭代可迭代的对象。在 ES6 中引入的 for of 轮回,以替换 for in 和 forEach() ,并支撑新的迭代协定。for of 许可你遍历 Arrays(数组), Strings(字符串), Maps(映照), Sets(鸠合)等可迭代的数据结构等。
轮回一个数组:

let arr = ['A', 'B', 'C']
for (let val of arr) {
    console.log(val) 
}
// A B C

轮回一个字符串:

let iterable = "abc";

for (let value of iterable) {
  console.log(value);
}
// "a"
// "b"
// "c"

轮回一个Map:

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);    
for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

轮回一个 Set:

let iterable = new Set([1, 1, 2, 2, 3, 3]);    
for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

轮回一个具有enumerable属性的对象
for of轮回并不能直接运用在一般的对象上,但假如我们按对象所具有的属性举行轮回,可运用内置的Object.keys()要领:

for (var key of Object.keys(someObject)) {
  console.log(key + ": " + someObject[key]);
}

轮回一个生成器(generators):

function* fibonacci() { // a generator function
  let [prev, curr] = [0, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

五、jQuery内里的$.each

$.each(arr|obj, function(k, v))
能够用来遍历数组和对象,个中k示意索引值或许key值,v示意value值

var arr = ['a','b','c']
$.each(arr, function(key, val) {
    console.log(key, val);
})
//0 a
//1 b
//2 c

六、jQuery内里的$().each()

\$().each()在dom处置惩罚上面用的较多,主如果用来遍历DOMList。假如页面有多个input标签范例为checkbox,关于这时刻用\$().each()来处置惩罚多个checkbox,比方:

$(“input[name=’checkbox’]”).each(function(i){
if($(this).attr(‘checked’)==true){
//操纵代码
}

结论:

推荐在轮回对象属性的时刻运用for in,在遍历数组的时刻的时刻运用for of
for in轮回出的是key,for of轮回出的是value;
for of是ES6新引入的特征。修复了ES5的for in的不足;
for of不能轮回一般的对象,须要经由过程和Object.keys()搭配运用。

跳出轮回的体式格局有以下几种:
return 函数实行被停止;
break 轮回被停止;
continue 轮回被跳过。

    原文作者:沉静地闪光
    原文地址: https://segmentfault.com/a/1190000017394445
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞