javascript 对象

本文详细介绍了JavaScript中对象的创建、访问、属性检测、序列化等核心概念,并深入探讨了对象的属性定义及其特性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

对象

1.对象的创建
字面量模式

var obj = {
  name:"terry",
  age:12,
  sayName:function(){
    console.log("my name is ",this.name);
  }
}

构造函数模式

var obj = new Object();
obj.name = "terry";
obj.age = 12;
obj.sayName = function(){
  console.log("my name is",this.name);
}
//等价于 <==>
var obj={};
obj.name="terry";
obj.age=12;

2.对象的访问
属性访问

obj.name      //'terry'
obj['name']     //'terry'
name = "age"
obj['age']      //12

方法的访问

obj.sayName();//方法的使用

遍历对象中的属性
普通版
的for循环可以遍历数组,但无法遍历对象
增强版的for循环:for…in用于遍历数组或者对象的属性
obj对象:依次从obj中获取到属性名
“自定义变量名key”用来指定是数组的元素索引,也可以是对象的属性

for(自定义变量名 in 数组/对象){
	执行代码
}
for(var key in obj){
	var value=obj[key];
}

新增删除对象中的属性
删除属性:

delete obj.pro
delete obj[“proname”]
delete obj.sayName   

新增属性

obj.newpropname=”value”

4.Object显示类型转换
ECMAScript中可用的3种强制类型转换如下:
Boolean(value)
把给定的值转换成Boolean型;
String(value)
把给定的值转换成字符串。
Number(value)
把给定的值转换成数字
Object类型到Boolean类型

// 除了空引用(null)会转换为false,其他都被转换为true
var obj = {
  name:"briup",
  age:12
};
// 使用Boolean包装器进行转换
console.log(Boolean(obj)); //ture

在这里插入图片描述Object类型转String类型

var obj = {
  name: 'zhangsan',
  age: 12,
  // 可以重写toString方法,进行我们想要的转换
  toString:function(){
    return this.name+"--"+this.age;
  }
};
console.log(obj.toString(), typeof obj.toString());
console.log(String(obj), typeof String(obj));

转换规则
​ 1.先调用对象的toString方法
​ 2.判断该方法的返回值是否为基础数据类型(Number,String,Boolean,Undefined,Null)
​ 3.若返回值为基础数据类型,则转换规则按照相应数据类型的转换规则对其进行转换
​ 4.若返回值不为基础数据类型,则在该返回值的基础上继续调用valueOf方法
​ 5.判断valueOf的返回值是否为基础数据类型
​ 6.判断是否为基础数据类型,若是基础数据类型则进行操作3
​ 7.若仍旧不为基础数据类型则报错
Object类型转Number类型

var obj = {
  name:"briup",
  age:12,
  /*
		1.如果只重写了valueOf()或者toString()方法,则调用该方法,并将返回值用Number()转换。
		2.如果两个方法都重写了,则调用valueOf(),并将返回值用Number()转换。
		3.如果两个方法都没有重写,则返回NaN
	*/ 
  toString:function(){
    return "100";
  },
  valueOf:function(){
    return 10;
  }
};
console.log(Number(obj));

转换规则:
1.先调用对象的valueOf方法
​ 2.判断该方法的返回值是否为基础数据类型(Number,String,Boolean,Undefined,Null)
​ 3.若返回值为基础数据类型,则转换规则按照相应数据类型的转换规则对其进行转换
​ 4.若返回值不为基础数据类型,则在该返回值的基础上继续调用toString方法
​ 5.判断toString的返回值是否为基础数据类型
​ 6.判断是否为基础数据类型,若是基础数据类型则进行操作3
​ 7.若仍旧不为基础数据类型则报错
5.检测属性
检测一个属性是否属于某个对象。常用的方式主要有3种:
in
检测某属性是否是某对象的自有属性或者是继承属性

var obj = {
  name: 'zhangsan',
  age: 18,
  school: 'xx大学'
}
//in运算符的左侧为属性名称,右侧为对象
console.log('name' in obj); //true
console.log('age' in obj);  //true
console.log('gender' in obj); //false
//如果用in判断一个属性存在,这个属性不一定是obj的,它可能是obj继承得到的,如:
'toString' in obj;  //  true
因为toString定义在object对象中,而所有对象最终都会在原型链上指向object,所以obj也拥有toString属性。

Object.prototype.hasOwnProperty()
检测给定的属性是否是对象的自有属性,对于继承属性将返回false

var obj = {
  name: 'zhangsan',
  age: 18,
  school: 'xx大学'
}
console.log(obj.hasOwnProperty('name')); //true
console.log(obj.hasOwnProperty('age'));  //true
console.log(obj.hasOwnProperty('toString')); //false,toString为继承属性
console.log(obj.hasOwnProperty('gender')); //false

Object.prototype.propertyIsEnumerable()
propertyIsEnumerable()是hasOwnProperty()的增强版,除了是自身属性外,还要求是可枚举属性,即我们创建的属性。

var obj = {
  name: 'zhangsan',
  age: 18,
  school: 'xx大学'
}
console.log(obj.propertyIsEnumerable('name')); //true
console.log(obj.propertyIsEnumerable('age'));  //true
console.log(obj.propertyIsEnumerable('toString')); //false,不可枚举
console.log(obj.propertyIsEnumerable('gender')); //false

