天下无坑

天下无坑


for系列循环方法

在es5中for循环包含了基础for循环,for-in,for-each

基础for循环

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

用于数组遍历,书写比较麻烦

forEach

forEach 不能 break 和 return

const arr = [1, 2, 3];
arr.forEach((data,index,array) => {
console.log(data);
});

for-in

//遍历数组
var array = [1,2,3,4,5];
for(let index in array){
console.log(array[index]);//index为索引
}

//遍历对象
var object = {a:1,b:2,c:3,d:4};
for(let k in object){
console.log(object[k]);//k键名
}

for-in 缺点更加明显,它不仅遍历数组中的元素,还会遍历自定义的属性,甚至原型链上的属性都被访问到。而且,遍历数组元素的顺序可能是随机的。 for in 循环中支持breakcontinue,不支持return 效率极低,为其他循环的1/7,不建议用于数组array类型

for-of

const arr = ['a','b','c'];
for(let value of arr) {
console.log(value);//Value为键值
}

//结合entries(),同时得到索引值
const arr = ['a','b','c'];
for (let [index, value] of arr.entries()) {
 console.log(index, value);
}

总结一下,for-of 循环有以下几个特征:

这是最简洁、最直接的遍历数组元素的语法。 这个方法避开了 for-in 循环的所有缺陷。 与 forEach 不同的是,它可以正确响应 break、continue 和 return 语句。 其不仅可以遍历数组,还可以遍历类数组对象和其他可迭代对象。

页面列表

ITEM_HTML