JavaScript 学习-for/in(ES6之前就有)

这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战

前面的更文我们学习了 JavaScript 中的 【JavaScript ES6 学习-for/of】、【JavaScript 学习-特殊符号-位运算符】、【JavaScript 学习-逻辑运算符-短路了?】、 【JavaScript 学习-箭头函数】、

本文来继续学习 JavaScript for/in, for/in 和上文提到的 for/of 很像, 但是 for/in 却没有 for/of 那么苛刻, 且看下面学习记录

JavaScript 中的 for/in

JavaScript 对一些数据进行遍历迭代, 前文提到 for/of 循环 和 本文要学的 for/in 循环特别像; 但是for/of of 后面只能是可迭代的对象, for/in in 后面可以是任何对象. 根据在工作中的需求可简单记下: for/in 遍历对象 <--> for/of 遍历数组

for/in 用法

for/in 语句循环迭代遍历指定对象的属性名:

语法:

for (variable in object) {
  // statement
  // 循环体对对象元素进行操作
}

这里的variable 通常是一个变量名, 也可能是变量声明或者可以作为赋值表达式的左值的一些东西. object 就是要遍历迭代的对象, statement 则就是循环体了, 对数据元素进行处理的代码块.

比如使用 for/in 循环 遍历 object

for (let prop in obj) {
  // 循环体对对象元素进行操作 语句/语句块
  console.log('逐一输出 obj 的各元素: ', prop)
}

for/in 循环开始会先计算 object(表达式)的值, 如果值为 null 或者 undefined, 则会跳过循环进入到下一项. 否则就进入循环体了, 对 object 的每一项可枚举属性进行遍历, 执行一次循环体. 在每次迭代前会先计算 variable 表达式的值, 并将每一个属性依次赋值给它.

for/in 遍历数组

在 JavaScript 中, 数组就是一钟特殊的对象, 类比数组索引就是这个特殊对象的 属性(键), 如下所示:

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
for (let index in arr) {
  console.log(index) // 会输出数组 arr 的索引
}