[ES6] 细化ES6之 -- 对象的扩展

对象的属性

属性表示法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法

ES5

let name = "张无忌";
function sayMe() {
    console.log("this is 张无忌");
}
// ES5定义对象的属性和方法的方式
var obj = {
    name:name,// 第二个name表示变量名
    sayMe:sayMe,// //第二个sayMe表示函数名
};
console.log(obj.name); //张无忌

ES6

let name = "张无忌";
function sayMe() {
    console.log("this is 张无忌");
}
// ES6允许将变量名和函数名直接作为对象的属性和方法的方式
var obj = {
    name,
    sayMe,
};
console.log(obj.name); //张无忌

 

Object的方法

Object.is()的方法

ESt 5比较两个值是否相等，使用的是相等运算符( = = )和全等运算符( = = = )。但这两个运算符在使用时都具有缺点:

• 相等运算符在比较之前，会自动转换数据类型。
• 全等运算符导致NaN与自身不等，+0等于-0等问题。

ES6提出了同值相等( Same - value equality )算法来解决以上问题。Objectis() 方法就是对同值相等算法的具体实现。.

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

 

Object.assign()的方法

用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。

Object.assign(target,...sources)

• target:目标对象。
• sources:源对象。
• 返回值:目标对象。

var obj = {
    name: "张无忌",
    age: 18,
};

var target = {};
let result = Object.assign(target, obj);
console.log(result, target); // { name: '张无忌', age: 18 } { name: '张无忌', age: 18 }

target.name = '周芷若'
console.log(obj.name);// 张无忌

Object.assign()方法只会拷贝源对象自身的并且可枚举的属性到目标对象。

 

super关键字

用于指向当前对象的原型对象。

function Hero() {
  this.name = "张无忌";
  this.sayMe = function () {
    console.log(this.name);// Hero {}
  };
}
Hero.prototype.age = 18;
var hero = new Hero();
hero.sayMe();
hero.sayYou = function () {
  console.log(this.age);
};
hero.sayYou();



var prop = {
    age: 18,
};
var obj = {
    name: "张无忌",
    sayMe() {
        console.log(super.age); // prop.age
    },
};

Object.setPrototypeOf(obj, prop);
obj.sayMe();

super关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。

 

对象的扩展运算符

对象的扩展运算符(…)用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

var obj = {
    name: "张无忌",
    age: 18,
};
// 将元对象的可枚举的属性复制到目标对象。
var target = { ...obj };
console.log(target); // { name: '张无忌', age: 18 }