前端开发小技巧 - 【JavaScript】 - for in 与 for of 之间的区别 以及 for of循环获取index(索引)

前言

  • for in 在实际的使用中应该是很少看到它的身影,即使对象的遍历也很多少使用它;
  • for of 循环使用起来很是方便,要比 forEach 好用很多;
    • 但是在使用 for of 的时候,无法获得 数组 / 字符串的元素 对应的 索引值;

一、for in

1.1 简介 及 基本语法

  • for in语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性,包括继承的可枚举属性;

  • 语法

    js 复制代码
    for (const/let variable in object) {
        // statement
    }
    • object
      • Symbol 类型的可枚举属性被迭代的对象;
    • variable
      • 在每次迭代时,variable会被赋值为不同的属性名;
      • 简单来说,就是object的属性名;
  • 注意

    • for in 不应该用于 迭代 一个关注索引顺序的 Array
  • 代码展示:

    js 复制代码
    const obj = {
        name: '红怡',
        age: 18,
        gender: '女'
    }
    for (const item in obj) {
        console.log(item)
    } 

1.2 仅迭代自身属性

  • 如果你只要考虑对象本身的属性,而不是它的原型,那么使用 getOwnPropertyNames() 或执行 hasOwnProperty()来确定某属性是否是对象本身的属性(也能使用propertyIsEnumerable)。

1.3 为什么使用 for in

  • for in 是为遍历对象属性而构建的,不建议与数组一起使用,数组可以用 Array.prototype.forEach()for of,那么for in到底有什么用?
  • 它最常用的地方应该是用于调式,可以更方便的去检查对象属性(通过输出到控制台和其他方式)。尽管对于处理存储数据,数组更实用些,但是你在处理有 key-value数据,需要去检查其中的任何键是否为某值的情况时,还是推荐用 for in

二、for of

  • MDN ➡ for of用法

  • 语法

    js 复制代码
    for (const/let variable of iterable) {
        // statements
    }
    • iterable
      • 被迭代枚举器属性的对象;
    • variable
      • 在每次迭代中,将不同属性的值分配给变量;
    • 如果不想修改语句中的变量,也可以使用 const 代替 let;
  • 注意

    • for of 语句在 可迭代对象 (包括:Array、Map、Set、String、TypeArray、arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句;
  • 代码展示:

    js 复制代码
    const arr = [1, 2, 3];
    for (const item of arr) {
        console.log(item);
    }

三、两种语句的区别

  • 无论是 for in 还是 for of 语句都是迭代一些东西。他们之间的主要区别在于他们的迭代方式不同;
    • for in 语句 以 任意顺序 迭代 对象 的 可枚举属性
    • for of 语句 遍历 可迭代对象 定义要迭代的数据;
  • 简单来说,使用 for in 进行遍历的时候,它不仅会遍历自身的属性和方法,也会遍历原型上的属性和方法;

四、for of 获取 index

  • 当我们使用 for of 循环遍历数组的时候,有时候会使用到 数组的index,但是 for of 又得不到 index,所以最后不得不去使用 forEach去遍历数组;
  • 解决办法
    • 将循环的数组进行改造,使其拥有 索引和值的同时又能被forof循环;
    • Array 构造函数上有一个数组的方法 entries(),该方法返回一个 数组的迭代对象 ,该 对象 包含 数组 的 索引和值,迭代对象中的 key === 索引值 value === 索引对应的元素,此时就可以正常访问索引和值了;
  • 代码展示:
    • 基本展示:

      js 复制代码
      const arr = [1, 2, 3];
      
      console.log(arr.entries());
      console.log(arr);
      
      for (const item of arr.entries()) {
          console.log(item)
      }
    • 使用解构进行简化:

      js 复制代码
      const arr = [1, 2, 3];
      for (const [index, value] of arr.entries()) {
          console.log(index, value)
      }
相关推荐
洪洪呀12 分钟前
uni-app vue3 实现72小时倒计时功能
vue.js·uni-app
风清云淡_A14 分钟前
【angular19】入门基础教程(一):项目的搭建与启动
前端·angular.js
好_快27 分钟前
Lodash源码阅读-without
前端·javascript·源码阅读
Sc Turing28 分钟前
【Vue3-Bug】中路由加载页面直接显示空白
前端·bug
好_快29 分钟前
Lodash源码阅读-baseDifference
前端·javascript·源码阅读
云之兕31 分钟前
Spring Boot 中多线程的基础使用
java·前端·spring boot
LaughingZhu1 小时前
PH热榜 | 2025-04-26
前端·数据库·人工智能·mysql·开源
萌萌哒草头将军7 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
游离状态的猫18 小时前
JavaScript性能优化实战:从瓶颈定位到极致提速
开发语言·javascript·性能优化
小彭努力中8 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript