乐趣区

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”]

三、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 循环被跳过。

退出移动版