【JS】js的for循环、for in 、 for of 详解

时间：2025-04-07 10:18:33

在做项目中，用到的最多的，莫过于 for 循环了，遍历对象常用 for in ，for of 在个人印象中 很少用到

for 循环

1、for 循环 var
let arr = new Array(9999999).fill(0);

console.time('for')
for(var i = 0; i < arr.length; i++) {}
console.timeEnd('for')  // for: 8.13818359375 ms

console.time('while')
var i = 0;
while(i < arr.length) {
  i++;
}
console.timeEnd('while') // while: 8.020751953125 ms

var 没有块级作用域概念，创建的变量是全局的。全局状态下 i 会占用一定的内存空间，不被释放的情况下，会一直占用空间

2、for 循环 let
let arr = new Array(9999999).fill(0);

console.time('for')
for(let i = 0; i < arr.length; i++) {}
console.timeEnd('for')  // for: 4.476806640625 ms

console.time('while')
let i = 0;
while(i < arr.length) {
  i++;
}
console.timeEnd('while') // while: 10.82080078125 ms

let 是块级作用域，i 属于当前循环中的变量。此次循环结束的时候，i 就被释放，不会占用空间

整体来说，for循环是最快的

for in

fon in 性能很差：迭代当前对象中中所有可枚举的属性 的 【 私有属性大部分是可以枚举的，公有属性{出现在所属类的原型上的，} 也有部分是 可枚举的 】 查找机制上一定会搞到原型链上去

  1. 遍历顺序，会以数字优先
  2. 无法遍历symbol 类型的变量
  3. 可以遍历到共有可枚举的

比如，我们通过 定义一个fn 和一个name ，那么我们在定义一个对象，用 for in 的时候，就会遍历到它

        Object.prototype.fn = function () { }
        Object.prototype.name1 = 'ddgprop'
        let obj = {
            name: 'ddg',
            age: 21,
            [Symbol('AA')]: 100,
            0: 200,
            1: 400,
        }
        for (let key in obj) {
            // 如果 不香遍历 ， 原型链上的 东西
            if (!obj.hasOwnProperty(key)) break
            console.log(key); // 输出 顺序： 0 1 name age fn name1
        }
        // (obj);
        console.log(Object.keys(obj)); // 拿到当前对象的 非symbol 的所有私有属性 ，返回的结果是一个由对象属性名字组成的数组    ["0", "1", "name", "age"]
        console.log(Object.getOwnPropertySymbols(obj)); // 拿到当前对象 所有的  symbol 私有属性  [Symbol(AA)]


        // 把两个属性 拼接到一个 就得到了 所有的 私有属性
        let keys = Object.keys(obj)
        keys = keys.concat(Object.getOwnPropertySymbols(obj))
        keys.forEach(key => {
            console.log('属性名:', key)
            console.log('属性值:', obj[key]);

        })

for of

        // iterator 迭代器
        // 部分数据结构实现了 迭代器规范
        //      
        // 实现迭代器规范的有 ： 数组/部分类数组/Set/Map 等等，  但是 对象 没有
        //  for of 循环 的原理  是 按照迭代器 规范遍历的
        // 只要 有 这个  的 才可以 用 for of

        /* 
            for of  一个数组的时候
            1. 先执行 数组 的 []() 方法
            2. 这个方法 会 返回  一个 对象， 对象里面必须有一个  next() 方法，然后执行 next() 方法。  执行一次 next() 方法，拿到结构中 的 某一项 的值 ，done:false value:每一次获取的值
        
        */

for of 可以遍历 数组，因为数组有迭代器，，但是不能遍历对象，对象，没有

总结

  • 根据所用时间排序就是 for < for of < for in

  • 其实项目中一般数据，都是数组对象的形式，所以，即使用到循环，一般也是用 forEach() 、filter()、find()、等

相关文章