6.Object原型属性及方法
在Object的构造函数的原型对象中的属性和方法都可以被Object构造函数的实例所继承。
Object原型中的所具有的任何属性和方法也同样存在于其他对象中,任何对象继承自Object。
每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,实例都包含一个指向原型对象的内部指针。
Object原型中常用的方法:

constructor

​ 保存用户创建当前对象的函数,与原型对象对应的构造函数

hasOwnProperty(propertyName)

​ 检查给定的属性名是否是对象的自有属性

propertyIsEnumerable(propertyName)

​ 检查给定的属性在当前对象实例中是否存在

valueOf()

​ 返回对象的字符串,数值,布尔值的表示

toLocaleString()

​ 返回对象的字符串表示,该字符串与执行环境的地区对应

toString()

​ 返回对象的字符串表示

isPrototypeOf(object)

​ 检查传入的对象的原型

​ a.isPrototypeOf(b) 如果a是b的原型,则返回true。如果b不是对象,或者a不是b的原型,则返回false。
7.深入理解对象-定义属性
ECMAScript中有两种属性:数据属性、访问器属性。这两种属性用于设置属性的高级属性,例如该属性是否可以配置,是否可以读写,是否可以遍历,并且可以通过setter,getter来监听数据的改变。

  • 数据属性特性

数据属性 例如name属性

包含一个属性值的位置,这个位置可以读取和写入值。数据属性特性如下

​ [[Configurable]]

​ 表示是否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性(属性直接定 义在对象中,默认为true)。 当为false时,不能重新定义不能使用delete删除。

​ [[Enumerable]]

​ 表示能否通过for-in循环返回属性。(属性直接定义在对象中,默认为true)

​ [[Writable]]

​ 表示能否修改属性的值。(属性直接定义在对象中,默认为true)

​ [[Value]]

​ 包含这个属性的数据值 name:jacky
Object.defineProperty
语法

Object.defineProperty(obj, prop, descriptor)

参数说明:

  1. obj:必需。目标对象
  2. prop:必需。需定义或修改的属性的名字
  3. descriptor:必需。目标属性所拥有的特性
    返回值:
    传入函数的对象。即第一个参数obj;
Object.defineProperty(obj,'name',{
   configurable:true,
   enumerable:true,
   writable:true,
   value:'terry'
})
console.log(obj.name); 
Object.defineProperty(obj,"name",{enumerable:false})
obj.propertyIsEnumerable("name");//false

Object.defineProperties()
语法:

Object.defineProperties(obj, props)

参数说明:

  1. obj:必需。目标对象
  2. props:该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置
    返回值:
    传入函数的对象。即第一个参数obj;
var obj = new Object();
Object.defineProperties(obj, {
    name: {
        value: 'zhangsan',
        configurable: false,
        writable: true,
        enumerable: true
    },
    age: {
        value: 18,
        configurable: true
    }
})
console.log(obj.name, obj.age) // zhangsan, 18

读取属性的特性
Object.getOwnPropertyDescriptor()
该方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)

语法: Object.getOwnPropertyDescriptor(obj, prop)

obj: 需要查找的目标对象
prop: 目标对象内属性名称

var person = {
    name: '张三',
    age: 18
}

var desc = Object.getOwnPropertyDescriptor(person, 'name'); 
console.log(desc)  结果如下
// {
//     configurable: true,
//     enumerable: true,
//     writable: true,
//     value: "张三"
// }

访问器属性特性
访问器属性:这个属性不包含数据值,包含的是一对get和set方法,在读写访问器属性时,就是通过这两个方法来进行操作处理的。

访问器属性包含的四个特性:

[[Configurable]]

​ 表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性, 默认为false

[[Enumerable]]

​ 表示能否通过for-in循环返回属性,默认为false

[[Get]]

​ 在读取属性时调用的函数,默认值为undefined

[[Set]]

​ 在写入属性时调用的函数,默认值为undefined

​ 这里要注意下,访问器属性不能直接定义,要通过Object.defineProperty()这个方法来定义。

var book = {
  _year: 2020, //下划线表示是内部属性,只能通过对象的方法来读写
  editor: 1
};
Object.defineProperty(book, 'year', {
  get: function () {
    return this._year;
  },
  // 若只指定get方法,不指定set方法,那就默认该属性是只读的
  set: function (newYear) {
    if (newYear !== this._year) {
      this._year = newYear
      this.editor ++
    }
  }
});

8.对象序列化
对象序列化是指将对象的状态转换为字符串,也可以反序列化,将字符串还原为对象函数。
RegExp,Error对象,undefined值不能序列化和反序列化。
JSON.stringify(obj) 将对象序列化为JSON字符串,只能序列化对象可枚举的自有属性
JSON.parse(jsonStr) 反序列化

// 将对象转换为JSON字符串
// {"name":"briup","age":12}
var obj = {
	name:"briup",
	age:12
};
console.log(obj);  //object类型打印的结果  {name:'briup',age:12}
// 将对象转换为JSON字符串
var json = JSON.stringify(obj);
console.log(json);//string类型的字符串
// 将JSON字符串转换为对象
var obj = JSON.parse(json);
console.log(obj);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值