2025年4月26日 星期六 乙巳(蛇)年 正月廿七 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

JS操作对象属性(获取、添加、删除、修改对象属性)

时间:03-07来源:作者:点击数:56

属性也称为名值对,包括属性名和属性值。属性名可以是包含空字符串在内的任意字符串,一个对象中不能存在两个同名的属性。属性值可以是任意类型的数据。

定义属性

1. 直接量定义

在对象直接量中,属性名与属性值之间通过冒号分隔,冒号左侧是属性名,右侧是属性值,名值对(属性)之间通过逗号分隔。

示例1

在下面示例中,使用直接量方法定义对象 obj,然后添加了两个成员,一个是属性,另一个是方法。

  • var obj = {
  • x : 1,
  • y : function () {
  • return this.x + this.x;
  • }
  • }

2. 点语法定义

示例2

通过点语法,可以在构造函数内或者对象外添加属性。

  • var obj = {};
  • obj.x = 1;
  • obj.y = function () {
  • return this.x + this.x;
  • }

3. 使用 Object.defineProperty

使用 Object.defineProperty() 函数可以为对象添加属性,或者修改现有属性。如果指定的属性名在对象中不存在,则执行添加操作;如果在对象中存在同名属性,则执行修改操作。

具体用法如下:

Object.defineProperty(object, propertyname, descriptor);

参数说明如下:

  • object:指定要添加或修改属性的对象,可以是 JavaScript 对象或者 DOM 对象。
  • propertyname:表示属性名的字符串。
  • descriptor:定义属性的描述符,包括对数据属性或访问器属性。

Object.defineProperty 返回值为已修改的对象。

示例3

下面示例先定义一个对象直接量 obj,然后使用 Object.defineProperty() 函数为 obj 对象定义属性,属性名为 x,值为 1,可写、可枚举、可修改特性。

  • var obj = {};
  • Object.defineProperty(obj, "x", {
  • value : 1,
  • writable : true,
  • enumerable : true,
  • configurable : true
  • });
  • console.log(obj.x); //1

4. 使用 Object.defineProperties

使用 Object.defineProperties() 函数可以一次定义多个属性。具体用法如下:

object.defineProperties(object, descriptors);

参数说明如下:

  • object:对其添加或修改属性的对象,可以是本地对象或 DOM 对象。
  • descriptors:包含一个或多个描述符对象,每个描述符对象描述一个数据属性或访问器属性。

示例4

在下面示例中,使用 Object.defineProperties() 函数将数据属性和访问器属性添加到对象 obj 上。

  • var obj = {};
  • Object.defineProperties(obj, {
  • x : { //定义属性x
  • value : 1,
  • writable : true, //可写
  • },
  • y : { //定义属性y
  • set : function (x) { //设置访问器属性
  • this.x = x; //改写obj对象的x属性的值
  • },
  • get : function () { //设置访问器
  • return this.x;
  • },
  • }
  • });
  • obj.y = 10;
  • console.log(obj.x); //10

读写属性

1. 使用点语法

使用点语法可以快速读写对象属性,点语法左侧是引用对象的变量,右侧是属性名。

示例1

下面示例定义对象 obj,包含属性 x,然后使用点语法读取属性 x 的值。

  • var obj = { //定义对象
  • x : 1
  • }
  • console.log(obj.x); //访问对象属性x,返回1
  • obj.x = 2; //重写属性值
  • console.log(obj.x); //访问对象属性x,返回2

2. 使用中括号语法

从结构上分析,对象与数组相似,因此可以使用中括号来读写对象属性。

示例2

针对上面示例,可以使用中括号来读写对象属性。

  • console.log(obj["x"]); //2
  • obj["x"] = 3; //重写属性值
  • console.log(obj["x"]); //3

【注意事项】

  • 在中括号语法中,必须以字符串形式指定属性名,不能使用标识符。
  • 中括号内可以使用字符串,也可以使用字符型表达式,即只要表达式的值为字符串即可。

示例3

下面示例使用 for/in 遍历对象的可枚举属性,并读取它们的值,然后重写属性值。

  • for (var i in obj) {
  • console.log(obj[i]);
  • obj[i] = obj[i] + obj[i];
  • console.log(obj[i]);
  • }

在上面代码中,中括号中的表达式 i 是一个变量,其返回值为 for/in 遍历对象时枚举的每个属性名。

