今天来简单说下ES6 中对象的扩展

首先回顾传统的对象表示法

let person={ 'name':'zhang', 'age':'20', 'play':function(){ alert('play!') }}

再来看看ES6中写法

var name='zhang';var age=20;var person={name,age};console.log(person) // {name: "zhang", age: 20};

这是对象的属性，那么对象的方法呢

var person={ play(){ alert('ES6 中的play!'); }}

不难看出，ES6 在写法上简洁了很多。

字面量表达式即用字面量定义一个对象的时候，可以用表达式作为对象的属性名或者方法名。

看例子

var m="my";var n="name";var p="play";var person={ [ m+n ]:'zhang', [ m+p ](){ return "play"; }};console.log(person.myname)// zhangconsole.log(person.myplay)// play

上面person对象的定义，其中属性名和方法名都是用中括号[]，里面是字符串相加的表达式，

所以说用字面量(即大括号{})定义对象的时候，属性名和方法名可以是一个表达式，表达式的运算结果就是属性名或者方法名。

还有一些对象新增的函数

(1)Object.is()

函数的作用：比较俩个值是否严格相等，也可以说全等。

这里再扩展下严格相等和抽象相等

代码说话：

var str='20';var age=20;// 抽象相等str == age // true// 严格相等str === age // false

可以看出 == 和 === 的区别，严格情况下，不仅值相等，类型也必须相等，否则会返回 false

回到我们的函数，它的作用和严格一样

var str='20';var mine=20;var her=20;Object.is(str,mine) // falseObject.is(mine,her) // true

(2)Object.assign()

函数作用：将源对象的属性赋值到目标对象上。

太官方，老样子，看代码

// 可看做目标对象let target={'a':1};// 可看做源对象let origin={"b":2,"c":3};Object.assign(target,origin);console.log(target);// {a: 1, b: 2, c: 3}

可以看出target 对象已经被改变。

当然，Object.assign( )函数的参数还可以是多个

// 可看做目标对象let target={'a':1};// 可看做源对象let origin1={"b":2,"c":3};let origin2={"d":4,"e":5};Object.assign(target,origin1,origin2);console.log(target);// {a: 1, b: 2, c: 3, d: 4, e: 5}

这里需要注意一下：赋值过程中如果出现了相同的属性名，那么后面属性值的就会覆盖前面的。

小小总结下：利用Object.assign( )函数的功能，我们可以完成很多效果，比如：给对象添加属性和方法，克隆对象，合并多个对象，合并参数，为对象的属性指定默认值。

此外，它还可以拷贝数组:

let arr=['z'.'h','a','n','g'];let arr2=Object.assign([],arr);arr2.push('end');console.log(arr2); // ['z'.'h','a','n','g','end']console.log(arr); //['z'.'h','a','n','g']

(3)Object.getPrototypeOf()

函数作用：获取一个对象的prototype属性。

话不多说：

function Person(){ // 自定义一个Person类(函数) } Person.prototype = { // 函数都有一个预属性prototype对象 say(){ // 给prototype对象添加一个say方法 console.log('hello'); } }; let zhang = new Person(); // 实例化Person对象，赋值给变量zhang zhang.say(); //调用类的say方法 结果：hello Object.getPrototypeOf(zhang); // 获取zhang对象的prototype属性 // 结果：{say:function(){.....}}

有获取就有设置，那么：

(4)Object.setPrototypeOf()

function Person(){ // 自定义一个Person类(函数) } Person.prototype = { // 函数都有一个预属性prototype对象 say(){ // 给prototype对象添加一个say方法 console.log('hello'); } }; let zhang = new Person(); // 实例化Person对象，赋值给变量zhang zhang.say(); //调用类的say方法 结果：hello Object.setPrototypeOf( //使用Object.setPrototypeOf zhang, {say(){console.log('hi')} });zhang.say(); //再次调用类的say方法 结果：hi

通过这个来修改对象prototype的内容。

可以看出修改之后我们再一次调用zhang.say( )；得到的结果是打印出hi，说明我们修改成功了。

对象的延伸就先到这儿...

原文发布时间为：2021年05月21日2021年05月21日原文作者：前端喵

本文来源：开源中国 如需转载请联系原作者