【ES6基礎】Object的新方法

Object對象可謂是JS的重要核心內容，在你使用JS的過程當中，你會發現本身的工做大部分都是在操做對象，ES六、ES七、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）

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