JS高阶—day01

1. 理解Object

1.1 创建对象

实例化Object对象的方式有两种：使用Object构造器和使用对象的字面量。例如：

<script>
        // 1字面量
        var obj={
            name:"小好",
            age:18,
            sex:"男"
        }
        console.log(obj);//{name: '小好', age: 18, sex: '男'}

        // 2利用Object构造函数
        var obj2=new Object();
        obj2.name="老六";
        obj2.age = 18;
        obj2.sex = "女";//相等  obj2['sex']='女'
        console.log(obj2);//{name: '老六', age: 18, sex: '女'}

        // 3利用自定义构造函数
        function Person(name,age,sex){
            this.name=name;
            this.age=age;
            this.sex=sex;
        }
        var obj3=new Person("希林娜依·高",18,"男");
        console.log(obj3);//Person {name: '希林娜依·高', age: 18, sex: '男'}


        // 遍历对象
        for(var key in obj3){
            console.log(key);//name age sex
             console.log(obj3[key]);//打印出值
        }
    </script>

1.2 定义属性

我们可以随时随地为对象添加属性，也可以随时修改属性的值。

var person1 = {
    name: '小好'
};
//给对象添加属性
person1.age = 23;
​
//修改属性的值
person1.name = '张小好';
console.log(person1.name);     

1.3 属性枚举

1.3.1 Object.keys(obj)

该方法会返回一个由一个给定对象的自身可枚举属性组成的数组

Object.keys(obj)
参数：给定对象
返回值：一个表示给定对象的所有可枚举属性的字符串数组。

 <script>
        function Fun(name,age,sex){
            this.name=name;
            this.age=age;
            this.sex=sex;

        }
        var obj=new Fun("李莉",18,"女");
        console.log(obj);
        // Object.keys(obj)方法:将一个给定对象自身的可枚举的属性添加到一个数组里面进行访问
        var rel=Object.keys(obj);
        console.log(rel);//(3) ['name', 'age', 'sex']
     </script>

1.3.2 Object.getOwnPropertyNames(obj)方法

该方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。

Object.getOwnPropertyNames(obj)
参数：给定对象。
返回值：在给定对象上找到的自身属性对应的字符串数组。

<script>


        // 3.利用自定义构造函数
        function Person(name, age, gender) {
            // this  - 实例化对象
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.say = function () {
                console.log("yer night rain");
            };
        }
        var obj3 = new Person("张三", 19, "男");
        
        // Object.getOwnPropertyNames(obj)方法
        // 该方法返回一个由指定对象的所有自身属性的属性名组成的数组。
        var rel = Object.getOwnPropertyNames(obj3);
        console.log(rel);
    </script>

1.4 检查属性是否存在(in 返回值为布尔值)

 <script>

        // 3.利用自定义构造函数
        function Person(name, age, gender) {
            // this  - 实例化对象
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.say = function () {
                console.log("yer night rain");
            };
        }
        var obj3 = new Person("张三", 19, "男");

        console.log(obj3);

        // if (obj3.name) {
        //     console.log("存在");
        // } else {
        //     console.log('不存在');
        // }

        // in 在 。。。里面
        console.log('name' in obj3);
        console.log('age' in obj3);
        console.log('gender' in obj3);

        var arr = [1, 2, 3, 5, 6, 67];
        console.log(2 in arr);
    </script>

1.5 删除属性(delete  对象.属性)

<script>
        // 3.利用自定义构造函数
        function Person(name, age, gender) {
            // this  - 实例化对象
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.say = function () {
                console.log("yer night rain");
            };
        }
        var obj3 = new Person("张三", 19, "男");

        obj3.name = null;

        // 需要通过 delete 这个关键字删除对象的属性
        delete obj3.name
        console.log(obj3);

    </script>

1.6 对象的属性

1.6.1 数据属性:(用来存放一个值或是一组数据)

1.6.2 访问器属性:( 不包含值，而是定义了一个get函数和set函数 当读取属性时 get会调用 设置属性时 set会调用)

var obj = {
            // 数据属性
            name: '张三',
            age: 17,

            // 访问器属性
            get getName() {
                console.log("属性被访问了");
                if (this.age >= 18) {
                    return this.name
                } else {
                    return null;
                }
            },
            set setName(value) {
                console.log("属性被修改了");
                if (this.age >= 18) {
                    this.name = value;
                } else {
                    alert("您当前没有权限~")
                }
            }
        }

        // 访问属性
        console.log(obj.getName);
        // 设置属性
        obj.setName = "普京"
        console.log(obj);

        var obj2 = {
            name: '小好',
            age: 18
        }

1.6.3 对象属性特征

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

参数

obj : 目标所在的对象。

prop :要修改的属性

descriptor : 修改当前属性的特征

返回值:如果给定的属性存在于对象上，则返回属性描述符对象。否则返回 undefined。

 var obj = {
            name: '刘沐辰',
            age: 20,
            gender: '男'
        }
        // 用来配置对象属性的特征信息
        // Object.defineProperty(obj, prop, descriptor)
        // obj:目标对象
        // prop:要修改的属性
        // descriptor : 修改当前属性的特征
        console.log(obj);
        Object.defineProperty(obj, 'gender', {
            // configurable : 是否可被删除
            // enumerable : 是否可被枚举
            // writable : 是否可被修改
            // value :当前值
            configurable: true,
           
            enumerable: false,
          
            writable: false,
            // value: "男"
        })
        obj.gender = "女"
        delete obj.gender
        console.log(obj);

        for (var key in obj) {
            console.log(obj[key]);
        }

1.6.4 修改多个属性特征

var obj={
            name:"老六",
            age:19,
            gender:"男"
        }
        // 用来配置对象属性的特征信息
       //Object.getOwnPropertyDescriptor(obj, prop)

        Object.defineProperties(obj,{
           hobby:{
                configurable:true,
                enumerable:true,
                writable:true,
                value:"跳舞"
            },

            occupation:{
                configurable:false,
                enumerable:true,
                writable:false,
                value:"演员"
            }
        })
        
        for(var k in obj){
            console.log(obj[k]);
        }

1.6.5 获取属性特征

1.Object.getOwnPropertyDescriptor(obj, prop)

参数

obj : 目标所在的对象。

prop : 要获取特性的属性。

返回值

如果给定的属性存在于对象上，则返回属性描述符对象。否则返回 undefined。

        var obj={
            name:"老六",
            age:19,
            gender:"男"
        }

        // 用来配置对象属性的特征信息
        // Object.defineProperties(obj, prop)
        Object.defineProperties(obj,{
           hobby:{
                configurable:true,
                enumerable:true,
                writable:true,
                value:"跳舞"
            },

            occupation:{
                configurable:false,
                enumerable:true,
                writable:false,
                value:"演员"
            }
        })
        
        //Object.getOwnPropertyDescriptor(obj, prop)
       //obj: 目标所在的对象。
       //prop : 要获取特性的属性。
       //返回值: 如果给定的属性存在于对象上，则返回属性描述的符对象。否则返回 undefined。

       var rel=Object.getOwnPropertyDescriptor(obj,'hobby');
       console.log(rel);
       var rel2=Object.getOwnPropertyDescriptor(obj,"name");
       console.log(rel2);

       // Object.getOwnPropertyDescriptors(obj)
        // 返回当前对象内部所有属性的 特征 返回值是一个对象
        // obj:目标对象
       var rel3=Object.getOwnPropertyDescriptors(obj);
       console.log(rel3);

2.Object.getOwnPropertyDescriptors(obj)

参数

obj : 要获取的目标对象。

返回值

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