【JavaScript】遍历对象和数组

文章目录

    • [1. 遍历对象](#1. 遍历对象)
    • [2. 遍历数组](#2. 遍历数组)
      • [for 循环](#for 循环)
      • forEach()
      • [for...of 循环](#for...of 循环)
    • [3. 遍历多维数组](#3. 遍历多维数组)
    • [4. 总结](#4. 总结)

在 JavaScript 中, 遍历是一种常见的操作,用于访问对象和数组中的元素 。本篇博客将将介绍 JavaScript 中遍历对象和数组的方法,以帮助你更好地理解和运用这些概念。

1. 遍历对象

for...in 循环

javascript 复制代码
let person = {
  name: "John",
  age: 30,
  gender: "male"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}

在上述例子中,使用 for...in 循环遍历了对象 person 的所有属性,并输出属性名和对应的值。

Object.keys()

javascript 复制代码
let keys = Object.keys(person);

for (let key of keys) {
  console.log(key + ": " + person[key]);
}

在上述例子中,使用 Object.keys() 方法获取了对象 person 的所有属性名,然后通过 for...of 循环遍历。

Object.entries()

javascript 复制代码
for (let [key, value] of Object.entries(person)) {
  console.log(key + ": " + value);
}

在上述例子中,使用 Object.entries() 方法获取了对象 person 的所有键值对,然后通过 for...of 循环遍历。

2. 遍历数组

for 循环

javascript 复制代码
let fruits = ["Apple", "Banana", "Orange"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

在上述例子中,使用 for 循环遍历了数组 fruits 的所有元素。

forEach()

javascript 复制代码
fruits.forEach(function(fruit) {
  console.log(fruit);
});

在上述例子中,使用 forEach() 方法遍历了数组 fruits 的所有元素。

for...of 循环

javascript 复制代码
for (let fruit of fruits) {
  console.log(fruit);
}

在上述例子中,使用 for...of 循环遍历了数组 fruits 的所有元素,提供了更简洁的语法。

3. 遍历多维数组

javascript 复制代码
let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

for (let row of matrix) {
  for (let element of row) {
    console.log(element);
  }
}

在上述例子中,通过嵌套的 for...of 循环遍历了多维数组 matrix 的所有元素。

4. 总结

遍历是 JavaScript 中常见的操作,通过 for...in 循环、Object.keys()Object.entries()for 循环、forEach() 方法和 for...of 循环等方法,你可以方便地遍历对象和数组中的元素。对于多维数组,可以使用嵌套的循环进行遍历。希望通过本篇博客,你对 JavaScript 中对象和数组的遍历有了更深入的理解。

相关推荐
TimelessHaze19 分钟前
拆解字节面试题:async/await 到底是什么?底层实现 + 最佳实践全解析
前端·javascript·trae
执键行天涯1 小时前
从双重检查锁定的设计意图、锁的作用、第一次检查提升性能的原理三个角度,详细拆解单例模式的逻辑
java·前端·github
青青子衿越1 小时前
微信小程序web-view嵌套H5,小程序与H5通信
前端·微信小程序·小程序
OpenTiny社区1 小时前
TinyEngine 2.8版本正式发布:AI能力、区块管理、Docker部署一键强化,迈向智能时代!
前端·vue.js·低代码
qfZYG1 小时前
Trae 编辑器在 Python 环境缺少 Pylance,怎么解决
前端·vue.js·编辑器
bug爱好者1 小时前
Vue3 基于Element Plus 的el-input,封装一个数字输入框组件
前端·javascript
Silence_xl1 小时前
RACSignal实现原理
前端
柯南二号1 小时前
【大前端】实现一个前端埋点SDK,并封装成NPM包
前端·arcgis·npm
dangkei1 小时前
【Wrangler(Cloudflare 的官方 CLI)和 npm/npx 的区别一次讲清】
前端·jvm·npm
乔公子搬砖1 小时前
小程序开发提效:npm支持、Vant Weapp组件库与API Promise化(八)
前端·javascript·微信小程序·js·promise·vagrant·事件绑定