对象循环

138 阅读2分钟

一、for...in 循环

for (let key in object) {
  console.log(key, object[key]);
}

for...in 循环是一种循环对象属性的方法。它会遍历对象的所有可枚举的属性,包括它的原型中的属性。在每次循环中,变量 key 会被赋值为当前属性的键名,而变量 object[key] 则被赋值为当前属性的值。

需要注意的是,用 for...in 循环遍历对象时,遍历对象的属性顺序是不确定的。在实际开发中,我们使用它主要是为了遍历对象的属性,而不必考虑它的顺序。

二、Object.keys()

Object.keys() 方法返回一个给定对象自身可枚举属性名称数组。使用它可以遍历对象的属性,但与 for...in 循环不同,它只考虑对象的自身属性,而不会遍历它的原型链。

我们可以使用 Object.keys() 方法获取对象的键名数组,然后使用数组的遍历方法,如 for 循环或 forEach() 方法来遍历对象的属性。 

let race = {"2023-6-26": "篮球", "2023-8-26": "羽毛球", "2023-9-26": "足球"};
let keys = Object.keys(race);
for (let i = 0; i < keys.length; i++) {
  console.log(keys[i], race[keys[i]]);
}
// 2023-6-26 篮球
// 2023-8-26 羽毛球
// 2023-9-26 足球

时间线的渲染尽量不要用for in的方式循环对象,因为for in循环是无序,如果用的话也可以先将日期转时间戳再排序

三、Object.values()

Object.values() 方法可以获取一个给定对象所有可枚举属性的值的数组。同样地,它只考虑对象自身的属性,而不会遍历它的原型链。

我们可以使用 Object.values() 方法获取对象的值数组,然后使用数组的遍历方法,如 for 循环或 forEach() 方法来遍历对象的属性值。

四、Object.entries()

Object.entries() 方法返回一个给定对象自身可枚举属性的 [key, value] 数组。同样地,它只考虑对象的自身属性,而不会遍历它的原型链。

我们可以使用 Object.entries() 方法获取对象的键值对数组,然后使用数组的遍历方法,如 for 循环或 forEach() 方法来遍历对象的属性键值对。