遍历数组和对象的方法都有哪些？

在前端开发中，遍历数组和对象的方法有很多，以下是常用的几种，并分别针对数组和对象进行说明：

数组遍历:

• for 循环: 最基本的循环方式，可以完全控制循环的起始、结束和步长。

const arr = [1, 2, 3, 4, 5];

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

• for...in 循环: 遍历数组的索引（键名）。 不推荐用于数组遍历, 因为：
  • 遍历顺序不保证与数组索引顺序一致。
  • 会遍历到继承的属性。
  • 效率低于 for 循环和 for...of 循环。

const arr = [1, 2, 3, 4, 5];

for (const index in arr) {
  console.log(index, arr[index]); // index 是字符串类型的索引
}

• for...of 循环: ES6 引入，遍历数组的元素值。推荐用于遍历数组。

const arr = [1, 2, 3, 4, 5];

for (const value of arr) {
  console.log(value);
}

• forEach() 方法: 遍历数组的每个元素，并对每个元素执行回调函数。

const arr = [1, 2, 3, 4, 5];

arr.forEach((value, index) => {
  console.log(index, value);
});

• map() 方法: 遍历数组的每个元素，并对每个元素执行回调函数，返回一个新数组，新数组包含回调函数的返回值。 常用于对数组元素进行转换。

const arr = [1, 2, 3, 4, 5];

const doubled = arr.map(value => value * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

对象遍历:

• for...in 循环: 遍历对象的键名（属性名）。 这是遍历对象属性的常用方法。

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  console.log(key, obj[key]);
}

• Object.keys(): 返回一个包含对象自身所有可枚举属性名的数组。可以结合 for...of 或其他数组遍历方法使用。

const obj = { a: 1, b: 2, c: 3 };

const keys = Object.keys(obj);
for (const key of keys) {
  console.log(key, obj[key]);
}

• Object.values(): 返回一个包含对象自身所有可枚举属性值的数组。

const obj = { a: 1, b: 2, c: 3 };

const values = Object.values(obj);
console.log(values); // [1, 2, 3]

• Object.entries(): 返回一个包含对象自身所有可枚举属性的键值对数组。

const obj = { a: 1, b: 2, c: 3 };

const entries = Object.entries(obj);
console.log(entries); // [["a", 1], ["b", 2], ["c", 3]]

for (const [key, value] of entries) {
  console.log(key, value);
}

选择哪种方法取决于你的具体需求。 对于数组，for...of 和 forEach 通常是首选。 对于对象，for...in、Object.keys()、Object.values() 和 Object.entries() 提供了不同的遍历方式，可以根据需要选择。

希望以上信息对您有所帮助!