美文网首页
ES6(四)扩展的对象功能1

ES6(四)扩展的对象功能1

作者: 蒋小花_4b6c | 来源:发表于2020-05-15 17:27 被阅读0次

    1.对象类别(普通、标准、内置)

    2.对象字面量语法的扩展 

    (属性名与值相同可以只写一个;

        对象里面的方法简写var obj = { sayNane() {…}  };

        获取对象里面属性的名字,写入对象名字,的一些方式[]

    3.新的方法

        Object.is(num1, num2),即使是特殊情况(+0 、-0)也比===更准确一些,一般情况下还是使用===

        Object.assign() 将一个对象的属性赋值给另一个对象

    1.对象类别

    对象类别包括:

    普通对象:拥有 JS 对象所有默认的内部行为。 奇异对象:其内部行为在某些方面有别于默认行为。

    标准对象:在 ES6 中被定义的对象,例如 Array 、 Date ,等等。标准对象可以是普通的,也可以是奇异的。

    内置对象:在脚本开始运行时由 JS 运行环境提供的对象。所有的标准对象都是内置对象。

    2.对象字面量语法的扩展

    对象字面量, 是一种创建对象的简洁语法(否则 要多写不少代码).

     ES6 用几种方式扩展了对象字面量:

    a. 属性初始化器的速记法

    // ES5

    // 对象字面量是“键/值对”的简单集合。

    // 属性值被初始化时可能会有些重复

    function createPerson(name, age) {

        return {

            name: name,

            age: age

        };

    }

    // ES6

    function createPerson(name, age) {

        return {

            name,

            age

        };

    }


    b. 方法简写

    // ES5

    var person = {

        name: "Nicholas",

        sayName: function() {

            console.log(this.name);

        }

    };

    // ES6

    var person = {

        name: "Nicholas",

        sayName() {

            console.log(this.name);

        }

    };

    person.sayName();

    c. 需计算属性名

    var person = {},

        lastName = "last name";

    person["first name"] = "Nicholas";

    person[lastName] = "Zakas";

    console.log(person["first name"]);  // Nicholas

    console.log(person[lastName]); // Zakas

    方括号表示法允许将任意字符串用作属性名.

      "first name"  与 "last name"  属性就能分别被赋值为 "Nicholas" 与 "Zakas" 。

    也可以,字符串字面量直接用作属性:

    var person = {

        "first name": "Nicholas"

    };

    console.log(person["first name"]); // Nicholas

    var param0 = 'last name';

    var persong = {

        'first name': 'zhang',

        param: 'san',

        [param0]: 'sansan'

    };

    console.log(persong['first name']);

    console.log(persong['param'] );

    console.log(persong['last name']);

    console.log(persong[param0]);

    如果属性名有字符串,也同理:

    var suffix = " name";

    var person = {

        ["first" + suffix]: "Nicholas",

        ["last" + suffix]: "Zakas"

    };

    console.log(person["first name"]);

    console.log(person["last name"]);

    新的方法

    引入了两个新方法, 避免在 Object 对象的原型上 添加新方法,

    尝试寻找哪些对象应该被添加新方法.

    a.   Object.is()方法

    相等运算符( ==  )或严格相等运算符( ===)

    为了避免在比较时发生强制类型转换,许多开发者更倾向于使用后者.

    但是也并不完全准确.

    它认为 +0 与 -0 相等,即使这两者在 JS 引擎中有不同的表 示;

    另外NaN === NaN 会返回 false  ,因此有必要使用isNaN()  函数来正确检测 NaN 。

    所以, ES6引入了 Object.is() 方法来弥补严格相等运算符残留的怪异点。

    接收两个参数, 

    会在二者的值相等时返回 true 。

    (要求二者类型相同并且值也相等)

    console.log(+0 == -0); // T

    console.log(+0 === -0); // T

    console.log(Object.is(+0, -0)); // F

    console.log(NaN == NaN); // F

    console.log(NaN === NaN); // F

    console.log(Object.is(NaN, NaN)); // T

    console.log(5 == 5); // T

    console.log(5 == "5"); // T

    console.log(5 === 5); // T

    console.log(5 === "5"); // F

    console.log(Object.is(5, 5)); // T

    console.log(Object.is(5, "5")); // F

    但是仍然没必要停止使用严格相等运算符,选 择 Object.is()  ,

    还是选择 ==  或 === ,取决于代码的实际情况。

    b.  Object.assign() 方法 

    混入( Mixin )

    在一次混入中,一个对象会从另一个对 象中接收属性与方法。

    function mixin(receiver, supplier) {

        Object.keys(supplier).forEach(function(key) {

            receiver[key] = supplier[key];

        });

        return receiver;

    }

    任意曾使用 mixin() 函数的地方使用 Object.assign()

    function EventTarget() { /*...*/ }

    EventTarget.prototype = {

        constructor: EventTarget,

        emit: function() { /*...*/ },

        on: function() { /*...*/ }

    };

    var myObject = {};

    mixin(myObject, EventTarget.prototype);

    myObject.emit("somethingChanged");

    function EventTarget() { /*...*/ }

    EventTarget.prototype = {

        constructor: EventTarget, emit: function() { /*...*/ },

        on: function() { /*...*/ }

    }

    var myObject = {}

    Object.assign(myObject, EventTarget.prototype);

    myObject.emit("somethingChanged");

    第二个供应值,覆盖了前一个供应值

    var receiver = {};

    Object.assign(receiver,

        {

            type: "js",

            name: "file.js"

        },

        {

            type: "css"

        }

    );

    console.log(receiver.type); // "css"

    console.log(receiver.name); // "file.js"

    相关文章

      网友评论

          本文标题:ES6(四)扩展的对象功能1

          本文链接:https://www.haomeiwen.com/subject/hllnnhtx.html