ES6-對象的擴展

在JavaScript原生對象-Object對象詳解中已經比較詳細的介紹了Object對象，其中已經多次提高了ES6,這一篇將詳細的介紹ES6中對Object對象的擴展。

屬性的簡寫表示法

ES6中對象簡寫屬性名的語法,實際上是一種語法糖，在https://www.babeljs.cn/中用簡寫的語法，來看看與其對應的傳統寫法：

使用變量作爲對象的屬性，變量的名稱作爲屬性的鍵名，變量的值作爲屬性的鍵值。

  let firstName='Lily';
  let age=18;
  let p={
    firstName,
    age,
    aboutMe(){
      console.log(`${this.firstName}`)
    }
  };
  console.log(p); //{firstName: "Lily", age: 18, aboutMe: ƒ}

屬性名錶達式

ES中，字面量方式新建一個對象時，對象的屬性可以是個表達式

  let a='first';
  let b='Name';
  let p={
    [a+b]:'Lily'
  };
  console.log(p); //{firstName: "Lily"}

新增的靜態方法

Object.is() 用來比較兩個值是否嚴格相等，與嚴格比較運算符（===）的行爲基本一致

ES5 比較兩個值是否相等，只有兩個運算符：相等運算符（==）和嚴格相等運算符（===）。前者會自動轉換數據類型，Object.is() 與===的區別見下：

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

Object.assign( target, source, source1 ) 用於對象的合併

Object.assign(）會將源對象（source）的所有的自有的可枚舉屬性，複製到目標對象（target）。
target ：目標對象
source ：源對象

• 目標對象中有源對象的同名屬性，屬性值將被覆蓋
• 可以合併多個對象，參數在合併的過程中，如果不是對象會自動進行類型轉換，第一個參數如果是undefined和null則會報錯，其他參數如果無法轉成對象，就會跳過。
• Object.assign方法實行的是淺拷貝,如果屬性是個對象，目標對象對應的屬性得到的是這個對象的引用

let p1={
  lastName:'Zhang',
  forefathers:{lastName:'Wang'}
}
//目標對象中有源對象的同名屬性，屬性值將被覆蓋
let p2={
  firstName:'San',
}

let p={
  firstName:'Si',
  age:18
};
//合併多個對象
Object.assign(p,p1,p2);
//Object.assign方法實行的是淺拷貝,屬性forefathers是個對象，目標對象對應的屬性得到的是這個對象的引用
p1.forefathers.lastName='Li';
console.log(p);  //{firstName: "San", age: 18, lastName: "Zhang", forefathers: {lastName: "Li"}}

Object.getOwnPropertyDescriptors() 返回指定對象所有自身屬性的描述對象。

和Object.getOwnPropertyDescriptor()相似，Object.getOwnPropertyDescriptors() 也用於返回指定對象屬性的描述。
不同的是：
Object.getOwnPropertyDescriptor()返回指定對象某屬性的屬性描述符對象;
Object.getOwnPropertyDescriptors()返回指定對象所有自身屬性的描述對象。
屬性描述符對象請參考JavaScript原生對象-Object對象詳解

  var p={
    firstName:'Lily',
    age:18,
    lastName:'Li',
  }
  //設置屬性firstName的訪問器屬性
  Object.defineProperty(p,'firstName',{
    get:function () {
      return 'Lilyan'
    }
  })
  //打印出對象p的屬性age對應的屬性描述符對象
  console.log(Object.getOwnPropertyDescriptor(p,'age'));
  //打印出對象p的所有自有屬性描述符對象
  console.log(Object.getOwnPropertyDescriptors(p));

Object.values()，Object.entries()

與ES5提供的Object.keys()相似

• Object.keys() 返回一個給定對象==可枚舉的自有屬性(鍵)==組成的數組(ES5)
• Object.values() 返回一個給定對象可枚舉的自有屬性值組成的數組(ES6)
• Object.entries() 返回一個給定對象可枚舉的自有屬性鍵值對組成的數組(ES6)

  var p={
    firstName:'Lily',
    age:18,
    lastName:'Li',
  }
  console.log(Object.keys(p));
  console.log(Object.values(p));
  console.log(Object.entries(p));

Object.getOwnPropertySymbols() 包含對象自有的所有 Symbol 屬性的鍵名組成的數組。

console.log(Object.getOwnPropertySymbols(Array))  //[Symbol(Symbol.species)]

Reflect.ownKeys() 返回對象自身的所有屬性鍵名

Object.setPrototypeOf()，Object.getPrototypeOf()

• Object.getPrototypeOf() 獲取對象的Prototype對象
• Object.setPrototypeOf() 設置一個對象的prototype屬性。

  function Person(){}
  Person.prototype = {
    a(){
      console.log('屬性a的值是a');
    }
  };
  let p=new Person();
  p.a();  //a
  // Object.getPrototypeOf() 獲取對象p的Prototype對象
  console.log(Object.getPrototypeOf(p));    //{a: ƒ}
  // Object.setPrototypeOf() 設置對象p的Prototype對象
  Object.setPrototypeOf(p,{
    a(){
      console.log('屬性a的值是b');
    },
    b:'b'
  });
  p.a();   //b
  console.log(Object.getPrototypeOf(p));    //{b: "b", a: ƒ}