Object Creation and Display Transformation

目录

 A single object to create

对象的访问

遍历对象

 删除对象属性

 显示类型转换

检测属性

Object原型属性及方法（原型方法,实例可以调用的方法）

深入理解对象-定义属性

对象序列化

 A single object to create
1. 字面量 var obj={}
2. 构造函数  var obj=new Object()

对象的访问
1. 点访问  obj.name
2. 中括号访问 obj['age']

遍历对象

for(var key in obj){
key----键 属性名
obj[key]-----值 属性值
}

 删除对象属性
delete obj.name

 显示类型转换

•  Object类型到Boolean类型

In addition to the empty quotes（null）会转换为false,Other are converted intotrue

var obj = null
console.log(Boolean(obj));  //false
var obj = {}
console.log(Boolean(obj));  //true
var obj2 = { name: 'lisi' }
console.log(Boolean(obj2));  //true

• Object类型转String类型

var obj = {
  name:'lisi',
  age: 18,
  // 重写toString方法
  toString:function () {
    return this.name + '-' + this.age
  }
}
console.log(String(obj), obj.toString());  //lisi-18 lisi-18

转换规则：

显示转换与隐式转换规则类似,当要将对象转换为String时,类似隐式转换中的PreferredType为String

1.先调用对象的toString方法

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

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

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

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

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

7.若仍旧不为基础数据类型则报错

• Object类型转Number类型

var obj = {
  name: 'lisi',
  age: 18,
  // 重写toString方法
  toString: function () {
    return '100'
  },
  // 重写valueOf方法
  valueOf: function () {
    return 10
  }
}
console.log(obj.valueOf()); //10

1. 如果只重写了valueO()或者toString()方法,则调用该方法,并将返回值用Number（）转换;

2. If the two methods are rewritten,则调用valueOf(),And will return values withNumber()转换;

3. 如果两个方法都没有重写,则返回NaN.

转换规则：

显示转换与隐式转换规则类似,当要将对象转换为Number时,类似隐式转换中的PreferredType为Number

1.先调用对象的valueOf方法

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

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

4.若返回值不为基础数据类型,则在该返回值的基础上继续调用toString方法

5.判断toString的返回值是否为基础数据类型

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

7.若仍旧不为基础数据类型则报错

检测属性

检测一个属性是否属于某个对象.

in

Test whether a property is an object of自有属性或者继承属性

var obj = {
  name: 'zhangsan',
  age: 20,
  height: 1.78
}
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()

Test whether a given property is object自有属性,对于Inherited property returnsfalse

var obj = {
  name: 'zhangsan',
  age: 18,
  height: 1.78
}
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.propertylsEnumerable()

propertylsEnumerable()是hasOwnProperty()的增强版,除了是自身属性外,More realistic可枚举（可删除的属性）属性,Which we create properties of.

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

Object原型属性及方法（原型方法,实例可以调用的方法）

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

ObjectHave any properties and methods of prototype also exists in other objects,任何对象继承自Object.

 总结：每个构造函数都有一个原型对象（prototype),原型对象都包含一个指向构造函数的指针(constructor),实例都包含一个指向原型对象的内部指针（__proto__）.

Object原型中常用的方法

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

hasOwnProperty(propertyName)：检查给定的属性名是否是对象的自有属性

propertyIsEnumerable(propertyName)：检查给定的属性在当前对象实例中是否存在

valueOf()：返回对象的字符串,数值,布尔值的表示

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

toString()：返回对象的字符串表示

isPrototypeOf(object)：检查传入的对象的原型

a.isPrototypeOf(b) 如果a是b的原型,则返回true.如果b不是对象,或者a不是b的原型,则返回false.

// 使用构造函数创建实例对象
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());//Wed Aug 10 2022 19: 58: 37 GMT + 0800(中国标准时间)
console.log(now.toLocaleString());//2022/8/10 下午7:58:37

深入理解对象-定义属性

ECMAScript中有两种属性：数据属性、访问器属性.

• 数据属性特性（默认都是true)

configurable：设置是否可以delete

enumerable：是否可以被for in 循环遍历出来

writable：是否可以修改值

value：Set the value of this property corresponding

// 字面量和 构造函数创建对象
var person = {
    name: 'zhangsan'
}

// 使用Object.definePropertyTo define a new attribute new
Object.defineProperty(person, 'age', {
    // 设置是否可以delete
    configurable: false,
    // 是否可以被for in 循环遍历出来
    enumerable: false,
    // 是否可以修改值
    writable: false,
    // Set the value of this property corresponding
    value: 20
})
delete person.age;
console.log(person.age);
for (var key in person) {
    console.log(key);  //20 name
}

person.age = 30
console.log(person.age);//20

//Object.defineProperties()一次性定义多个属性
Object.defineProperties(person, {
    height: {
        configurable: false,
        value: 1.80
    },

    gender: {
        value: '男'
    }
})

console.log(person.gender);  //男

• 读取属性的特性

Object.getOwnPropertyDescriptor()：返回指定对象上一个自有属性对应的属性描述符.

var person = {
    name: 'zhangsan'
}
// 读取对象的属性 Object.getOwnPropertyDescriptor()
console.log(Object.getOwnPropertyDescriptor(person, 'name')); 
// 结果
 //{
//     value: 'zhangsan',
//         writable: true,
//             enumerable: true,
//                 configurable: true
// }
//Read all of the attributes object getOwnPropertyDescriptors()
console.log(Object.getOwnPropertyDescriptors(person));
// 结果
// {
//     name: {
//         value: 'zhangsan',
//             writable: true,
//                 enumerable: true,
//                     configurable: true
//     }
// }

• 访问器属性特性

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

configurable：设置是否可以delete,默认false.

enumerable：是否可以被for in 循环遍历出来,默认false.

get:在读取属性时调用的函数,默认false.

set:在写入属性时调用的函数,默认undefined.

// 创建一个对象
var person = {
    // 内部属性
    _birthday: 2000,
    age: 1
}
// A new visitor properties
Object.defineProperty(person, 'birthday', {
    get: function () {
        // return 10
        return this._birthday
    },
    set: function (newValue) {
        if (newValue !== this._birthday) {
            this._birthday = newValue;
            this.age++;
        }
    }
})
// person.birthday get操作 Through some syntax for an attribute's value
person.birthday = 2006;
console.log(person.age);  //2
console.log(person.birthday); //2006

对象序列化

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

// 对象的序列化 和反序列化
// 对象转为JSON字符串
var jsonStr = JSON.stringify(person);
console.log(jsonStr, typeof jsonStr);  //{"name":"zhangsan"} string
// JSON字符串转对象
console.log(JSON.parse(jsonStr));  //{ name: 'zhangsan' }