JavaScript高级

qianmingmaoyao

已于 2022-11-09 22:15:57 修改

阅读量61

点赞数

文章标签： typescript javascript 前端

于 2022-09-04 23:50:13 首次发布

本文链接：https://blog.csdn.net/qianmingmaoyao/article/details/126695780

版权

01-创建对象

       // 1.字面量
        var obj1 = {
            name: 'momoko',
            age: 18,
            sayHi: function() {
                console.log('您好');
            }
        };
        // 2.使用Object构造函数
        var obj2 = new Object();
        // 添加属性
        obj2.name = 'wzy';
        obj2.sayHi = function() {
            console.log('您好');
        };
        // 3.自定义构造函数创建属性
        // 首字母大写
        function Person(name, age) {
            this.name = name;
            // this:指代实例化对象
            this.age = age;
            this.sayHi = function() {
                console.log('您好');
            }
        };
        // 实例化对象
        var p1 = new Person('z1', 18);
        var p1 = new Person('z2', 20);

02-遍历对象for..in方法

     var obj = {
            name: '张美丽',
            age: 18,
            sex: '女',
            sayHi: function() {
                console.log('您好');
            }
        };
        console.log(obj);
        // 1.for...in
        for (var key in obj) {
            console.log(key);
            console.log(obj[key]);
        };

03-Object.keys()方法

 var obj = {
            name: '张美丽',
            age: 18,
            sex: '女',
            sayHi: function() {
                console.log('您好');
            }
        };
        console.log(obj);
        // 该方法会返回一个由一个给定对象的自身(可枚举)属性组成的数组
        var keyArr = Object.keys(obj);
        console.log(keyArr);
        for (var i = 0; i < keyArr.length; i++) {
            // 对象的键key
            console.log(keyArr[i]);
            // 对象的value
            console.log(obj[keyArr[i]]);
        }

04-Object.getOwnPropertyNames()方法

 var obj = {
            name: '张美丽',
            age: 18,
            sex: '女',
            sayHi: function() {
                console.log('您好');
            }
        };
        console.log(obj);
        // 该方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性）组成的数组。
        var keyArr = Object.getOwnPropertyNames(obj);
        console.log(keyArr);
        for (var i = 0; i < keyArr.length; i++) {
            // 对象的键key
            console.log(keyArr[i]);
            // 对象的value
            console.log(obj[keyArr[i]]);
        }

05-判断对象的属性是否存在

        var obj = {
            name: '张美丽',
            age: 18,
            sex: false,
            sayHi: function() {
                console.log('您好');
            }
        };
        console.log(obj);
        // if (obj.sex) {
        //     console.log('存在');
        // } else {
        //     console.log('不存在');
        // };
        // 通过`in`可以判断对象是否有这个属性
        console.log('sex' in obj);
        if ('sex' in obj) {
            console.log('存在');
        } else {
            console.log('不存在');
        };

06-删除属性

    var obj = {
            name: '张美丽',
            age: 18,
            sex: false,
            sayHi: function() {
                console.log('您好');
            }
        };
        // 删除属性
        delete obj.sex;
        console.log(obj);

07-属性分类

 var obj = {
            // 数据属性
            name: '张美丽',
            // (内部属性)
            _age: 18,
            // 访问器属性
            // 访问器属性不包含值，而是定义了一个`get`和`set`函数，当读取属性时，调用`get`函数，当写属性时，调用`set`函数。
            // 访问器属性可以做拦截操作,对访问对象的操作进行监听
            get age() {
                console.log('得到年龄');
                // return '保密';
                return this._age;
            },
            set age(value) {
                console.log('设置年龄');
                this._age = value;
            }
        };
        // console.log(obj);
        // console.log(obj.age);
        // console.log(obj.name);
        obj.age = 30;
        console.log(obj);

08-属性特征

