JavaScript 对象循环遍历的4种方式,以及它们的优缺点

更新日期: 2024-02-20阅读: 578标签: 对象

如何在JavaScript 中循环对象属性和值?它与数组不同,它们没有内置的循环方法。在这篇博文中,我将向您展示: 循环 JavaScript 对象的四种不同方法 ,每种方法的优点和缺点。


循环对象键

JavaScript 对象键或属性是存储在对象中的值的名称或标识符。 JavaScript 对象是JavaScript 中的非原始数据类型之一。它们可以是字符串、符号或数字,用于访问或修改对象的值。例如,person.name 是一个返回 person 对象的名称值的属性。

const={
name:"John",
age:30,
favoriteColors:["Red","Green"]
};

我们将在整篇文章中使用同一个对象。 


方法 1:JavaScript 使用 Object.keys() 循环对象键

JavaScript Object.keys()方法返回对象的所有键(或属性名称)的数组。然后,您可以使用 for 循环或 forEach() 方法来迭代数组并访问键。要循环访问 person 对象的键,您可以使用 Object.keys() 静态方法,如下所示:

const keys = Object.keys(person); 
// Output: ["name", "age", "favoriteColors"]

// 1. Using a for() loop
for (let i = 0; i < keys.length; i++) {
console.log(keys[i]);
}
// Output: "name", "age", "favoriteColors"

// 2. Using a forEach() method
keys.forEach(key => {
console.log(key);
});
// Output: "name", "age", "favoriteColors"

这种方法的优点是:

  • 它简单易用。
  • 它适用于任何对象,无论其结构或复杂性如何。
  • 它与旧版浏览器兼容,因为它是 ECMAScript 5 标准的一部分。

这种方法的缺点是:

  • 此方法为您提供对象自己的键。它忽略从原型链获得的密钥。有时,这正是您所需要的。其他时候,您可能也想包含这些键。
  • 对象的键没有固定的顺序。这意味着您不能总是期望它们以相同的顺序出现。如果您的逻辑取决于按键顺序,请小心,因为它可能不会按您的预期工作。
  • 这段代码创建了另一个数组。这会减慢您的代码速度并使用更多内存。如果物体很大或有很多部分,情况会更糟。

方法 2:使用 Object.values() 循环对象值

Object.values() 为我们提供了一个包含对象所有值的数组。您可以循环数组并轻松获取值。例如,看看这个 person 对象。您可以像这样使用 Object.values() :


// Output: ["John", 40, ["Red", "Green"]]

// 1. Using a for() loop
for (let index = 0; index < values.length; index++) {
console.log(values[index]);
}
// Output: ["John", 40, ["Red", "Green"]

// 2. Using a forEach() method
values.forEach(key => {

});
// Output: ["John", 40, ["Red", "Green"]

这种方法的优点是:

  • 它简单易用。
  • 它适用于任何对象,无论其结构或复杂性如何。
  • 它是 ECMAScript 2017 标准的一部分,这意味着它是一项现代且受到广泛支持的功能。

这种方法的缺点是:

  • 它只返回对象本身的值。这意味着它不包括从对象原型链继承的值。这可能是也可能不是您想要的,具体取决于您的用例。
  • Object.values() 不关心值的顺序,因为对象没有排序。如果您的代码依赖于顺序,这可能会成为问题。 
  • 这是一个新功能,因此一些旧浏览器不支持它。在这些情况下,您可能需要使用一些技巧才能使其发挥作用。
  • Object.values() 使用值创建一个新数组,这会影响代码使用的速度和内存量。如果您的对象很大或很复杂,这可能是一个问题。

方法 3:使用 Object.entries() 循环对象条目

你想获取一个对象的键值对吗?你可以使用Object.entries()!它为您提供了一个数组数组,其中每个子数组都有一个键和一个值。然后,您可以使用 for 或 forEach 循环数组,并根据需要使用条目。 

例如,使用与之前相同的 person 对象,您可以使用 Object.entries() 方法,如下所示:



// 1. Using a for() loop
for (let index = 0; index < entries.length; index++) {

}
// Output: ["name", "John"], ["age", 30], ["favoriteColors", ["Red", "Green"]]

// 2. Using a forEach() method
entries.forEach(entry => {

});
// Output: ["name", "John"], ["age", 30], ["favoriteColors", ["Red", "Green"]]

这种方法的优点是:

  • 它简单易用。
  • 它适用于任何对象,无论其结构或复杂性如何。
  • 它是 ECMAScript 2017 标准的一部分,这意味着它是一项现代且受到广泛支持的功能。
  • 它返回对象的键和值,如果您需要在逻辑中访问这两个键和值,这会很有用。

这种方法的缺点是:

  • 它只返回对象自己的条目,这意味着它不包括从对象原型链继承的条目。这可能是也可能不是您想要的,具体取决于您的用例。
  • 它不保证条目的顺序,因为对象本质上是无序的。如果您的逻辑依赖于条目的顺序,这可能会导致一些问题。
  • 它会创建一个额外的数组,这可能会影响代码的性能和内存使用情况,特别是在对象很大或嵌套的情况下。
  • 它与旧版浏览器不兼容,因为它是一个相对较新的功能。您可能需要使用 polyfill 或转译器才能使其在较旧的环境中工作。

