【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 中对象和数组的遍历有了更深入的理解。

相关推荐
Y40900110 分钟前
Java基础——实现图书管理系统交互功能
java·开发语言·笔记·交互
沐知全栈开发17 分钟前
MySQL 运算符
开发语言
寒水馨34 分钟前
Java 24 新特性解析与代码示例
java·开发语言·新特性·jdk24·java24
talented_pure1 小时前
Python打卡Day30 模块和库的导入
开发语言·python
用户47949283569151 小时前
mcp是怎么和大模型进行交互的,有哪些交互方式
前端·人工智能
凤年徐1 小时前
解锁网页魔法:零基础HTML通关秘籍
前端·javascript·css·前端框架·html·web
能工智人小辰1 小时前
Educational Codeforces Round 181 (Rated for Div. 2) A-C
c语言·开发语言
PineappleCoder1 小时前
防抖 vs 节流:高频事件的 “性能优化双雄” 怎么用?
前端·javascript·面试
小old弟1 小时前
🤔面试官问你:什么是高阶函数?举例说明用到过的...
前端
是你的小橘呀1 小时前
从小区广场舞群聊,看懂前端 er 必懂的发布订阅模式
前端