ES6中对象的新功能与解构赋值的详解（代码示例）

本篇文章给大家带来的内容是关于es6中对象的新功能与解构赋值的详解（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

ES6 通过字面量语法扩展、新增方法、改进原型等多种方式加强对象的使用，并通过解构简化对象的数据提取过程。

字面量语法扩展

在 ES6 模式下使用字面量创建对象更加简洁，对于对象属性来说，属性初始值可以简写，并可以使用可计算的属性名称。对象方法的定义消除了冒号和 function 关键字，示例如下：

// Demo1var value = "name", age = 18var person = {  age, // age: age  ['my' + value]: 'Jenny',  // myname  sayName () {  // sayName: function()    console.log(this.myname)  }}console.log(person.age) // 18console.log(person.myname) // Jennyperson.sayName(); // Jenny

登录后复制

针对重复定义的对象字面量属性，ES5严格模式下会进行重复属性检查从而抛出错误，而ES6移除了这个机制，无论严格模式还是非严格模式，同名属性都会取最后一个值。

// demo2var person = {  ['my' + value]: 'Jenny',  myname: 'Tom',  myname: 'Lee',}console.log(person.myname) // Lee

登录后复制

新增方法

从 ES5 开始遵循的一个设计目标是，避免创建新的全局函数，也不在object.prototype上创建新的方法。
为了是某些任务更容易实现，ES6 在全局 Object 对象上引入一些新的方法。

Object.is( )

ES6 引入Object.is()方法来弥补全等运算符的不准确计算。

全等运算符在比较时不会触发强制转换类型，Object.is()运行结果也类似，但对于 +0 和 -0（在 JS 引擎中为两个不同实体）以及特殊值NaN的比较结果不同，示例来看：

// demo3console.log(5 == '5') // trueconsole.log(5 === '5') // falseconsole.log(Object.is(5, '5')) // falseconsole.log(+0 == -0) // trueconsole.log(+0 === -0) // trueconsole.log(Object.is(+0, -0)) // falseconsole.log(NaN == NaN) // falseconsole.log(NaN === NaN) // falseconsole.log(Object.is(NaN, NaN)) // true

登录后复制

总结来说，Object.is()对所有值进行了更严格等价判断。当然，是否使用Object.is()代替全等操作符（===）取决于这些特殊情况是否影响代码。

Object.assign( )

ES6 添加Object.assign()来实现混合（Mixin）模式，即一个对象接收另一个对象的属性和方法。注意是接收而不是继承，例如接收 demo1 中的对象：

// demo4var friend = {}Object.assign(friend, person)friend.sayName() // Jennyconsole.log(friend.age) // 18console.log(Object.getPrototypeOf(friend) === person) // false

登录后复制

在Object.assign()之前，许多 JS 库自定义了混合方法 mixin( ) 来实现对象组合，代码类似于：

function mixin(receiver, supplier) {  Object.keys(supplier).forEach(function (key) {    receiver[key] = supplier[key]  })  return receiver}

登录后复制

可以看出 mixin( ) 方法使用“=”赋值操作，并不能复制访问器属性，同理Object.assign()也不能复制访问器属性，只是执行了赋值操作，访问器属性最终会转变为接收对象的数据属性。示例如下：

// demo5var animal = {  name: 'lili',  get type () {    return this.name + type  },  set type (news) {    type = news  }}animal.type = 'cat'console.log(animal.type) // lilicatvar pet = {}Object.assign(pet, animal)console.log(animal) // { name: 'lili', type: [Getter/Setter] }console.log(pet) // { name: 'lili', type: 'lilicat' }

登录后复制

Object.setPrototypeOf( )

正常情况下对通过构造函数或Object.create()创建时，原型是被指定的。ES6 添加Object.setPrototypeOf() 方法来改变对象的原型。

例如创建一个继承 person 对象的 coder 对象，然后改变 coder 对象的原型：

// demo6let person = {  myname: 'Jenny',  sayName () {     console.log(this.myname)  }}// 创建原型为 person 的 coder 对象let coder = Object.create(person) coder.sayName() // Jennyconsole.log(Object.getPrototypeOf(coder) === person) // truelet hero = {  myname: 'lee',  sayName () {    console.log(this.myname)  }}// 改变 coder 对象的原型为 heroObject.setPrototypeOf(coder, hero)coder.sayName() // leeconsole.log(Object.getPrototypeOf(coder) === hero) // true

登录后复制

对象原型被存储在内部专有属性[[Prototype]]，调用Object.getPrototypeOf()返回存储在其中的值，调用Object.setPrototypeOf()改变其值。这个方法加强了对对象原型的操作，下一节重点讲解其它操作原型的方式。

增强对象原型

