专业编程基础技术教程

网站首页 > 基础教程 正文

值得收藏的JavaScript 中的 for 循环总结!

ccvgpt 2024-07-28 12:04:51 基础教程 5 ℃

简单 for 循环

值得收藏的JavaScript 中的 for 循环总结!

下面的写法效率更高:

知道为啥吗?在评论区说说你的看法

for-in

for-in 循环遍历的是对象的属性,而不是数组的索引。因此, for-in 遍历的对象便不局限于数组,还可以遍历对象。

这是遍历数组

这是遍历对象

注意,for-in 遍历属性的顺序并不确定,即输出的结果顺序与属性在对象中的顺序无关,也与属性的字母顺序无关,与其他任何顺序也无关

for-in 还不仅仅遍历 array 自身的属性,其还遍历 array 原型链上的所有可枚举的属性,所以for-in 并不适合用来遍历 Array 中的元素,其更适合遍历对象中的属性。

性能上,每次迭代操作会同时搜索实例或者原型属性, for-in 循环的每次迭代都会产生更多开销,因此要比其他循环类型慢。

forEach

在 ES5 中,引入了新的循环,即 forEach 循环。

forEach 方法为数组中含有有效值的每一项执行一次 callback 函数,那些已删除(使用 delete 方法等情况)或者从未赋值的项将被跳过(不包括那些值为 undefined 或 null 的项).

性能上,forEach 的速度不如 for。

for-of

ES6之前的 3 种 for 循环的缺陷:

  • forEach 不能 break 和 return;

  • for-in 缺点更加明显,它不仅遍历数组中的元素,还会遍历自定义的属性,甚至原型链上的属性都被访问到。而且,遍历数组元素的顺序可能是随机的。

for-of 循环特征(针对上述问题来解决痛点的):

  • 这是最简洁、最直接的遍历数组元素的语法。

  • 这个方法避开了 for-in 循环的所有缺陷。

  • 与 forEach 不同的是,它可以正确响应 break、continue 和 return 语句。

  • 其不仅可以遍历数组,还可以遍历类数组对象和其他可迭代对象。

注意,for-of循环不支持普通对象,但如果想迭代一个对象的属性,可以用for-in 循环

Tags:

最近发表
标签列表