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

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)

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

收起

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
});

描述对象的四个属性

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

enumerable 相关的操作

目前,有四个操作不包含 enumerablefalse 的属性:

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

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

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

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

相关推荐
wycode1 分钟前
Vue2实践(3)之用component做一个动态表单(二)
前端·javascript·vue.js
用户10922571561017 分钟前
你以为的 Tailwind 并不高效,看看这些使用误区
前端
意会32 分钟前
微信闪照小程序实现
前端·css·微信小程序
onejason32 分钟前
《利用 Python 爬虫获取 Amazon 商品详情实战指南》
前端·后端·python
用户67375280188436 分钟前
鸿蒙开发:应用内如何做更新
前端
zxhnext1 小时前
LLM大语言模型入门
前端·后端
知心宝贝1 小时前
写了那么久的前端,你真的了解浏览器背后的“小动作“吗?
前端·程序员·浏览器
wycode1 小时前
Vue2实践(2)之用component做一个动态表单(一)
前端·javascript·vue.js
维李设论1 小时前
前端智能化 | AG-UI实践及原理浅析
前端·aigc·agent
第七种黄昏1 小时前
Vue3 中的 ref、模板引用和 defineExpose 详解
前端·javascript·vue.js