• ES6对象的个人总结


    属性初始值的简写:

    当一个对象的属性与本地变量同名时,不需要再写冒号和值,直接写属性名即可

    let fullName = '杨三', age = 19;
    
    let obj = {
        fullName: fullName,
        age: age
    };
    
    // 1. 当一个对象的属性与本地变量同名时,不需要再写冒号和值,直接写属性名即可。
    let obj = {
        fullName,
        age
    };

     对象方法的简写:

    // 在 ES 5 中,如果为对象添加方法,必须要通过指定名称并完整定义函数来实现。
    let obj = {
        fullName: '张三',
        sayName: function () {
            return this.fullName;
        }
    };
    
    // 在 ES 6 中,语法更简洁,取消了冒号和 function 关键字。如下所示:
    let obj = {
        fullName: '张三',
        sayName () {
            return this.fullName;
        }
    };

     可计算的属性名:

    // 在对象字面量中使用方括号表示该属性名是可计算的,方括号中的内容会被计算求值,最终转化成一个字符串,该字符串就是最终的属性名。
    let suffix = 'name';
    
    let person = {
        ['first' + suffix]: '张三',
        ['last' + suffix]: '泰坦尼'
    };
    
    console.log(person)

     新增的两个方法:

    Object.is()             Object.assgin()

     1 . 在有些情况下,即是全等运算符比较出来的结果也是不正确的。

      +0 和 -0 在 JS 解析引擎中被表示为两个完全不同的实体,而如果使用全等运算符(===)对两者进行比较,得到的结果是两者相等 。

    console.log(+0 == -0);           // true
    console.log(+0 === -0);          // true
    console.log(Object.is(+0, -0));  // false

       NaN 和 NaN 在 JS 解析引擎中被表示为两个完全相同的实体,但是无论使用等于(==)还是全等于(===),得到的结果都是 false。

    console.log(NaN == NaN);           // false
    console.log(NaN === NaN);          // false
    console.log(Object.is(NaN, NaN));  // true

      在大多数情况下,Object.is()方法的比较结果与全等运算符完全相同,唯一的区别在于 +0 和 -0 会被识别为不相等,NaN 和 NaN 会被识别为相等。

    ------------------------------------------------------------------------------------------------------------------------------

     2.  Object,assign()方法可以接收任意数量的源对象(obj2,obj3),并按照指定的顺序将属性复制到接收对象(obj1)。

    如果多个源对象具有同名属性,则排位靠后的源对象会覆盖排外靠前的对象。

    let obj1 = {
        fullName: '陈世美',
        sayName () {
            return this.fullName;
        }
    };
    
    let obj2 = {
        fullName: '武大郎',
        age: 20
    };
    
    let obj3 = {
        fullName: '武则天',
        gender: '女'
    };
    
    // 通过自定义方法实现了一个可以合并多个对象的方法,
    function mixin(receiver, ...suppliers) {
        suppliers.forEach(supplier => {
            Object.keys(supplier).forEach(key => {
                receiver[key] = supplier[key]
            })
        })
        return receiver;
    }
    console.log(mixin(obj1, obj2, obj3))
    
    // 使用 ES6 新增 Object.assgin() 方法将多个对象的属性合并到第一个对象中。
    Object.assign(obj1, obj2, obj3);
    
    console.log(obj1)
    console.log(obj2)
    console.log(obj3)

     重复的对象字面量属性:

    // 对于每一组重复属性,都会选取最后一个取值。
    let obj = {
        fullName: '张三',
        fullName: '李四',
        age: 18,
        age: 20
    };
    
    console.log(obj.fullName);   // '李四'
    console.log(obj.age);        // 20

     自有属性枚举属性:

    ES5 中并没有定义对象属性的枚举顺序,有 JavaScript 引擎厂商自行决定。

    ES6 中明确规定了对象的自有属性被枚举时的返回顺序。

    自有属性枚举顺序的基本规则:

      1. 所有数字按升序

      2. 所有字符串按照它们被加入对象时顺序排序

    let obj = {
        a: 1,
        0: 2,
        c: 3,
        2: 4,
        b: 5,
        1: 6
    };
    
    console.log(Object.getOwnPropertyNames(obj));  // ["0", "1", "2", "a", "c", "b"]

     改变对象的原型:

    let person = {
        getGreeting () {
            return 'Hello';
        }
    };
    
    let dog = {
        getGreeting () {
            return 'woof';
        }
    };
    
    // 使用 create() 方法将 person 对象作为原型对象
    let friend = Object.create(person);  // {}
    console.log(friend.getGreeting());  // 'Hello'
    console.log(Object.getPrototypeOf(friend) === person);  // true
    
    // 使用 setPrototypeOf() 方法将 friend 对象的原型对象修改成 dog
    Object.setPrototypeOf(friend, dog);
    console.log(friend.getGreeting());  // 'Hello'
    console.log(Object.getPrototypeOf(friend) === dog);  // true

    使用 super 关键字访问原型对象:

    let person = {
        getGreeting () {
            return 'Hello';
        }
    };
    
    let dog = {
        getGreeting () {
            return 'woof';
        }
    };
    
    let friend = {
        getGreeting () {
            return Object.getPrototypeOf(this).getGreeting.call(this) + ', hi';
        }
    };
    
    // ES 6 引入了 super 关键字,super 指向当前对象的原型对象,实际上也就是 Object.getPrototypeOf(this) 的值,于是,上面的代码可以简化成如下形式:
    let friend = {
        getGreeting () {
            return super.getGreeting() + ', hi';
        }
    };
    
    // 使用 setPrototypeOf() 方法将 friend 对象的原型对象修改成 person
    Object.setPrototypeOf(friend, person);
    console.log(friend.getGreeting());  // 'Hello'
    console.log(Object.getPrototypeOf(friend) === person);  // true
    
    // 使用 setPrototypeOf() 方法将 friend 对象的原型对象修改成 dog
    Object.setPrototypeOf(friend, dog);
    console.log(friend.getGreeting());  // 'Hello'
    console.log(Object.getPrototypeOf(friend) === dog);  // true
  • 相关阅读:
    仿美团pc,koa+ssr(四)
    基本的数据库操作脚本
    jQuery选择器总结
    经常学习参考网站
    WebAPI
    Sqlserver 基本面试题
    truncate和delete的区别
    Webservice,WCF,WebAPI 之间的区别
    WCF 学习
    学习angularJs(1)--引用文件
  • 原文地址:https://www.cnblogs.com/changjunhui/p/11979818.html
Copyright © 2020-2023  润新知