javascript中的几种循环

Posted 2021-12-04 土生土长的IU

前言

在日常使用中，说到for循环脑海中会冒出几种方法。但是如果要察觉它们之中的区别，就需要对这几种for循环进行一个系统性的实践性的总结。

在ES5中有三种循环 分别是 for , for…in , forEach
在ES6中新增了 for…of

for循环

常见写法

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

如果数组长度在循环过程中不会改变，将数组长度用变量存储起来会获得更好的效率，改进后的写法：

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

for…in

使用for-in循环，返回的是所有能够通过对象访问的、可枚举的属性，其中既包括存在于实例中的属性，又包括存在于原型中的属性。屏蔽了原型中不可枚举属性的实例属性也会在for-in循环中返回。

——《javascript高级程序设计》

循环数组

const arr = [1, 2, 3];
for(let index in arr) {
    console.log("arr[" + index + "] = " + arr[index]);
}
// 输出结果如下
// arr[0] = 1 
// arr[1] = 2 
// arr[2] = 3

循环对象

const person = {
    fname: "san",
    lname: "zhang",
    age: 29
};
let info;
for(info in person) {
    console.log("person[" + info + "] = " + person[info]);
}
// 输出结果如下
// person[fname] = san 
// person[lname] = zhang 
// person[age] = 29

缺陷：会遍历原型上所有可枚举的属性(可以使用hasOwnProperty(属性名))过滤

		let per = {name:'张三'};
        Object.prototype.age = 8;
        for(let item in per){
            console.log(item)
        }
        //name
        //age

forEach

const arr = [1, 2, 3];
arr.forEach((data) => {
    console.log(data);
});
// 输出结果如下
// 1
// 2 
// 3

forEach 方法为数组中含有有效值的每一项执行一次 callback 函数，那些已删除（使用 delete 方法等情况）或者从未赋值的项将被跳过（不包括那些值为 undefined 或 null 的项）。 callback 函数会被依次传入三个参数：

• 数组当前项的值；
• 数组当前项的索引；
• 数组对象本身；

添加数组当前项的索引参数，注意callback 函数中的三个参数顺序是固定的，不可以调整。

let arr = [1,2,3];
arr.forEach((item,index,arr) => {
    console.log(item,index,arr)
});

需要注意的是，forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。

for…of

ES6中引入的新的循环
主要用于解决其他for循环的缺陷

let arr = [1,2,3]
for(item in arr){
console.log(item)
}
//1
//2
//3

ES6之前的三种for循环有什么缺陷？

• 不能break，和return；
• for…in 不仅遍历数组中的元素，还会遍历自定义的属性，甚至原型链上的属性都被访问到。而且，遍历数组元素的顺序可能是随机的。

所以，鉴于以上种种缺陷，我们需要改进原先的 for 循环。但 ES6 不会破坏你已经写好的 JS 代码。目前，成千上万的 Web 网站依赖 for-in 循环，其中一些网站甚至将其用于数组遍历。如果想通过修正 for-in 循环增加数组遍历支持会让这一切变得更加混乱，因此，标准委员会在 ES6 中增加了一种新的循环语法来解决目前的问题，即 for-of 。