JavaScript 中遍历对象属性的多种方法 可遍历不同类型属性

类别: JavaScript 阅读量:4

首页>文章>所有文章>JavaScript 中遍历对象属性的多种方法 可遍历不同类型属性

在 JavaScript 开发中,经常会遇到需要遍历对象的属性,因此需要熟练掌握在 JS 中遍历对象的方法。

在本文将系统讲解在 JavaScript 中的 7 种遍历对象属性的方法,涵盖基础循环、Object 内置方法、Reflect 方法等。

如果需要在线运行 JavaScript 代码可以使用本站工具:JS 在线编辑器、在线运行工具

对象属性的基本概念

在介绍具体的遍历方法之前,先介绍以下几个概念。

属性按键的类型分为:

  • 字符串键属性:属性的名称是字符串形式,
  • Symbol 属性:以 Symbol 为键的属性,主要作用是避免属性名冲突。

属性按可枚举性分为:

  • 可枚举属性:对象属性的 enumerable 标志为 true,默认创建的属性都是可枚举的。
  • 可枚举属性:对象属性的 enumerable 标志为 false 的属性。

属性按照属性的来源分为:

  • 自身属性:在本对象内定义的属性。
  • 继承属性:从原型链上继承的属性,如从 Object.prototype.toString 继承的 toString 属性。

[!NOTE]

各个分类之间的属性存在交叉的关系。如字符串键属性可以是字符串键属性,也可以是不字符串键属性;Symbol 属性可以是字符串键属性,也可以是不字符串键属性。

在本文的介绍中,所有的示例都是基于如下的对象为基础进行介绍:

let obj = {
    name: "张三",
    age: 15,
    class: "八年级"
};

[!IMPORTANT]

具体的选择那个方法,把你需要遍历什么类型的属性。

使用 for 循环循环遍历属性

使用 for 循环循环遍历属性是最基础的遍历方法。

使用 for...in 循环

for...in 是 JavaScript 中遍历对象最基础的方式,用于循环对象所有的可枚举的属性,包括继承的可枚举属性。

使用示例:

// 遍历 obj 的可枚举属性
for (let key in obj) {
    // 使用 hasOwnProperty 过滤继承属性(如原型链上的 toString)
    if (obj.hasOwnProperty(key)) {
        console.log(key, obj[key]);
    }
}

输出内容为:

> "name" "张三"
> "age" 15
> "class" "八年级"

for...of 循环

for...of 本身用于遍历可迭代对象(如数组、Set、Map),需要结合 Object.keys()Object.entries() 方法使用。

[!WARNING]

普通对象默认是不可迭代的,因此不能使用 for...of 方法遍历

使用示例:

// 使用 Object.keys() 获取全部属性名
for (let key of Object.keys(obj)) {
    console.log(key, obj[key]);
}

// 使用 Object.entries() 获取全部的键值对
for (let [key, value] of Object.entries(obj)) {
    console.log(key, value);
}

输出内容为:

> "name" "张三"
> "age" 15
> "class" "八年级"

使用 Object 静态方法

使用 Object 对象的静态方法能够更精准的遍历对象的属性。

使用 Object.keys()

Object.keys() 返回对象的自身可枚举属性名的数组(仅字符串键的属性,不含 Symbol 熟悉感、继承属性),是最经常使用的方法之一。

使用示例:

// 遍历属性名数组
Object.keys(obj).forEach(key => {
    console.log(key, obj[key]);
});

// 仅获取属性名数组
console.log(Object.keys(obj));

输出信息为:

> "name" "张三"
> "age" 15
> "class" "八年级"

> Array ["name", "age", "class"]

使用 Object.entries()

Object.entries() 方法返回对象的自身可枚举属性键值对的数组,它可以同时获取属性名和属性值。

使用示例:

// 遍历键值对
Object.entries(obj).forEach(([key, value]) => {
    console.log(key, value);
});

// 仅获取键值对的数组
console.log(Object.entries(obj));

输出信息为:

> "name" "张三"
> "age" 15
> "class" "八年级"

> Array [Array ["name", "张三"], Array ["age", 15], Array ["class", "八年级"]]

[!TIP]

使用 Object.values() 可以获取自身可枚举属性的值的数组。

使用 Object.getOwnPropertyNames() 遍历属性

Object.getOwnPropertyNames() 方法返回该对象中定义的所有自身属性名的数组(包括不可枚举属性,但不含 Symbol 属性)。不可枚举属性可以认为是隐藏属性。

使用示例:

// 定义一个不可枚举属性
Object.defineProperty(obj, 'id', {
    value: 100001,
    enumerable: false // 不可枚举属性
});

// 遍历自身的所有属性,包括不可枚举属性
Object.getOwnPropertyNames(obj).forEach(key => {
    console.log(key, obj[key]);
});

输出信息为:

> "name" "张三"
> "age" 15
> "class" "八年级"
> "id" 100001

Object.getOwnPropertySymbols()

Object.getOwnPropertySymbols() 是专门用于遍历对象的自身 Symbol 类型属性的方法,它会返回 Symbol 键数组。

使用示例:

// 定义 Symbol 属性
const address = Symbol('address');
obj[address] = 'symbol-山东省';

// 仅遍历 Symbol 属性
Object.getOwnPropertySymbols(obj).forEach(key => {
    console.log(key, obj[key]); // 输出:Symbol(name) symbol-张三  |  Symbol(class) symbol-八年级
});

输出信息为:

> Symbol(address) "symbol-山东省"

遍历无 Symbol 属性的对象:

console.log(Object.getOwnPropertySymbols({age: 1})); // 输出:[]

输出信息为:

> Array []

使用 Reflect.ownKeys() 方法

Reflect.ownKeys() 方法 ES6 中新增的一个方法,专门用于遍历对象的属性,它会返回对象的自身所有属性名的数组,其中包括字符串键属性、Symbol 属性、可枚举属性、不可枚举属性,是最全面的属性的遍历方法。

使用示例:

const address = Symbol('address');
obj[address] = 'symbol-山东省';
Object.defineProperty(obj, 'uuid', { value: 'cb5f0978-700d-49a0-b73a-119695278c1f', enumerable: false });

// 遍历所有自身属性
Reflect.ownKeys(obj).forEach(key => {
    console.log(key, obj[key]); 
});

输出信息为:

> "name" "张三"
> "age" 15
> "class" "八年级"
> "uuid" "cb5f0978-700d-49a0-b73a-119695278c1f"
> Symbol(address) "symbol-山东省"

总结

在本文中讲解了在 JavaScript 中使用 for 循环、Object 静态方法、Reflect 方法遍历对象的属性,可以遍历的属性包含字符串键属性、Symbol 属性、可枚举属性、不可枚举属性。可以根据自己需求选择。

相关页面



评论

暂无评论,快来抢沙发吧~