var obj = {
            name: 'momoko',
            sex: '女'
        };
        // Object.defineProperty(obj, prop, descriptor):定义属性特征
        Object.defineProperty(obj, 'age', {
            value: '18',
            // 可配置
            configurable: false,
            // 一旦创建不能进行修改
            // 可枚举
            // enumerable: true,
            // 不可枚举
            enumerable: false,
            // 可修改
            // writable: true
            // 不可修改
            writable: false

        });

        // 获取可枚举的属性名组成的数组
        console.log(Object.keys(obj));
        console.log(Object.getOwnPropertyNames(obj));
        // var arr = [1, 2, 3];
        // console.log(arr);
        obj.age = 20;
        console.log(obj);
        // 报错:configurable: false不能修改属性特征
        Object.defineProperty(obj, 'age', {
            value: '100',
            // 可配置
            configurable: true,
            // 一旦创建不能进行修改
            // 可枚举
            // enumerable: true,
            // 不可枚举
            enumerable: true,
            // 可修改
            // writable: true
            // 不可修改
            writable: true

        });

09-Object.defineProperty定义访问器属性

  var obj = {
            name: 'momoko',
            sex: '女',
            _age: 18
        };
        // Object.defineProperty(obj, prop, descriptor):定义属性特征
        Object.defineProperty(obj, 'age', {
            // 可配置
            configurable: true,
            // 不可枚举
            enumerable: false,
            // 如果是访问器属性,不设置writable特性
            // writable: true,
            get: function() {
                if (this._age > 18) {
                    return this._age;
                } else {
                    return '保密'
                }
            },
            set: function(value) {
                this._age = value;
            }
        });
        console.log(obj);

10-定义多个属性

 var obj = {
            name: 'momoko',
            sex: '女'
        };
        // `Object.defineProperties()`，这个方法接受2个参数，第一个是属性所属的对象，第二个是包含被定义属性的对象。
        Object.defineProperties(obj, {
            age: {
                configurable: true,
                enumerable: false,
                writable: true,
                value: 18
            },
            height: {
                configurable: true,
                enumerable: true,
                writable: true,
                value: '160'
            }
        });
        console.log(obj);

11-获取属性特征

   var obj = {
            name: 'momoko',
            sex: '女'
        };
        // `Object.defineProperties()`，这个方法接受2个参数，第一个是属性所属的对象，第二个是包含被定义属性的对象。
        Object.defineProperties(obj, {
            age: {
                configurable: true,
                enumerable: false,
                writable: true,
                value: 18
            },
            height: {
                configurable: true,
                enumerable: true,
                writable: true,
                value: '160'
            },
            color: {
                value: '黄种人'
            }
        });
        console.log(obj);
        // Object.getOwnPropertyDescriptor(obj, prop),obj对象,prop对象的属性
        console.log(Object.getOwnPropertyDescriptor(obj, 'age'));
        console.log(Object.getOwnPropertyDescriptor(obj, 'name'));
        var arr = [1, 2, 3, 4];
        console.log(arr);
        console.log(Object.getOwnPropertyDescriptor(arr, 'length'));
        // 获取多个属性特征
        // Object.getOwnPropertyDescriptors(obj)
        console.log(Object.getOwnPropertyDescriptors(obj));
        console.log(Object.getOwnPropertyDescriptors(arr));

12-总结

  // 1.创建对象,访问对象.[]
        // 2.遍历对象 for..in  Object.keys() Object.getOwnPropertyName()
        var obj = {
            name: 'momoko',
            sex: '女'
        };
        // `Object.defineProperties()`，这个方法接受2个参数，第一个是属性所属的对象，第二个是包含被定义属性的对象。
        Object.defineProperties(obj, {
            age: {
                configurable: true,
                enumerable: false,
                writable: true,
                value: 18
            },
            height: {
                configurable: true,
                enumerable: true,
                writable: true,
                value: '160'
            }
        });
        // 3.in判断属性是否存在  delete删除属性
        // 4.属性分类 数据属性 和访问器属性
        // 5.属性特征: configurable ,enumerable,writable
        // 6.获取属性特征