原型是 JS 继承的基础，ES6 针对原型做了很多改进，目的是更灵活地方式使用原型。除了新增的Object.setPrototypeOf()改变原型外，还引入Super关键字简化对原型的访问，

Super关键字

ES6 引入Super来更便捷的访问对象原型，上一节介绍 ES5 可以使用Object.getPrototypeOf()返回对象原型。举例说明Super的便捷，当对象需要复用原型方法，重新定义自己的方法时，两种实现方式如下：

// demo7let coder1 = {  getName () {    console.log("coder1 name: ")    Object.getPrototypeOf(this).sayName.call(this)  }}// 设置 coder1 对象的原型为 hero（demo6）Object.setPrototypeOf(coder1, hero)coder1.getName() // coder1 name: leelet coder2 = {  getName () {    console.log("coder2 name: ")    super.sayName()  }}Object.setPrototypeOf(coder2, hero)coder2.getName() // coder2 name: lee

登录后复制

在 coder1 对象的 getName 方法还需要call(this)保证使用的是原型方法的 this，比较复杂，并且在多重继承会出现递归调用栈溢出错误，而直接使用Super就很简单安全。

注意必须在简写方法中使用Super，要不然会报错，例如以下代码运行语法错误：

let coder4= {  getName: function () { // getName () 正确    super.sayName() // SyntaxError: 'super' keyword unexpected here  }

登录后复制

因为在例子中 getName 成为了匿名 function 定义的属性，在当前上下问调用Super引用是非法的。如果不理解，可以进一步看下方法的从属对象。

方法的从属对象

ES6 之前“方法”是具有功能而非数据的对象属性，ES6 正式将方法定义为有 [[HomeObject]]内部属性的函数。

[[HomeObject]]属性存储当前方法的从属对象，例如：

let coder5 = {  sayName () {    console.log("I have HomeObject")  }}function shareName () {    console.log("No HomeObject")}

登录后复制

coder5 对象的 sayName( ) 方法的[[HomeObject]]属性值为 coder5，而 function 定义的 shareName( ) 没有将其赋值给对象，所以没有定义其[[HomeObject]]属性，这在使用Super时很重要。

Super就是在[[HomeObject]]属性上调用Object.getPrototypeOf()获得原型的引用，然后搜索原型得到同名函数，最后设置 this 绑定调用相应方法。

解构赋值

ES6 为数组和对象字面量提供了新特性——解构，可以简化数据提取的过程，减少同质化的代码。解构的基本语法示例如下：

let user = {  name: 'jenny',  id: 18}let {name, id} = userconsole.log(name, id) // jenny 18

登录后复制

注意在这段代码中，user.name 存储在与对象属性名同名的 name 变量中。

默认值

如果解构时变量名称与对象属性名不同，即在对象中不存在，那么这个变量会默认为undefined：

let user = {  name: 'jenny',  id: 18}let {name, id, job} = userconsole.log(name, id, job) // jenny 18 undefined

登录后复制

非同名变量赋值

非同名变量的默认值为undefined，但更多时候是需要为其赋值的，并且会将对象属性值赋值给非同名变量。ES6 为此提供了扩展语法，与对象字面量属性初始化程序很像：

let user = {  name: 'jenny',  id: 18}let {name, id = 16, job = 'engineer'} = userconsole.log(name, id, job) // jenny 18 engineerlet {name: localName, id: localId} = userconsole.log(localName, localId) // jenny 18let {name: otherName = 'lee', job: otherJob = 'teacher'} = userconsole.log(otherName, otherJob) // jenny teacher

登录后复制

可以看出这种语法实际与对象字面量相反，赋值名在冒号左，变量名在右，并且解构赋值时，只是更新了默认值，不能覆盖对象原有的属性值。

嵌套解构

解构嵌套对象的语法仍然类似对象字面量，使用花括号继续查找下层结构：

let user = {  name: 'jenny',  id: 18,  desc: {    pos: {      lng: 111,      lat: 333    }  }}let {desc: {pos}} = userconsole.log(pos) // { lng: 111, lat: 333 }let {desc: {pos: {lng}}} = userconsole.log(lng) // 111let {desc: {pos: {lng: longitude}}} = userconsole.log(longitude) // 111

登录后复制

对象类别

ES6 规范定义了对象的类别，特别是针对浏览器这样的执行环境。

普通（Ordinary）对象
具有 JS 对象所有的默认内部行为

特异（Exotic）对象
具有某些与默认行为不符的内部行为

标准（Standard）对象
ES6 规范中定义的对象
可以是普通对象或特异对象，例如 Date、Array 等

内建对象
脚本开始执行时存在于 JS 执行环境中的对象
所有标准对象都是内建对象

以上就是ES6中对象的新功能与解构赋值的详解（代码示例）的详细内容，更多请关注【创想鸟】其它相关文章！