ES6中對(duì)象新功能與解構(gòu)賦值的示例分析

這篇文章給大家分享的是有關(guān)ES6中對(duì)象新功能與解構(gòu)賦值的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

ES6 通過字面量語法擴(kuò)展、新增方法、改進(jìn)原型等多種方式加強(qiáng)對(duì)象的使用，并通過解構(gòu)簡(jiǎn)化對(duì)象的數(shù)據(jù)提取過程。

字面量語法擴(kuò)展

在 ES6 模式下使用字面量創(chuàng)建對(duì)象更加簡(jiǎn)潔，對(duì)于對(duì)象屬性來說，屬性初始值可以簡(jiǎn)寫，并可以使用可計(jì)算的屬性名稱。對(duì)象方法的定義消除了冒號(hào)和 function 關(guān)鍵字，示例如下：

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

針對(duì)重復(fù)定義的對(duì)象字面量屬性，ES5嚴(yán)格模式下會(huì)進(jìn)行重復(fù)屬性檢查從而拋出錯(cuò)誤，而ES6移除了這個(gè)機(jī)制，無論嚴(yán)格模式還是非嚴(yán)格模式，同名屬性都會(huì)取最后一個(gè)值。

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

新增方法

從 ES5 開始遵循的一個(gè)設(shè)計(jì)目標(biāo)是，避免創(chuàng)建新的全局函數(shù)，也不在object.prototype上創(chuàng)建新的方法。
為了是某些任務(wù)更容易實(shí)現(xiàn)，ES6 在全局 Object 對(duì)象上引入一些新的方法。

Object.is( )

ES6 引入Object.is()方法來彌補(bǔ)全等運(yùn)算符的不準(zhǔn)確計(jì)算。

全等運(yùn)算符在比較時(shí)不會(huì)觸發(fā)強(qiáng)制轉(zhuǎn)換類型，Object.is()運(yùn)行結(jié)果也類似，但對(duì)于 +0 和 -0（在 JS 引擎中為兩個(gè)不同實(shí)體）以及特殊值NaN的比較結(jié)果不同，示例來看：

// demo3
console.log(5 == '5') // true
console.log(5 === '5') // false
console.log(Object.is(5, '5')) // false

console.log(+0 == -0) // true
console.log(+0 === -0) // true
console.log(Object.is(+0, -0)) // false

console.log(NaN == NaN) // false
console.log(NaN === NaN) // false
console.log(Object.is(NaN, NaN)) // true

總結(jié)來說，Object.is()對(duì)所有值進(jìn)行了更嚴(yán)格等價(jià)判斷。當(dāng)然，是否使用Object.is()代替全等操作符（===）取決于這些特殊情況是否影響代碼。

Object.assign( )

ES6 添加Object.assign()來實(shí)現(xiàn)混合（Mixin）模式，即一個(gè)對(duì)象接收另一個(gè)對(duì)象的屬性和方法。注意是接收而不是繼承，例如接收 demo1 中的對(duì)象：

// demo4
var friend = {}
Object.assign(friend, person)
friend.sayName() // Jenny
console.log(friend.age) // 18
console.log(Object.getPrototypeOf(friend) === person) // false

在Object.assign()之前，許多 JS 庫自定義了混合方法 mixin( ) 來實(shí)現(xiàn)對(duì)象組合，代碼類似于：

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

可以看出 mixin( ) 方法使用“=”賦值操作，并不能復(fù)制訪問器屬性，同理Object.assign()也不能復(fù)制訪問器屬性，只是執(zhí)行了賦值操作，訪問器屬性最終會(huì)轉(zhuǎn)變?yōu)榻邮諏?duì)象的數(shù)據(jù)屬性。示例如下：

// demo5
var animal = {
  name: 'lili',
  get type () {
    return this.name + type
  },
  set type (news) {
    type = news
  }
}
animal.type = 'cat'
console.log(animal.type) // lilicat

var pet = {}
Object.assign(pet, animal)
console.log(animal) // { name: 'lili', type: [Getter/Setter] }
console.log(pet) // { name: 'lili', type: 'lilicat' }

Object.setPrototypeOf( )

正常情況下對(duì)通過構(gòu)造函數(shù)或Object.create()創(chuàng)建時(shí)，原型是被指定的。ES6 添加Object.setPrototypeOf() 方法來改變對(duì)象的原型。

例如創(chuàng)建一個(gè)繼承 person 對(duì)象的 coder 對(duì)象，然后改變 coder 對(duì)象的原型：

// demo6
let person = {
  myname: 'Jenny',
  sayName () { 
    console.log(this.myname)
  }
}

// 創(chuàng)建原型為 person 的 coder 對(duì)象
let coder = Object.create(person) 
coder.sayName() // Jenny
console.log(Object.getPrototypeOf(coder) === person) // true

let hero = {
  myname: 'lee',
  sayName () {
    console.log(this.myname)
  }
}

// 改變 coder 對(duì)象的原型為 hero
Object.setPrototypeOf(coder, hero)
coder.sayName() // lee
console.log(Object.getPrototypeOf(coder) === hero) // true

對(duì)象原型被存儲(chǔ)在內(nèi)部專有屬性[[Prototype]]，調(diào)用Object.getPrototypeOf()返回存儲(chǔ)在其中的值，調(diào)用Object.setPrototypeOf()改變其值。這個(gè)方法加強(qiáng)了對(duì)對(duì)象原型的操作，下一節(jié)重點(diǎn)講解其它操作原型的方式。

增強(qiáng)對(duì)象原型

原型是 JS 繼承的基礎(chǔ)，ES6 針對(duì)原型做了很多改進(jìn)，目的是更靈活地方式使用原型。除了新增的Object.setPrototypeOf()改變?cè)屯?，還引入Super關(guān)鍵字簡(jiǎn)化對(duì)原型的訪問，

