JS——对象(学习笔记)

1:认识对象

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

 2:创建对象

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

 2.1:字面量模式

   // 对象:属性+方法
        // 利用对象字面量创建对象
        var obj = {}; //创建空对象
        var obj = {
            name: '张三疯',
            age: 18,
            sex: '男',
            sayHi: function () {
                console.log('hi~');
            }
        }
        console.log(obj.age);
           obj.sayHi();
        //里面的属性或者方法我们采用键值对的形式 
        // (2)多个属性或者方法用逗号隔开
        // (3)方法冒号后面跟的是一个匿名函数
        // 2适用对象
        // (1) 调用对象的属性 我们采取 对象名.属性名
        //调用对象的方法  对象名.方法

 2.2:构造函数模式

//1利用 new Object 创建对象   利用等号赋值方法 用分号隔开
        var obj = new Object();
        obj.name = '薛之谦';
        obj.age = 35;
        obj.sex = '男';
        obj.sayHi = function () {
            console.log('Hi~');
        }
        console.log(obj.name);
        obj.sayHi();
   //2 利用构造函数穿创建对象    构造函数名字首字母大写
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;

            this.sing = function (sang) {
                console.log(sang);
            }

        }
        var one = new Star('薛之谦', 35, '男');
        console.log(one);
        console.log(one.age);
        one.sing('演员');
        var tow = new Star('林俊杰', 35, '男');
        console.log(tow);
        console.log(tow.name);

 new关键字执行过程

        1 new构造函数还可以在内存中穿捡了一个空对象

        2  this 就会指向刚才创建的空对象

        3  执行构造函数里面的代码  给这个对象添加属性和方法

        4  返回这个对象

 3:对象的访问

  • 属性访问

  • 属性访问方式也有两种,点访问、中括号访问

  • 点后面直接跟的是对象的属性,如果属性存在可以访问到,如果属性不存在,得到undefined。 中括号 中 放的是变量,中括号可以将该变量进行解析。

   // 属性访问方式也有两种,点访问、中括号访问
        var obj = new Object();
        obj.name = "terry";
        obj.age = 12;
        obj.sayName = function () {
            console.log("my name is", this.name);
        }
        console.log(obj.name); //'terry'
        console.log(obj['name']); //'terry'
        console.log(name = "age");
        console.log(obj['name']); //age

4:遍历对象

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

    //遍历对象   for in
        var obj = {
            name: 'lili',
            age: 18,
            sex: '女',
        }

        console.log(obj.age);

        // for(  变量 in 对象)   变量 喜欢写k 或者key
        for (var k in obj) {
            console.log(k); //k变量 输出  得到的是 属性名
            console.log(obj[k]); //obj[k]  得到的是里面的属性值
        }

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

       var obj = {
            name: '张三疯',
            age: 18,
            sex: '男',
        }
        //删除对象属性name
        delete obj.name
        console.log(obj);
        //新增对象属性myname
        obj.myname = 'liyifeng'
        console.log(obj);

6:Object类型转换

6.1:Object类型到Boolean类型

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

 6.2:Object类型转String类型

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

 6.3:Object类型转Number类型

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

7:检测属性

 7.1:in检测某属性是否是某对象的自有属性或者是继承属性

 // 检测一个属性是否属于某个对象。常用的方式主要有3种:
        // 1: in检测某属性是否是某对象的自有属性或者是继承属性
        var obj = {
            name: 'zhangsan',
            age: 18,
            school: '卡塞尔学院'
        }
        //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属性。

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

 var obj = {
            name: 'zhangsan',
            age: 18,
            school: '卡塞尔学院'
        }
        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

 7.3:Object.prototype.propertyIsEnumerable()

  // propertyIsEnumerable()是hasOwnProperty()的增强版,除了是自身属性外,还要求是可枚举属性,即我们创建的属性。
        var obj = {
            name: 'zhangsan',
            age: 18,
            school: '卡塞尔学院'
        }
        console.log(obj.propertyIsEnumerable('name')); //true
        console.log(obj.propertyIsEnumerable('age')); //true
        console.log(obj.propertyIsEnumerable('toString')); //false,不可枚举
        console.log(obj.propertyIsEnumerable('gender')); //false

 8:Object原型属性及方法

  • 1: object构造函数 prototype 每一个构造函数中都有一个原型属性指向它的原型对象 可以通过Object.prototype找到它的原型对象
  • 2:Object.prototype原型对象 constructor  每一个原型对象中都已一个constructor属性指向它的构造函数Object.prototype.constructor
  • 3:实例obj  实例是通过new Object() 或{}字面量 创建出来的
  • 4:实例都有一个属性叫做_proto_指向原型对象
  • 5:obj中没有任何属性和方法  它可以继承原型对象中的属性和方法
  • 6:构造函数也可以创建多个实例  每个实例可以拥有自己的属性
  • 7:每个实例自己的属性叫做自有属性   继承过来的属性叫做继承属性
 // 使用构造函数创建实例对象
        var obj = new Object()
        // 构造函数 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

