Object對象可謂是JS的重要核心內容，在你使用JS的過程中，你會發現自己的工作大部分都是在操作對象，ES6、ES7、ES8引入了不少新的方法，本篇文章筆者將帶著大家一起熟悉下重點的新方法。

本篇文章，筆者將從以下幾個方面進行介紹：

• 更簡潔的語法
• Object.values()
• Object.entries()
• __proto__
• Object.is()
• Object.setPrototypeOf()
• Object.assign()
• Object.getOwnPropertyDescriptors()

本篇文章閱讀時間預計6分鐘

更簡潔的語法

定義屬性

我們都知道定義一個對象，必須明確屬性名和對應的值，及時屬性名和聲明的變量名一樣（var a = {obj：obj}），ES6及后續版本允許我們用短的代碼聲明對象，用于將對象的屬性分配給與屬性同名的變量，我們一般會這么聲明變量，代碼如下：

var x = 1, y = 2; var object = {x: x,y: y }; console.log(object.x); //output "1”復制代碼

但是ES6之后，你可以這么做

let x = 1, y = 2; let object = { x, y }; console.log(object.x); 復制代碼

定義方法

ES6提供了一種新的語法定義對象的方法，示例代碼如下：

let object = {myFunction(){console.log("Hello World!!!"); //Output "Hello World!!!"} } object.myFunction();復制代碼

我們可以看出，省去了聲明屬性名，屬性名即為方法名。

計算屬性名

對象屬性支持計算屬性名。其允許在[]中放入表達式，計算結果可以當做屬性名。

let object = { ["first" + "Name"]: "Eden", }; //extract console.log(object["first" + "Name"]); //Output "Eden” console.log(object); //Output "{ firstName: 'Eden' }”復制代碼

Object.values()

ES8 引入了Object.values()方法，以數組的形式輸出所有對象的值，省去我們手動迭代取出每個對象屬性的值，示例代碼如下：

const obj = {book: "Learning ES2017 (ES8)",author: "前端達人",publisher: "前端達人",useful: true }; console.log(Object.values(obj));復制代碼

上述代碼將會輸出：

[ 'Learning ES2017 (ES8)', '前端達人', '前端達人', true ]復制代碼

Object.entries()

Object.entries()可用于將對象轉換為鍵/值對的數組形式。 即一個二維數組，數組的每個元素是一個包含鍵和值的數組。 示例代碼如下：

const obj = {book: "Learning ES2017 (ES8)",author: "前端達人",publisher: "前端達人",useful: true }; console.log(Object.entries(obj));復制代碼

上述代碼將會輸出：

[ [ 'book', 'Learning ES2017 (ES8)' ],[ 'author', '前端達人' ],[ 'publisher', '前端達人' ],[ 'useful', true ] ]復制代碼

__proto__

proto：是一個對象擁有的內置屬性，是JS內部使用尋找原型鏈的屬性?？梢岳斫鉃樗且粋€指針，用于指向創建它的函數對象的原型對象prototype（即構造函數的prototype）。prototype（原型對象）：是函數（Function）的一個屬性（每個函數都有一個prototype），這個對象包含了此函數的所有實例共享的屬性和方法，即：原型對象。

__proto__屬性在ES5中沒有標準化，但由于它的受歡迎程度，它在以后的版本中被標準化了。 我們可以使用Object.getPrototypeOf()方法返回指定對象的原型（內部[[Prototype]]屬性的值，可以使用Object.create()方法創建一個新對象，使用現有的對象來提供新創建的對象的__proto__。

//In ES5 var x = {prop1: 12}; var y = Object.create(x, {prop2:{value: 13}}); console.log(y.prop1); //Output "12" console.log(y.prop2); //Output "13" console.log(x); // Output: {prop1: 12} console.log(y); // Output: {prop2: 13} console.log(y.__proto__); // Output: {prop1: 12}//In ES6 onwards let a = {prop1: 12, __proto__: {prop2: 13}}; console.log(a.prop1); //Output "12" console.log(a.prop2); //Output "13" console.log(a); // Output: {prop1: 12} console.log(a.__proto__); // Output: {prop2: 13}復制代碼

在ES5示例中，對象y繼承對象x，x的屬性相對于y來說是隱藏的，我們可以使用__proto__來查找繼承自x的屬性prop1。ES6及其后，你可以直接將值添加到對象的原型鏈中。

Object.is()

Object.is()方法用于確定兩個值是否相等。它類似于===運算符，但Object.is()方法有一些特殊情況和使用“===”的結果是不一致的，如下段代碼所示：

console.log(Object.is(0, -0));//false console.log(0 === -0);//true console.log(Object.is(NaN, 0/0));//true console.log(NaN === 0/0);//false console.log(Object.is(NaN, NaN));//true console.log(NaN ===NaN);//false復制代碼

如下圖所示，展示了使用==，===和Object.is的結果差異：

Object.setPrototypeOf()

Object.setPrototypeOf方法可以為現有對象設置原型，返回一個新對象。Object.setPrototypeOf方法接受兩個參數，第一個是現有對象，第二個是原型對象。Object.setPrototypeOf() 是給對象設置原型，是為了obj.proto = .... 這種寫法更優雅，有更好的兼容性。如下段代碼所示：

let x = {x: 12}; let y = {y: 13}; Object.setPrototypeOf(y, x); console.log(y.x); //Output "12" console.log(y.y); //Output "13” console.log(y);//Output "{ y: 13 }" console.log(y.__proto__);//Output "{ x: 12 }"復制代碼

Object.assign()

Object.assign()方法用于將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象。它至少需要兩個對象作為參數，第一個參數是目標對象，后面的參數都是源對象。如下段代碼所示：

let x = {x: 12}; let y = {y: 13, __proto__: x}; let z = {z: 14, get b() {return 2;}, q: {}}; Object.defineProperty(z, "z", {enumerable: false}); let m = {}; Object.assign(m, y, z); console.log(m.y);//13 console.log(m.z);//undefined console.log(m.b);//2 console.log(m.x);//undefined console.log(m.q == z.q);//true復制代碼

從上述代碼輸出，我們可以得出Object.assign()方法的一些特征：

• 該方法使用源對象的[[Get]]和目標對象的[[Set]]，所以它會調用相關getter和setter。
• 它只是將源的屬性值分配給目標的新屬性或現有屬性。
• 它不會復制來源的[[prototype]]屬性。
• JavaScript屬性名稱可以是字符串或symbol。Object.assign()這兩種都支持。
• Object.assign方法只會拷貝源對象自身的并且可枚舉的屬性到目標對象。
• 如果目標對象中的屬性具有相同的鍵，則屬性將被源中的屬性覆蓋。后來的源的屬性將覆蓋早先的屬性。
• 為了將屬性定義（包括其可枚舉性）復制到原型，應使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。
• Object.assign不會跳過那些值為[null]或[undefined]的源對象。

Object.getOwnPropertyDescriptors()

在ES8中JS引入Object.getOwnPropertyDescriptors()方法將返回給定對象的所有屬性描述，如下段代碼所示：

const details = { get food1() { return 'tasty'; },get food2() { return 'bad'; } }; console.log(Object.getOwnPropertyDescriptors(details));復制代碼

上述代碼將會輸出：

{ food1:{ get: [Function: get food1],set: undefined,enumerable: true,configurable: true },food2:{ get: [Function: get food2],set: undefined,enumerable: true,configurable: true } }復制代碼

這個方法還會用在對象的克隆上，示例代碼如下：

const x = { foo: 1, __proto__: { bar: 2 } }; const y = Object.create( Object.getPrototypeOf(x), Object.getOwnPropertyDescriptors(x) ); console.log(y.__proto__); // { bar: 2 }復制代碼

小節

今天的內容就到這里，我們可以看出ES6關于對象的使用，增加了不少新方法，使用得當，可以讓我們的業務代碼更加簡潔易讀，建議大家在實踐中多多運用，加深和理解其應用場景。

【ES6基礎】let和作用域

【ES6基礎】const介紹

【ES6基礎】默認參數值

【ES6基礎】展開語法(Spread syntax)

【ES6基礎】解構賦值（destructuring assignment）

【ES6基礎】箭頭函數（Arrow functions）

【ES6基礎】模板字符串（Template String）

【ES6基礎】Set與WeakSet

【ES6基礎】Map與WeakMap

【ES6基礎】Symbol介紹：獨一無二的值

【數據結構基礎】棧簡介（使用ES6）

更多精彩內容，請微信關注”前端達人”公眾號！

轉載于:https://juejin.im/post/5cec9a58f265da1bc94ecdce

總結

以上是生活随笔為你收集整理的【ES6基础】Object的新方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。