前端开发小 - JavaScript - for in 和 for of :间的区别 以和 for of循环获取index索引

前言

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

一、for in

• MDN ➡ for in用法

1.1 简介 及 基本语法

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

  for (const/let variable in object) {
      // statement
  }
  

  • object：
    • 非 Symbol 类型的可枚举属性被迭代的对象；
  • variable：
    • 在每次迭代时，variable会被赋值为不同的属性名；
    • 简单来说，就是object的属性名；
• ❗注意：
  • for in 不应该用于 迭代 一个关注索引顺序的 Array；
• 代码展示：

  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用法
• 语法：

  for (const/let variable of iterable) {
      // statements
  }
  

  • iterable：
    • 被迭代枚举器属性的对象；
  • variable：
    • 在每次迭代中，将不同属性的值分配给变量；
  • 如果不想修改语句中的变量，也可以使用 const 代替 let;
• ❗ 注意：
  • for of 语句在 可迭代对象（包括：Array、Map、Set、String、TypeArray、arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句；
• 代码展示：

  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 === 索引对应的元素，此时就可以正常访问索引和值了；
  • 
• 代码展示：
  • 基本展示：

    const arr = [1, 2, 3];
    
    console.log(arr.entries());
    console.log(arr);
    
    for (const item of arr.entries()) {
        console.log(item)
    }
    

    
  • 使用解构进行简化：

    const arr = [1, 2, 3];
    for (const [index, value] of arr.entries()) {
        console.log(index, value)
    }
    

    

这篇好文章是转载于：学新通技术网