前端JavaScript学习笔记之对象

前端JavaScript学习笔记之对象

1、对象

无序属性的集合，其属性可以包含基本值，对象，或者函数。可以将对象想象成散列表:键值对，其中值可以是数据或者函数。ECMAScript中的对象其实就是一组数据(属性)和功能(方法)的集合。

2、对象的创建

对象的初始化有两种方式，构造函数模式和字面量模式。

字面量模式

对象使用“{}”作为对象的边界，对象是由多个属性组成，属性与属性之间通过“,”隔开，属性名与属性值通过“:”隔开；属性名一般不添加引号（当属性名中出现特殊字符的时候需要添加引号），属性值如果是字符串的时候一定要添加引号。

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

构造函数模式

使用Object或者使用自定义构造函数来初始化对象

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

2、对象的访问

1、属性访问

属性访问方式有两种：点访问，中括号访问

点访问：是后面直接跟的是对象的属性，如果属性存在就可以访问到，如果不存在就返回undefined。

中括号访问：中括号里放的就是变量，要用添加单引号，中括号可以将该变量进行解析。

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

2、方法访问

方法的访问主要是为了执行该对象中的方法，需要按照函数的调用方式去使用。

//以下执行结果不一样
obj.sayName;
obj.sayName();//方法的使用

3、遍历对象中的属性

用for…in遍历数组或者对象的属性

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

obj对象：依次从obj中获取到属性名

“自定义变量名key”用来指定是数组的元素索引，也可以是对象的属性

//循环对象属性：
var obj = {
  name:"zhangsan",
  age:12,
  salary:10000
};
/*
两种方式访问属性：
objectName.propertyName
或者
objectName["propertyName"]
*/
console.log(obj.name);
console.log(obj["age"]);
console.log(obj.salary);
for(var key in obj){
  console.log(key+"--"+obj[key]);
}

3、新增删除对象中的属性

新增属性

obj.newpropname=”value”

删除属性

delete obj.pro
delete obj[“proname”]
delete obj.sayName     //从obj对象中删除sayName属性

4、Object显示类型转换

强制类型转换：

Boolean(value)

​ 把给定的值转换为Boolean型；

String(value)

​ 把给定的值转换为字符串

Number(value)

​ 把给定的值转换为数字（也可以是整数或浮点数）

Object类型转Boolean类型

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

数据类型	转换为true的值	转换为false的值
Boolean	true	false
String	任何非空的字符串	“”(空字符串)
Number	任何非零数字(包括无穷大)	0和NaN
Object	任何对象	null
Undefined	无	undefined

Object类型转换为String类型

转换规则：

1、先调用toString()方法

2、判断该方法的返回值是否为基础数据类型（Number、String、Boolean、Undefined、Null）

3、若返回值为基础数据类型，则转换规则按照相应数据类型的转换规则对其进行转换

4、若返回值不为基础数据类型，则在该返回值的基础上继续调用valueOf()方法

5、再判断valueOf的返回值是否为基础数据类型

6、判断是否为基础数据类型 ，若是基础数据类型则进行操作3

7、若依旧不为基础数据类型则报错

Object类型转换为Number类型

var obj = {
  name:"zhansan",
  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、Object原型属性及方法

在Object的构造函数的原型对象中的属性和方法都可以被Object构造函数的实例所继承。

Object原型中的所具有的任何属性和方法也同样存在于其他对象中，任何对象继承自Object。

总的来说：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，实例都包含一个指向原型对象的内部指针。

Object原型中常用的方法：

constructor

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

hasOwnProperty(propertyName)

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

propertyIsEnumerable(propertyName)

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

valueOf()

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

toLocaleString()

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

toString()

​ 返回对象的字符串表示

isPrototypeOf(object)

​ 检查传入的对象的原型

// 使用构造函数创建实例对象
var obj = new Object()

// 调用原型对象中继承的方法
console.log(obj.toString());
console.log(obj.__proto__.toString());

// 构造函数 Object
console.log(Object);  //[Function: Object]
// 原型对象 Object.prototype
console.log(Object.prototype);  // {}
// 原型对象中的constructor属性  原型对象中的constructor属性指向构造函数
console.log(Object.prototype.constructor);  //[Function: Object]
// 实例__proto__ 指向 原型对象
console.log(obj.__proto__ === Object.prototype);  //true

// 创建Date对象
var now = new Date();
console.log(now);
// 使用原型对象中的方法
console.log(now.toString());//Mon Aug 23 2021 23:22:35 GMT+0800 (GMT+08:00) (中国标准时间)
console.log(now.toLocaleString());//2021-8-23 23:22:35

6、深入理解对象-定义属性

ECMAScript总有两种属性：数据属性、访问器属性。这两种属性用于设置属性的高级属性，例如该属性是否可以配置，是否可以读写，是否可以遍历，并且可以通过setter，getter来监听数据的改变。

数据属性特性

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

Configurable

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

Enumerable

表示能否通过for-in循环返回属性（属性直接定义在对象中，默认为true）

Writable

表示能否修改属性的值（属性直接定义在对象中，默认为true）

Value

包含这个属性的数据值，要修改属性的默认的特性，必须要使用ECMAScript5的

Object.defineProperty(属性所在的对象，属性的名字，一个描述符对象)方法

访问器属性特性

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

Configurable

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

Enumerable

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

Get

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

Set

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

/** 
 * 访问器属性：访问器属性不包含数值，它包含的是一对getter和setter函数；
 * 访问器属性不能像数据属性一样直接定义，它必须使用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 ++
    }
  }
});
// 测试访问属性中的get，set方法
console.log('未修改的year:' + book.year);
book.year = 2021;
console.log('修改后的year:' + book.year);
console.log('修改year后的editor:' + book.editor);
// 问器属性可以通过Object.getOwnPropertyDescriptor()查询
console.log(Object.getOwnPropertyDescriptor(book, '_year'));

7、对象序列化

对象序列化是指对象的状态转换为字符串，也可以反序列化，将字符串还原为对象函数。

RegExp、Error对象、undefined值不能序列化和反序列化

JSON.stringify(obj)将对象序列化的JSON字符串，只能序列化对象可枚举的自有属性

JSON.parse(jsonStr)反序列化

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