9:定义属性

 

[[Configurable]]

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

[[Enumerable]]

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

[[Writable]]

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

[[Value]]

包含这个属性的数据值 name:jacky

 9.1:Object.defineProperty(obj, prop, descriptor)

 

// 要修改属性默认的特性, 必须使用ECMAScript5的

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

        // 1:`Object.defineProperty`定义新属性或修改原有的属性。

        // Object.defineProperty(obj, prop, descriptor)

        // 1. obj:必需。目标对象

        // 2. prop:必需。需定义或修改的属性的名字

        // 3. descriptor:必需。目标属性所拥有的特性

  Object.defineProperty(obj, 'name', {
            configurable: true, //表示是否通过delete删除属性从而重新定义属性, 能否修改属性的特性, 或者能否把属性修改为访问器属性(属性直接定义在对象中, 默认为true)。 当为false时, 不能重新定义不能使用delete删除。
            enumerable: true, // ​ 表示能否通过for - in循环返回属性。
            writable: true, // ​ 表示能否修改属性的值。
            value: 'terry' // ​ 包含这个属性的数据值

        })
        console.log(obj.name);
        Object.defineProperty(obj, "name", {
            enumerable: false
        })
        obj.propertyIsEnumerable("name"); //false

 9.2:Object.defineProperties(obj, props)

 1. obj: 必需。 目标对象

 2. props: 该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置

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

 9.3:Object.getOwnPropertyDescriptor()

  1.  该方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)
  2.   语法: Object.getOwnPropertyDescriptor(obj, prop)
  3.    obj: ** 需要查找的目标对象 **
  4.     prop: ** 目标对象内属性名称
  var person = {
            name: '张三',
            age: 18
        }

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

 9.4:Object. getOwnPropertyDescriptors()

 所指定对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。

 语法: Object.getOwnPropertyDescriptors(obj)

 **obj:** 需要查找的目标对象

  var person = {
            name: '张三',
            age: 18
        }
        var desc = Object.getOwnPropertyDescriptors(person);
        console.log(desc)
        //{
        //    configurable: true,
        //    enumerable: true,
        //    value: '张三',
        //    writable: true
        //}

 10:访问器属性特性

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

[[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); //未修改的year:2020


        book.year = 2021;
        console.log('修改后的year:' + book.year); //修改后的year: 2021

        console.log('修改year后的editor:' + book.editor); //修改year后的editor: 2

        // 问器属性可以通过Object.getOwnPropertyDescriptor()查询
        console.log(Object.getOwnPropertyDescriptor(book,
        '_year')); //{value: 2021, writable: true, enumerable: true, configurable: true}

 11:对象序列化

  1. 对象序列化是指将对象的状态转换为字符串,也可以反序列化,将字符串还原为对象函数。
  2. RegExp,Error对象,undefined值不能序列化和反序列化。
  3. JSON.stringify(obj) 将对象序列化为JSON字符串,只能序列化对象可枚举的自有属性
  4. JSON.parse(jsonStr) 反序列化
// 将对象转换为JSON字符串
// {"name":"lili","age":12}
var obj = {
	name:"briup",
	age:12
};
console.log(obj);  //object类型打印的结果  {name:'lili',age:12}
// 将对象转换为JSON字符串
var json = JSON.stringify(obj);
console.log(json);//string类型的字符串
// 将JSON字符串转换为对象
var obj = JSON.parse(json);
console.log(obj);

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值