ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
[TOC] >[success] # 字面量的写法优化 ~~~ 1.es6可以将属性和方法进行简写优化 ~~~ >[danger] ##### 属性简写 和对象方法简写 * es6简写 ~~~ function testEs6(name) { return { // 属性缩写 name, // 函数缩写 sayName() { console.log(this.name) } } } ~~~ * es5 的写法 ~~~ function testEs5(name) { return { name:name, sayName:function () { console.log(this.name) } } } ~~~ >[danger] ##### 可计算 属性名 -- key 可以变成变量 ~~~ const lastName = 'last name' person = {} // 中括号中的可以可以放变量 person[lastName] = 'wang' console.log(person[lastName]) // wang console.log(person['last name']) // wang ~~~ * 还可以这么写 ~~~ const other = 'name' const test = { // 动态 [other]:'wang' } console.log(test) // {name: "wang"} ~~~ >[info] ## 新增属性 ~~~ 1.Object.is -- 两个值比较 ~~~ >[danger] ##### Object.is -- 两个值比较 ~~~ 1.在'es5' 中比较两值的关系,一般使用'==' 和 '===',但是当我们比较 'NaN'和'NaN' 的时候是false,这让人很迷惑,Object.is() 接受两个参数 如果这两个参数类型相同且具有相同值就会返回true ,大部分的情况 得到的结果和'===' 是一样的 ~~~ * 非大多数情况 ~~~ console.log(NaN === NaN) // false console.log(+0 === -0) // true console.log(Object.is(NaN, NaN)) // true console.log(Object.is(+0 === -0)) // false ~~~ >[danger] ##### Object.assign() -- 将对象合并 [参考MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) ~~~ 1.'Object.assign()'方法用于将所有'可枚举属性'的值从一个或多个源对象复制到目标对象。 它将返回目标对象。 2.第一个参数是目标参数,往后的参数都是合并参数,会将合并参数整合到目标参数中, 最终返回目标参数,也就是目标参数 和 返回参数其实是一个参数 ~~~ * es5 如果想将两个对象合并 ~~~ 1.这种方式不能赋值访问器属性'getter' 和'setter' ~~~ ~~~ function mixin(receiver, supplier) { Object.keys(supplier).forEach(key =>{ receiver[key] = supplier[key] }) return receiver } const receiver = {} const supplier = {age:17,name:'wang'} const newReceiver = mixin(receiver, supplier) console.log(newReceiver) console.log(receiver) ~~~ * 如果合并是原型链 ~~~ function Test() {} Test.prototype = { constructor:Test, emit:function () { console.log('emit') } } const newTest = mixin({},Test.prototype) console.log(newTest) // 这时候 newTest构造函数指向是Test newTest.emit() // 因此新合并的目标对象可以调用Test 的 emit 方法 ~~~ * es6 中的Object.assign() ~~~ 1.可以接受任意参数的源对象如果目标对象和源对象,拥有相同的属性名, 那么最后以靠后的源对象的属性值参数为准 2不能直接将访问属性参数直接赋值到目标对象,但可以将值拿到以后,将这 个值复制过去 ~~~ * 来一个有意思的小例子 ~~~ 1.使用场景当后台接口数据返回,快速实例化对象 ~~~ ~~~ const a = { name: 'wang', age: 18, aObj: { city: 'dl' } } class Test { constructor(obj) { Object.assign(this, obj) } isunderAge() { if (this.age <= 18) { return true } return false } get info() { return `${this.name}_${this.age}` } } const test = new Test(a) test.aObj.city = 'z' console.log(test.age) console.log(test.info) console.log(test.aObj.city) console.log(a.aObj.city) console.log(test.info) ~~~ * 可以简单的复制一个对象 ~~~ function func (obj) { // obj.name = 'func obj' // console.log(obj) const funcObj = Object.assign({}, obj) funcObj.name = 'func obj' console.log(funcObj) } const obj = { name: 'global obj' } func(obj) console.log(obj) ~~~ [具体使用场景见阮一峰老师文章](http://es6.ruanyifeng.com/#docs/object-methods#Object-assign) (1)为对象添加属性 (2)为对象添加方法 (3)克隆对象 (4)合并多个对象 (5)为属性指定默认值