前端开发小技巧 - 【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)
      }
相关推荐
旧曲重听114 分钟前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿23 分钟前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉28 分钟前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽34 分钟前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课36 分钟前
React useEffect 详解与运用
前端·react.js
我想说一句37 分钟前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee12337 分钟前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为
小鱼小鱼干40 分钟前
【Tauri】Tauri中Channel的使用
前端
拾光拾趣录42 分钟前
CSS全面指南:从基础布局到高级技巧与实践
前端·css
markyankee10144 分钟前
使用 Vue 脚手架创建项目的完整指南
vue.js