ES6对象扩展——部分新的方法和属性

1、Object.is方法返回布尔值,和全等于===差不多,除了参数是+0和-0,以及NaN时

            //Object.is,返回布尔值,和全等于===差不多,除了+0和-0,以及NaN
            console.log(Object.is(+0,-0));    //false
            console.log(+0 === -0);           //true
            console.log(Object.is(NaN,NaN));  //true
            console.log(NaN === NaN);         //false
            
            console.log(Object.is(true,false));  //false
            console.log(Object.is(true,true));   //true
            

 

2、Object.assign方法返回一个对象,在复制或者合并一个对象时很常用到。

该方法用起来和扩展运算符很相似,属性名相同时,后面的会覆盖前面的。并且也是浅拷贝。

assgin(a,b)是将b对象中所有可枚举属性的值复制到目标对象a, 如果存在相同的属性,就将b对象中属性对应的值替换a对象的属性值。
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
语法:Object.assign(target, ...sources)
参数:
target:目标对象。
sources:源对象。
返回值:目标对象。

            //Object.assign,在复制或者合并一个对象时很常用到
            const obj = Object.assign({a:1},{b:2},{c:3},{d:4,e:5})
            console.log(obj);  //{a:1,b:2,c:3,d:4,e:5}
            //用起来跟扩展运算符很相似,属性名相同时,后面的会覆盖前面的。并且也是浅拷贝
            const obj11 = {
                a:1,
                b:{
                    c:2
                }
            };
            let newObj1 = Object.assign({a:3},obj11);  //{a:1,b:2,c:3,d:4,e:5}
            console.log(newObj1.b.c);  //2
            newObj1.b.c = 100;
            console.log(obj11.b.c);  //100
            

 

 

3、Object.keys返回自身可枚举属性的所有key所组成的数组

Object.values返回自身可枚举属性的所有value所组成的数组

Object.entries返回每一对可枚举的key value所组成数组的数组

            //Object.keys Object.values Object.entries
            
            const obj22 = {
                a:1,
                b:2,
                c:3,
                d:4
            }
            //Object.keys返回自身可枚举属性的所有key所组成的数组
            console.log(Object.keys(obj22));  //["a","b","c","d"]
            
            //Object.values返回自身可枚举属性的所有value所组成的数组
            console.log(Object.values(obj22)); //[1,2,3,4]
            
            //Object.entries返回每一对可枚举的key value所组成数组的数组
            console.log(Object.entries(obj22)); //[Array(2),Array(2),Array(2),Array(2)]
            

 

三个方法返回的都是自身可枚举的属性,也就是说使用for-of进行遍历的时候不需要像for-in一样使用hasOwnProperty()去判断是不是自身的,而不是原型上的属性

      //代码接上

            //三个方法返回的都是自身可枚举的属性,也就是说使用for-of进行遍历的时候不需要像for-in一样使用hasOwnProperty()去判断是不是自身的,而不是原型上的属性
            for (let key of Object.keys(obj22)){
                console.log(key);  //打印结果是四行,分别是a b c d
            }
            
            for(let [k,v] of Object.entries(obj22)){
                console.log(k,v);  //打印结果是四行,分别是a 1,b 2,c 3,d 4
            }
       

 

 

4、__proto__属性这个属性代表当前对象的原型

            //__proto__这个属性代表当前对象的原型
            //该属性位于在es6标准的附录中,在实际编码的时候尽量不要用到,调试编码的时候看看就好
            const obj = {
                a:1
            }
            console.log(obj.__proto__); //Object
            

 

5、Object.setPrototypeOf(要修改原型的对象,新原型 )方法可以用来修改一个对象的原型。
但是性能有些低下,建议不要使用。setPrototypeOf()方法性能低的原因是:设置原型可能会降低有权访问其原型已发生改变的所有 JavaScript 代码的性能。建议使用OBject.create()。
setPrototypeOf() 

作用:Object.setPrototypeOf() 方法是设置一个指定的对象的原型到另一个对象

用法:Object.setPrototypeOf(obj, prototype)
第一个参数是要设置其原型的对象;第二个参数是要作为新的原型的对象
            //Object.setPrototypeOf(要修改原型的对象,新原型 )方法可以用来修改一个对象的原型
            const obj1 = {
                a:1
            };
            const obj2 = {
                b:1
            }
            const obj = Object.create(obj1);  //create方法是创建一个对象的时候指定它的原型
            console.log(obj.__proto__);  //{a:1}
            Object.setPrototypeOf(obj,obj2); //这个方法性能有点低下,建议不要使用
            console.log(obj.__proto__);  //{b:1}
            

 

6、Object.getPrototypeOf(对象名)方法读取对象的原型(跟__proto__相比起来,更推荐使用getPrototypeOf)

            //Object.getPrototypeOf方法读取对象的原型
            const obj1 = {a:1};
            const obj = Object.create(obj1);
            
            console.log(obj.__proto__);  //{a:1}
            console.log(Object.getPrototypeOf(obj));  //{a:1}
            console.log(obj.__proto__ === Object.getPrototypeOf(obj));  //true
            

PS:推荐使用Object.create和getPrototypeO方法去操作对象的原型


7、super关键字,它可以访问到原型对象上的属性和方法(但是只有在使用简洁表示法的的时候才生效)
作用:是访问到对象的原型;可以访问和调用一个对象的父对象上的函数;
 
            //super关键字,它可以访问到原型对象上的属性和方法
            //要注意的是,对象只有使用简洁表示法的时候super关键字才能访问原型属性
            const obj = {name:'xiaoming'};
            const cObj = {
                //如果写成say:function(){}或者箭头函数say:()=>{}是不能使用super的,会报错
                say(){
                    console.log(`My name is ${super.name}`);
                }
            }
            Object.setPrototypeOf(cObj,obj);
            cObj.say();
            

 

this关键字是指向函数所在的当前对象,

ES6 又新增了另一个类似的关键字super,指向当前对象的原型对象。
 
 
posted @ 2020-06-26 00:30  是桂  阅读(223)  评论(0编辑  收藏  举报