JavaScript循环遍历你会用哪些？

CHENGKANG 发布于2019-08-23 12:10 / 1851人阅读

摘要：总结中的循环遍历定义一个数组和对象经常用来遍历数组元素遍历值为数组元素索引用来遍历数组元素第一个参数为数组元素，第二个参数为数组元素索引，第三个参数为数组本身可选没有返回值用来遍历数组元素第一个参数为数组元素，第二个参数为数组元素索引，第三

总结JavaScript中的循环遍历

定义一个数组和对象

const arr = ["a", "b", "c", "d", "e", "f"];

const obj = {
    a: 1,
    b: 2,
    c: 3,
    d: 4
}

for()

经常用来遍历数组元素
遍历值为数组元素索引

for (let i = 0, len = arr.length; i < len; i++) {
    console.log(i);            // 0 1 2 3 4 5
    console.log(arr[i]);     // a b c d e f
}

forEach()

用来遍历数组元素
第一个参数为数组元素，第二个参数为数组元素索引，第三个参数为数组本身(可选)
没有返回值

arr.forEach((item, index) => {
    console.log(item);     // a b c d e f 
    console.log(index);   // 0 1 2 3 4 5
})

map()

用来遍历数组元素
第一个参数为数组元素，第二个参数为数组元素索引，第三个参数为数组本身(可选)
有返回值，返回一个新数组every()，some()，filter()，reduce()，reduceRight()不再一一介绍，详细请看Js中Array方法有哪些？

let arrData = arr.map((item, index) => {
    console.log(item);     // a b c d e f 
    console.log(index);   // 0 1 2 3 4 5
    return item;
})
console.log(arrData);    // ["a", "b", "c", "d", "e", "f"]

for...in

可循环对象和数组，推荐用于循环对象

用于循环对象时

循环值为对象属性

for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(key);           // a b c d  属性
        console.log(obj[key]);    // 1 2 3 4  属性值
    }
}

用于遍历数组时

值为数组索引

for (let index in arr) {
    console.log(index);          // 0 1 2 3 4 5 数组索引
    console.log(arr[index]);   // a b c d e f 数组值
}

当我们给数组添加一个属性name
arr.name = "我是自定义的属性"

for (let index in arr) {
    console.log(index);           // 0 1 2 3 4 5 name (会遍历出我们自定义的属性)
    console.log(arr[index]);    // a b c d e f 我是自定义属性name
}

for...of

可循环对象和数组，推荐用于遍历数组

用于遍历数组时

遍历值为数组元素

for (let value of arr) {
    console.log(value);       // a b c d e f 数组值
}

用于循环对象时

须配合Object.keys()一起使用，直接用于循环对象会报错，不推荐使用for...of循环对象
循环值为对象属性

for (let value of Object.keys(obj)) {
    console.log(value);    // a b c d 对象属性
}

总结

用于遍历数组元素使用：for()，forEach()，map()，for...of

用于循环对象属性使用：for...in

关于上述循环对性能的影响会后续补充

更多内容请关注我的博客

GPU云服务器云服务器机柜托管哪些公司会用的到循环遍历字典 python遍历循环 php表单循环遍历

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98053.html

2019前端工程师自检清单与思考

摘要：前端工程师自检清单对于，掌握其语法和特性是最基本的，但是这些只是应用能力，最终仍旧考量仍然是计算机体系的理论知识，所以数据结构，算法，软件工程，设计模式等基础知识对前端工程师同样重要，这些知识的理解程度，可以决定你在前端工程师这条路上能走多 2019前端工程师自检清单对于JavaScript，掌握其语法和特性是最基本的，但是这些只是应用能力，最终仍旧考量仍然是计算机体系的理论知识，所...

Honwhy 2019-08-23 16:56 评论0 收藏0
校招社招必备核心前端面试问题与详细解答

摘要：本文总结了前端老司机经常问题的一些问题并结合个人总结给出了比较详尽的答案。网易阿里腾讯校招社招必备知识点。此外还有网络线程，定时器任务线程，文件系统处理线程等等。线程核心是引擎。主线程和工作线程之间的通知机制叫做事件循环。 showImg(https://segmentfault.com/img/bVbu4aB?w=300&h=208); 本文总结了前端老司机经常问题的一些问题并结合个...

DevTalking 2019-08-02 15:31 评论0 收藏0
一年内经验前端面试题记录

摘要：对于，其默认大小一般是本地存储和都保存在浏览器端，且都是同源的。把变量放在闭包中和放在全局作用域，对内存的影响是一致的，这里并不能说成是内存泄露。将新的树和之前的虚拟树进行相比较，根据结果对进行精准响应。 1. JavaScript 1. JavaScript文件在什么情况下会放在html哪个位置 https://zhuanlan.zhihu.com/p/... 对于必须要在DOM加载...

qianfeng 2019-08-29 17:12 评论0 收藏0
一年内经验前端面试题记录

摘要：对于，其默认大小一般是本地存储和都保存在浏览器端，且都是同源的。把变量放在闭包中和放在全局作用域，对内存的影响是一致的，这里并不能说成是内存泄露。将新的树和之前的虚拟树进行相比较，根据结果对进行精准响应。 1. JavaScript 1. JavaScript文件在什么情况下会放在html哪个位置 https://zhuanlan.zhihu.com/p/... 对于必须要在DOM加载...

kelvinlee 2019-08-23 12:52 评论0 收藏0