web 前端 Javascript 对象的循环遍历方法有哪些

在Web前端开发中，对JavaScript对象进行循环遍历的方法主要有：for...in循环、Object.keys()方法配合forEach循环、Object.entries()方法配合forEach循环、Object.values()方法配合forEach循环、以及使用for...of结构配合Object.entries()。for...in循环是最直接的一种方式，它可以遍历一个对象的所有可枚举属性。但这种方法有可能遍历到原型链上的属性，因此通常配合hasOwnProperty()使用来过滤那些非该对象自有的属性。

一、FOR…IN循环

for...in循环是JavaScript中对象遍历的基本方法。它可以遍历一个对象的所有可枚举属性，包括其原型链上的属性。基本用法如下：

for (let key in object) {

    if (object.hasOwnProperty(key)) {
        // 你的逻辑代码
    }
}

在使用for...in循环时，应注意使用hasOwnProperty()方法来检查属性是否是对象自己的属性，以避免遍历到原型链上不必要的属性。虽然这种方法简单易用，但在某些情况下，如需要遍历的对象属性数量庞大或需要更加复杂的操作时，可能不是最优的选择。

二、OBJECT.KEYS()方法配合FOREACH循环

Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序是和在通过常规循环遍历该对象时返回的顺序一致的。结合forEach循环，我们可以这样做：

Object.keys(object).forEach(function(key) {

    // 你的逻辑代码
});

这种方法的优势在于，它只会遍历对象自身的可枚举属性，而不会遍历继承的属性。此外，由于生成了属性名的数组，还能很容易的实现对属性名的其他数组操作，如过滤、测试等。

三、OBJECT.ENTRIES()方法配合FOREACH循环

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组。它的用法类似于Object.keys()，但它提供的是[key, value]形式的数组，这使得我们在循环访问属性时可以同时获取键和值。

Object.entries(object).forEach(([key, value]) => {

    // 你的逻辑代码
});

使用Object.entries()方法可以简化代码，尤其是当我们在循环中既需要属性名(key)又需要属性值(value)时，这种方法非常方便。

四、OBJECT.VALUES()方法配合FOREACH循环

Object.values()方法返回一个给定对象自身可枚举属性值组成的数组，且数组中值的排列顺序与通过for...in循环（或Object.keys()方法）遍历该对象时返回的顺序一致。

Object.values(object).forEach(value => {

    // 你的逻辑代码
});

这种方法适用于只关心对象中值的情况，并且可以通过生成值的数组来执行数组方法，提高了代码的灵活性。

五、FOR…OF结构配合OBJECT.ENTRIES()

在ES6中，for...of语句为遍历数组（包括数组、类数组对象、以及迭代器和生成器对象）中的值创建了一个新的迭代构造。当和Object.entries()结合使用时，我们可以如此遍历一个对象：

for (let [key, value] of Object.entries(object)) {

    // 你的逻辑代码
}

这种方式结合了for...of的简洁语法和Object.entries()键值对数组的直观性，编写起来既简单又清晰。

每种方法都有其适用场景，开发者应根据实际开发需求，选择最合适的遍历方法。在新的ES6语法中，for...of结合Object.entries()因其简捷性和直观性，已经变得越来越流行。

相关问答FAQs：

如何遍历 JavaScript 对象中的属性和值？

可以使用 for-in 循环来遍历 JavaScript 对象的属性。for-in 循环会迭代对象的每个可枚举属性，并可以获取属性的名称和值。例如：

for (var key in obj) {
  if (obj.hasOwnProperty(key)) {
    var value = obj[key];
    console.log(key + ": " + value);
  }
}

如何遍历 JavaScript 对象中的属性，但不包括原型链上的属性？

可以使用 Object.keys() 方法来获取 JavaScript 对象的所有属性，然后使用 forEach() 方法进行遍历。这种方法只会遍历对象自身的属性，而不包括原型链上的属性。例如：

Object.keys(obj).forEach(function(key) {
  var value = obj[key];
  console.log(key + ": " + value);
});

如何使用 ES6 的 for-of 循环遍历 JavaScript 对象中的值？

可以使用 Object.values() 方法将 JavaScript 对象的值转换为数组，然后使用 for-of 循环进行遍历。这种方法只能遍历对象的值，并不能获取属性名称。例如：

for (var value of Object.values(obj)) {
  console.log(value);
}