【JavaScript】遍历对象和数组

文章目录

- [1. 遍历对象](#1. 遍历对象)
- - [for...in 循环](#for...in 循环)
  - Object.keys()
  - Object.entries()
- [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 中对象和数组的遍历有了更深入的理解。