JavaScript 对象属性遍历与描述详解

在 JavaScript 中，对象是一种非常重要的数据类型。理解如何遍历对象的属性以及对象属性的描述，对于高效使用 JavaScript 至关重要。本文将详细介绍对象属性的遍历方法和属性描述对象的相关内容。

一、对象属性的遍历方法

1. `for...in` 循环

for...in 循环用于遍历对象的可枚举 属性，包括对象自身的属性和继承自原型链上的属性。

收起

javascript

vbnet 复制代码

const obj = {
    id: 1,
    name: 'zhangsan',
    age: 18
};

for (let key in obj) {
    console.log(key + '---' + obj[key]);
}

如果该属性是可枚举 性的，那么这个属性就能被 for...in 查找遍历到。需要注意的是，它会包含原型上的属性。

2. `Object.keys()` 和 `Object.values()`

Object.keys(obj)：返回一个表示给定对象的所有可枚举 自身属性的键名组成的字符串数组。
Object.values(obj)：返回一个表示给定对象的所有可枚举 自身属性的值组成的数组。

收起

javascript

javascript 复制代码

const obj = {
    id: 1,
    name: 'zhangsan',
    age: 18
};

console.log(Object.keys(obj));
console.log(Object.values(obj));

参数 obj 是要返回其枚举自身属性的对象。

3. `Object.getOwnPropertyNames(obj)`

该方法返回一个数组，包含对象自身的所有属性（包含不可枚举 属性），但不会获取继承自原型链上的属性。通过遍历该数组可以获取属性的 key 和 value。

收起

javascript

javascript 复制代码

function Person() {
    this.name = '张三';
}
Person.prototype = {
    constructor: Person,
    job: "student"
};

var student1 = new Person();

Object.defineProperty(student1, 'age', {
    value: "33",
    enumerable: false  // 设置为**不可枚举**属性
});

Object.getOwnPropertyNames(student1).forEach(function (key) {
    console.log(key + '---' + student1[key]);  // 结果：name---张三   age---33
});

4. `Object.entries()`

Object.entries() 方法返回一个给定对象自身 可枚举 属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举继承自原型链中的属性）。

收起

javascript

javascript 复制代码

let per = {
    name: 'zdx',
    age: 18
};

for (let [key, value] of Object.entries(per)) {
    console.log(key, value);
}
// 输出：
// name zdx
// age 18

5. `Reflect.ownKeys()`

Reflect.ownKeys(target) 方法返回所有的属性 key，包括不可枚举 类型，但不包括继承的属性。

收起

javascript

javascript 复制代码

let obj = {
    name: 'zhangsan',
    age: '18'
};
console.log(Reflect.ownKeys(obj));

参数 target 是获取目标对象的属性，如果 target 不是对象则会报错，返回值是由 target 自身属性组成的数组。

二、对象属性的描述

对象的每一个属性都有一个描述对象，用来描述和控制该属性的行为。可以使用 Object.getOwnPropertyDescriptor 方法来获取该描述对象，使用 Object.defineProperty 方法来设置。

收起

javascript

javascript 复制代码

let obj = { start: '123' };
console.log(Object.getOwnPropertyDescriptor(obj, 'start'));
// 输出内容：
// {
//     configurable: true,
//     enumerable: true,
//     value: "123",
//     writable: true
// }

Object.defineProperty(obj, "sex", {
    value: "female",
    enumerable: false
});

描述对象的四个属性

configurable ：表示能否通过 delete 删除此属性，能否修改属性的特性，或能否修改把属性修改为访问器属性。如果直接使用字面量定义对象，默认值为 true。
enumerable ：表示该属性是否可枚举 ，即是否能通过 for-in 循环或 Object.keys() 返回属性。如果直接使用字面量定义对象，默认值为 true。
writable ：表示能否修改属性的值。如果直接使用字面量定义对象，默认值为 true。
value ：该属性对应的值，默认为 undefined。

与 `enumerable` 相关的操作

目前，有四个操作不包含 enumerable 为 false 的属性：

for...in 循环：只遍历对象自身的和继承的可枚举的属性。
Object.keys()：返回对象自身的所有可枚举的属性的键名。
JSON.stringify()：只串行化对象自身的可枚举的属性。
Object.assign()：拷贝对象自身的可枚举的属性。

三、区分自身属性和原型属性

对象的属性有自身属性和继承自原型的属性之分，自身属性是对象自己的属性，继承自原型的属性是存在于原型链上的属性。可以使用 Object.prototype.hasOwnProperty() 判断是自身属性还是继承自原型的属性，而 in 操作符只可以判断对象是否有某个属性，不能判断是自身的还是继承自原型的。

综上所述，掌握这些对象属性的遍历方法和属性描述的知识，能够帮助我们更好地操作和管理 JavaScript 对象。

JavaScript 对象属性遍历与描述详解