刨析JS 中的forEach、for in、for of三类循环原理和性能

发布网友发布时间：2024-10-07 05:20

共1个回答

热心网友时间：2024-10-20 08:03

本文剖析 JS 中的三种循环：forEach、for in、for of 的原理与性能。首先，forEach 函数每次循环都会执行一次回调函数，接收三个参数，可选参数包括当前值、索引、数组自身，回调函数的 this 指向为可选参数。此循环主要用于遍历数组中的可枚举属性。

值得注意的是，使用 return 在 forEach 中并不能中断循环。若需中断循环，可利用 try-catch 结构，或采用替代循环，如使用 every 或 some 替换 forEach。每轮执行中，every 若内部返回 false 则跳出，而 some 内部为 true 时跳出。

为了实现类似于 forEach 的功能，可模拟其过程，重点关注 this 指向和 call、apply、bind 的使用，以便理解 JS 中 this 的指向。

for in 循环则迭代对象原型链上的可枚举属性，性能较差，因其会遍历对象原型链上的所有属性。

获取对象的 Symbol 属性可以通过 Object.getOwnPropertySymbols 方法实现，该方法返回对象的所有 Symbol 属性。

for of 循环依据迭代器规范执行，适用于数组、Set、Map 等实现了 Symbol.iterator 规范的对象。对象本身未实现该规范，因此不能使用 for of 循环。

为了让普通类数组支持 for of 循环，需要具备与数组类似的结果属性名从 0 开始，且拥有 length 属性。只需添加 Symbol.iterator 接口规范即可。

关于 arguments 对象为何不是数组，它实际上是类数组，具备从 0 开始的属性名和 length 属性，但其 __proto__ 直接指向 object 对象，不具备数组方法。有三种方法可将 arguments 转化为数组：使用 call 结合 Array.prototype.slice 方法，手写实现 slice 方法揭示原理，亦可利用扩展运算符或 Array.from 方法。

本文对 JS 中三种循环的原理与性能进行了深入分析，从 forEach 到 for in、for of，再到如何将类数组转化为数组，为开发者提供了一个全面的指南。