方法 4:JavaScript 使用 for...in 循环对象属性

使用 for...in 循环,您可以遍历对象的所有属性。它为您提供一个保存属性名称的变量。然后您可以使用带有点或括号的变量来获取属性值。

例如,使用与之前相同的 person 对象,我们可以使用 for...in 语句,如下所示:

const person = {
name: "John",
age: 30,
favoriteColors: ["Red", "Green"]
};

// Using a for...in statement
for (let key in person) {
console.log(key); // Output: "name", "age", "favoriteColors"
console.log(person[key]); // Output: "John", 30, ["Red", "Green"]
}

这种方法的优点是:

  • 它简单易用。
  • 它不会创建额外的数组,这可能会提高代码的性能和内存使用率,特别是在对象很大或嵌套的情况下。
  • 它返回对象的键和值,如果您需要在逻辑中访问这两个键和值,这会很有用。

这种方法的缺点是:

  • 它返回对象的所有可枚举属性,这意味着它包括从对象原型链继承的属性。这可能是也可能不是您想要的,具体取决于您的用例。如果只想循环对象自身的属性,则需要使用 hasOwnProperty() 方法过滤掉继承的属性。
  • 它不保证属性的顺序,因为对象本质上是无序的。如果您的逻辑依赖于属性的顺序,这可能会导致一些问题。
  • 它与 JavaScript 的一些新功能不兼容,例如 Symbol 属性或 Object.defineProperty()。这些功能可以创建 for…in 语句不可见的不可枚举属性。

不同循环对象属性的比较

这是四种方法的快速比较表:

方法退货拥有/全部命令表现兼容性
Object.keys()按键自己的低的高的
Object.values()价值观自己的低的中等的
对象.entries()键值自己的低的中等的
for...in特性全部高的低的
在 JavaScript 中循环对象的最佳方法取决于您想要实现的目标以及您想要如何编写代码。但是,一般的经验法则是,如果要访问对象的键、值或条目,则使用 Object 方法;如果要访问对象的属性及其原型链,则使用 for...in 语句。

链接: https://fly63.com/article/detial/12652

JavaScript中创建对象的7种模式

ECMA-262把对象定义为:”无需属性的集合,其属性可以包含基本值、对象或者函数。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。正因为这样,我们可以把ECMAScript的对象想象成散列表:无非就是一组名对值,其中值可以是数据或函数。

JavaScript数组、对象合并的多种方法实现

这篇文章讲解Js数组和对象的一些使用技巧,如何将不同的数组,对象合并/结合为1个的方法

Js通过.或者[]访问对象属性的语法、性能等区别

在JavaScript中可以使用 . 或者 [ ] 来访问对象的属性,但是对象中方法只能通过 . 来获取;使用.运算符来存取对象的属性的值。或者使用[]作为一个关联数组来存取对象的属性。但是这两种方式有什么区别了?

js中关于for...in遍历对象属性的顺序问题

对象使用obj.length时,它得到的值是undefined的,所以只能通过for...in循环获取对象的属性,我们发现并没有按属性的顺序显示,而且顺序在各个浏览器下显示也不同。 这是为什么呢?

JS声明对象时属性名加引号与不加引号的问题

JS声明对象时属性名加引号与不加引号的问题,一般情况下属性名加引号和不加引号是都可以的,效果是一样的。如果属性名是数字,则必须用“”包围,并且用 [] 方括号访问。

javascript的本地对象,内置对象和宿主对象

javascript的原生对象:也叫内部对象、本地对象、native object;内置对象:Global(全局对象)、Math ;宿主对象:有宿主提供的对象,在浏览器中window对象以及其下边所有的子对象(如bom、dom等等),在node中是globla及其子对象,也包含自定义的类对象。

JavaScript 判断对象中是否有某属性

判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式。一点( . )或者方括号( [ ] )、二in 运算符、三hasOwnProperty()。三种方式各有优缺点,不同的场景使用不同的方式,有时还需要结合使用

JavaScript Error对象详解

error,指程序中的非正常运行状态,在其他编程语言中称为“异常”或“错误”。解释器会为每个错误情形创建并抛出一个Error对象,其中包含错误的描述信息。

如何禁止JavaScript对象重写?

由于JavaScript的灵活性,我们可以轻易地重写(override)一些于其他人定义的对象(object)。换句话说,任何人都可以重写我们所定义的对象。这是一个非常强大的特性,许多开发者都有兴趣试试,来拓展或者修改某些对象的行为。

JavaScript面向对象编程中_优雅的类写法

虽然现在已经是ES6的时代,但是,还是有必要了解下ES5是怎么写一个类的。本文详述JavaScript面向对象编程中的类写法,并分步骤讲述如何写出优雅的类。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!