Super關(guān)鍵字

ES6 引入Super來更便捷的訪問對(duì)象原型，上一節(jié)介紹 ES5 可以使用Object.getPrototypeOf()返回對(duì)象原型。舉例說明Super的便捷，當(dāng)對(duì)象需要復(fù)用原型方法，重新定義自己的方法時(shí)，兩種實(shí)現(xiàn)方式如下：

// demo7
let coder1 = {
  getName () {
    console.log("coder1 name: ")
    Object.getPrototypeOf(this).sayName.call(this)
  }
}

// 設(shè)置 coder1 對(duì)象的原型為 hero（demo6）
Object.setPrototypeOf(coder1, hero)
coder1.getName() // coder1 name: lee

let coder2 = {
  getName () {
    console.log("coder2 name: ")
    super.sayName()
  }
}

Object.setPrototypeOf(coder2, hero)
coder2.getName() // coder2 name: lee

在 coder1 對(duì)象的 getName 方法還需要call(this)保證使用的是原型方法的 this，比較復(fù)雜，并且在多重繼承會(huì)出現(xiàn)遞歸調(diào)用棧溢出錯(cuò)誤，而直接使用Super就很簡(jiǎn)單安全。

注意必須在簡(jiǎn)寫方法中使用Super，要不然會(huì)報(bào)錯(cuò)，例如以下代碼運(yùn)行語法錯(cuò)誤：

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

因?yàn)樵诶又?getName 成為了匿名 function 定義的屬性，在當(dāng)前上下問調(diào)用Super引用是非法的。如果不理解，可以進(jìn)一步看下方法的從屬對(duì)象。

方法的從屬對(duì)象

ES6 之前“方法”是具有功能而非數(shù)據(jù)的對(duì)象屬性，ES6 正式將方法定義為有 [[HomeObject]]內(nèi)部屬性的函數(shù)。

[[HomeObject]]屬性存儲(chǔ)當(dāng)前方法的從屬對(duì)象，例如：

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

function shareName () {
    console.log("No HomeObject")
}

coder5 對(duì)象的 sayName( ) 方法的[[HomeObject]]屬性值為 coder5，而 function 定義的 shareName( ) 沒有將其賦值給對(duì)象，所以沒有定義其[[HomeObject]]屬性，這在使用Super時(shí)很重要。

Super就是在[[HomeObject]]屬性上調(diào)用Object.getPrototypeOf()獲得原型的引用，然后搜索原型得到同名函數(shù)，最后設(shè)置 this 綁定調(diào)用相應(yīng)方法。

解構(gòu)賦值

ES6 為數(shù)組和對(duì)象字面量提供了新特性——解構(gòu)，可以簡(jiǎn)化數(shù)據(jù)提取的過程，減少同質(zhì)化的代碼。解構(gòu)的基本語法示例如下：

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

注意在這段代碼中，user.name 存儲(chǔ)在與對(duì)象屬性名同名的 name 變量中。

默認(rèn)值

如果解構(gòu)時(shí)變量名稱與對(duì)象屬性名不同，即在對(duì)象中不存在，那么這個(gè)變量會(huì)默認(rèn)為undefined：

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

非同名變量賦值

非同名變量的默認(rèn)值為undefined，但更多時(shí)候是需要為其賦值的，并且會(huì)將對(duì)象屬性值賦值給非同名變量。ES6 為此提供了擴(kuò)展語法，與對(duì)象字面量屬性初始化程序很像：

let user = {
  name: 'jenny',
  id: 18
}
let {name, id = 16, job = 'engineer'} = user
console.log(name, id, job) // jenny 18 engineer

let {name: localName, id: localId} = user
console.log(localName, localId) // jenny 18

let {name: otherName = 'lee', job: otherJob = 'teacher'} = user
console.log(otherName, otherJob) // jenny teacher

可以看出這種語法實(shí)際與對(duì)象字面量相反，賦值名在冒號(hào)左，變量名在右，并且解構(gòu)賦值時(shí)，只是更新了默認(rèn)值，不能覆蓋對(duì)象原有的屬性值。

嵌套解構(gòu)

解構(gòu)嵌套對(duì)象的語法仍然類似對(duì)象字面量，使用花括號(hào)繼續(xù)查找下層結(jié)構(gòu)：

let user = {
  name: 'jenny',
  id: 18,
  desc: {
    pos: {
      lng: 111,
      lat: 333
    }
  }
}

let {desc: {pos}} = user
console.log(pos) // { lng: 111, lat: 333 }

let {desc: {pos: {lng}}} = user
console.log(lng) // 111

let {desc: {pos: {lng: longitude}}} = user
console.log(longitude) // 111

對(duì)象類別

ES6 規(guī)范定義了對(duì)象的類別，特別是針對(duì)瀏覽器這樣的執(zhí)行環(huán)境。

普通（Ordinary）對(duì)象
具有 JS 對(duì)象所有的默認(rèn)內(nèi)部行為

特異（Exotic）對(duì)象
具有某些與默認(rèn)行為不符的內(nèi)部行為

標(biāo)準(zhǔn)（Standard）對(duì)象
ES6 規(guī)范中定義的對(duì)象
可以是普通對(duì)象或特異對(duì)象，例如 Date、Array 等

內(nèi)建對(duì)象
腳本開始執(zhí)行時(shí)存在于 JS 執(zhí)行環(huán)境中的對(duì)象
所有標(biāo)準(zhǔn)對(duì)象都是內(nèi)建對(duì)象

感謝各位的閱讀！關(guān)于“ES6中對(duì)象新功能與解構(gòu)賦值的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！