js中for,while,for...in,forEach,for...of循环的区别

149 阅读1分钟

这篇文章主要就是想记录下我在学习js时的一些感悟吧!

先来说说常见的for循环,直接上图:

Snipaste_2022-06-09_09-13-46.png

Snipaste_2022-06-09_09-15-10.png

while循环:(很简单就不做解释了)

Snipaste_2022-06-09_09-15-58.png

Snipaste_2022-06-09_09-16-24.png

接下来介绍下for的另外三种循环吧,todos是定义的一个数组对象

    const todos = [{
        id: 1,
        text: 'hello1',
        isCompleted: true
    }, {
        id: 2,
        text: 'hello2',
        isCompleted: true
    }, {
        id: 3,
        text: 'hello3',
        isCompleted: false
    }];

for...of循环:如下图,变量t遍历的是数组对象todos中的对象,可直接通过t.属性获得值

    for (let t of todos) {
        console.log('t.id', t.id);
    }

Snipaste_2022-06-09_09-43-21.png

for...in循环:这里的key遍历的是数组对象todos的下标,想要得到对象里面的属性 就得用 数组[下标].属性 的方法即可,如果不是这样使用则会报undefined的错误,如下图:

for (let key in todos) {
   console.log(todos[key].id);
}

Snipaste_2022-06-09_13-06-39.png Snipaste_2022-06-09_13-06-51.png

forEach循环:t是数组里面的对象(这个变量t跟for...in不一样,它表示的是数组里面的一个对象,而并非下标)如图:这里就可以直接用参数.属性获取值

todos.forEach(function(t) { //也可写成箭头函数
            console.log(t.text);
        })

Snipaste_2022-06-09_13-14-10.png

还有一些循环性能问题,看看以后再写一篇吧!还有一些 循环 **性能问题**,看看以后再写一篇吧!