3. 使用 Object.getOwnPropertyNames

使用 Object.getOwnPropertyNames() 函数能够返回指定对象私有属性的名称。私有属性是指用户在本地定义的属性,而不是继承的原型属性。具体用法如下:

Object.getOwnPropertyNames(object);

参数 object 表示一个对象,返回值为一个数组,其中包含所有私有属性的名称。其中包括可枚举的和不可枚举的属性和方法的名称。如果仅返回可枚举的属性和方法的名称,应该使用 Object.keys() 函数。

示例4

在下面示例中定义一个对象,该对象包含三个属性,然后使用 getOwnPropertyNames 获取该对象的私有属性名称。

  • var obj = {x : 1, y : 2, z : 3};
  • var arr = Object.getOwnPropertyNames(obj);
  • console.log(arr); //返回属性名:x,yz

4. 使用 Object.keys

使用 Object.keys() 函数仅能获取可枚举的私有属性名称。具体用法如下:

Object.keys(object);

参数 object 表示指定的对象,可以是 JavaScript 对象或 DOM 对象。返回值是一个数组,其中包含对象的可枚举属性名称。

5. Object.getOwnPropertyDescriptor

使用 Object.getOwnPropertyDescriptor() 函数能够获取对象属性的描述符。具体用法如下:

Object.getOwnPropertyDescriptor(object, propertyname);

参数 object 表示指定的对象,propertyname 表示属性的名称。返回值为属性的描述符对象。

示例5

在下面示例中定义一个对象 obj,包含 3 个属性,然后使用 Object.getOwnPropertyDescriptor() 函数获取属性 x 的数据属性描述符,并使用该描述符将属性 x 设置为只读。最后,调用 Object.defineProperty() 函数,使用数据属性描述符修改属性 x 的特性。遍历修改后的对象,可以发现只读属性 writable 为 false。

  • var obj = {x : 1, y : 2, z : 3}; //定义对象
  • var des = Object.getOwnPropertyDescriptor(obj, "x"); //获取属性x的数据属性描述符
  • for (var prop in des) { //遍历属性描述符对象
  • console.log(prop + ':' + des[prop]); //显示特性值
  • }
  • des.writable = false; //重写特性,不允许修改属性
  • des.value = 100; //重写属性值
  • Object.defineProperty(obj, "x", des); //使用修改后的数据属性描述符覆盖属性x
  • var des = Object.getOwnPropertyDescriptor(obj, "x"); //重新获取属性x的数据属性描述符
  • for (var prop in des) { //遍历属性描述符对象
  • console.log(prop + ':' + des[prop]); //显示特性值
  • }

一旦为未命名的属性赋值后,对象就会自动定义该属性的名称,在任何时候和位置为该属性赋值,都不需要定义属性,而只会重新设置它的值。如果读取未定义的属性,则返回值都是 undefined。

删除属性

使用 delete 运算符可以删除对象的属性。

示例

下面示例使用 delete 运算符删除指定属性。

  • var obj = {x : 1}; //定义对象
  • delete obj.x; //删除对象的属性x
  • console.log(obj.x); //返回undefined

当删除对象属性之后,不是将该属性值设置为 undefined,而是从对象中彻底清除属性。如果使用 for/in 语句枚举对象属性,只能枚举属性值为 undefined 的属性,但不会枚举已删除属性。

使用方法

方法也是函数,当函数被赋值给对象的属性,就被称为方法。方法的使用与函数是相同的,唯一的不同点是在方法内常用 this 引用调用对象,其实在普通函数内也有 this,只不过不常用。

使用点语法或中括号可以访问方法,使用小括号可以激活方法。

示例1

与普通函数用法一样,可以在调用方法时传递参数,也可以设计返回值。

  • var obj = {};
  • obj.f = function (n) { //定义对象的方法
  • return 10 * n;
  • }
  • var n = obj.f(5); //调用方法,设置参数为5
  • console.log(n); //返回值50

示例2

在方法内 this 总是指向当前调用对象。在下面示例中,当在不同运行环境中调用对象 obj 的方法 f() 时,该方法的 this 指向时不同的。

  • var obj = { //定义对象
  • f : function () { //定义对象的方法
  • console.log(this); //访问当前对象
  • }
  • }
  • obj.f(); //此时this指向对象obj
  • var f1 = obj.f; //引用对象obj的方法f
  • f1(); //此时this指向对象window
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门