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

2020-05-15  本文已影响0人  蒋小花_4b6c

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"

上一篇下一篇

猜你喜欢

热点阅读