zoukankan      html  css  js  c++  java
  • 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,指向当前对象的原型对象。
     
     
  • 相关阅读:
    @终极解密输入网址按回车到底发生了什么
    jgitflow-maven-plugin报错:The authenticity of host can't be established.
    java log4j2日志行号不显示问题
    Prometheus监控之grafana常用模板编号记录
    DM数据守护
    使用IntelliJ IDEA 配置Maven(入门)
    IntelliJ IDEA lombok插件的安装和使用
    idea svn连接https报错问题: E230001: Server SSL certificate verification failed: certificate issued
    SVN安装后,右键不显示SVN菜单项
    IntelliJ IDEA怎么配置svn,集成svn方法
  • 原文地址:https://www.cnblogs.com/rickdiculous/p/13193601.html
Copyright © 2011-2022 走看看