首页 > 编程语言 > 详细

前端 JavaScript 中的三种 for 循环语句总结

时间:2021-06-28 09:43:47      阅读:22      评论:0      收藏:0      [点我收藏+]
![循环](https://gitee.com/yinyiwang/blogImages/raw/master/images/20210627%20/19-10-04-qiJP6d.png) JavaScript 中的 for 循环语句相信大家都已经快用厌了,现在有好多文章都在讲怎么减少代码中的 for 循环语句,但是,你又不得不承认它们真的很有用。今天,我来总结一下前端 JavaScript 中三种 for 循环语句。 ## for 这大概是应用最广的循环语句了吧,简单实用,且大多数时候性能还是在线的,唯一的缺点大概就是**太普通**,没有特色,导致很多人现在不愿用它。 ```javascript const array = [4, 7, 9, 2, 6]; for (const index = 0; index < array.length; index++) { const element = array[index]; console.log(element); } // 4, 7, 9, 2, 6 ``` ## for...in `for...in` 语句可以以任意顺序遍历一个对象的除 Symbol 以外的**可枚举**属性。 ```javascript const temp = {name: "temp"}; function Apple() { this.color = ‘red‘; } Apple.prototype = temp; const obj = new Apple(); for (const prop in obj) { console.log(`obj.${ prop } = ${ obj[prop] }`); } // obj.color = red // obj.name = temp ``` 如果你只要考虑对象本身的属性,而不是它的原型,那么使用 `getOwnPropertyNames()` 或执行 `hasOwnProperty()` 来确定某属性是否是对象本身的属性。 ```javascript const temp = {name: "temp"}; function Apple() { this.color = ‘red‘; } Apple.prototype = temp; const obj = new Apple(); for (const prop in obj) { if (obj.hasOwnProperty(prop)) { console.log(`obj.${ prop } = ${ obj[prop] }`); } } // obj.color = red ``` 当然,也可以用来遍历数组。 ```javascript const arr = [1, 2, 3, 4, 5]; for (const key in arr) { console.log(key) } // 0,1,2,3,4 ``` 使用 `for...in` 可以遍历数组,但是会存在以下问题: 1. index 索引为字符串型数字(注意,非数字),不能直接进行几何运算。 2. 遍历顺序有可能不是按照实际数组的内部顺序(可能按照随机顺序)。 所以一般不建议使用 `for...in` 来遍历数组。 ## for...of `for...of` 语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。 ```javascript const array = [‘a‘, ‘b‘, ‘c‘]; for (const element of array) { console.log(element); } // a // b // c ``` `for...of` 和 `for...in` 的区别: - `for...in` 语句以任意顺序迭代对象的**可枚举属性**。 - `for...of` 语句遍历可迭代对象定义**要迭代的数据**。 ```javascript Object.prototype.objCustom = function () { }; Array.prototype.arrCustom = function () { }; let iterable = [3, 5, 7]; iterable.foo = ‘hello‘; for (const key in iterable) { console.log(key); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" } // 0, 1, 2, "foo", "arrCustom", "objCustom" for (const key of iterable) { console.log(key); } // 3, 5, 7 ``` 使用 `for...of` 遍历 Map 结构: ```javascript let nodes = new Map(); nodes.set("node1", "t1") .set("node2", "t2") .set("node3", "t3"); for (const [node, content] of nodes) { console.log(node, content); } // node1 t1 // node2 t2 // node3 t3 ``` 可以看出,使用 `for...of` 遍历 Map 结构还是挺方便的,推荐使用! ## 总结 1. 如果普通 for 循环用腻了,推荐使用 `for...of` 来替代。 2. 这三种循环都可以使用 break 关键字来终止循环,也可以使用 continue 关键字来跳过本次循环。 3. `for...of` 循环的适用范围最大。 ~ ~ 本文完,感谢阅读! ~ > 学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂! > > 我是〖编程三昧〗的作者 **隐逸王**,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教! > > 你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠! > > 知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!

前端 JavaScript 中的三种 for 循环语句总结

原文:https://blog.51cto.com/u_15269270/2950060

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!