目錄

• 1.物件的屬性
• 1.1屬性表示法
  
• 2.計算屬性名
• 3.Object 的方法
• 3.1Object.is() 方法
  
• 3.2Object.assign()方法
  
• 4.super 關鍵字
• 5.物件的擴充套件運算子

1.物件的屬性

1.1屬性表示法

ECMAScript 2015允許在大括號裡面，直接寫入變數和函式，作為物件的屬性和方法。這樣的書寫更加簡潔。

示例程式碼如下所示：

let name = '一碗周'
let job = '前端攻城獅'

// 屬性表示法 直接寫入變數
let obj1 = {
  name,job,sayMe() {
    console.log(name)
  }
}
// 等同於 
let obj2 = {
  name: name,job: job,sayMe: function() {
    console.log(name)
  }
}
console.log(obj1,obj2);

2.計算屬性名

在中，我們定義屬性時，有兩種方式：中括號[]或.的方式：

// 方法一
obj.foo = true;
// 方法二
obj['a'+'bc'] = 123;

.運算子具有很大的侷限性，比如firwww.cppcns.comst name這種屬性只能通過中括號的方式來定義。中括號的方式允許我們使用變數或者在使用識別符號時會導致語法錯誤的字串直接量來定義屬性。

例如：

let person = {},lastName = "last name";

person["first name"] = "Nicholas";
person[lastName] = "Zakas";
console.log(person["first name"]);      // "Nicholas"
console.log(person[lastName]);          // "Zakas"

這兩種方式只能通過中括號的方式來定義的。在ES5中，你可以在物件直接量中使用字串直接量作為屬性，例如：

let person = {
  "first name": "Nicholas"
};
console.log(person["first name"]);      // "Nicholas"

但是當我們的屬性名存在一個變數中或者需要計算時，使用物件直接量是無法定義屬性的。

在ES5之前，如果屬性名是個變數或者需要動態計算 ，則只能通過 物件.[變數名] 的方式去訪問。

let p = {
  name : '李四',age : 20
}
let attName = 'name';
console.log(p[attName]) //這裡 attName表示的是一個變數名。
// 李四

而且這種動態計算屬性名的方式 在字面量中 是無法使用的。

let attName = 'name';
  let p = {
    attName : '李四',// 這裡的attName是屬性名，相當於各級p定義了屬性名叫 attName的屬性。
    age : 20
  }
console.log(p[attName])  // undefined

在ECMAScript 2015中，把屬性名用[ ]括起來，則括號中就可以引用提前定義的變數。

let attName = 'name';
  let p = {
    [attName] : '李四',// 引用了變數attName。相當於添加了一個屬性名為name的屬性
    age : 20
  }
console.log(p[attName])  // 李四

在物件直接量中的中括號表明屬性名是需要被計算的，它的內容被計算為字串

3.Object 的方法

3.1Object.is() 方法

ECMAScript 2015比較兩個值是否相等，只有兩個運算子：相等運算子（==）和嚴格相等運算子（===）。

• 但是這兩個運算子都具有缺點
• 使用相等運算子的時候，會自動轉換資料型別

全等運算子會導致NaN不等於自身，以及+0等於-0。

ECMAScript 2015提出 “Same-value equality ”（同值相等）演算法，用來解決這個問題。Object.is就是部署這個演算法的新方法。它用來比較兩個值是否嚴格相等，與嚴格比較運算子（===）的行為基本一致。

語法結構如下所示：

Object.is(value1,value2);

引數說明：

• value1：被比較的第一個值。
• value2：被比較的第二個值。

返回一個布林值。

示例程式碼如下所示：

console.log(+0 === -0); //true
console.log(NaN === NaN); // false

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

3.2Object.assign()方法

Object.assign()方法用於將所有可列舉屬性的值從一個或多個源物件分配到目標物件。它將返回目標物件 。

語法結構如下所示：

Object.assign(target,...sources)

引數說明：

• target ：目標物件
• sources ：源物件

值得注意的是，如果目標物件中的屬性具有相同的鍵，則屬性將被源物件中的屬性覆蓋。後面的源物件的屬性將類似地覆蓋前面的源物件的屬性。

示例程式碼如下所示：

let sources = {
  name: '一碗周',job: '前端攻城獅'
}
let target = {}
// 使用 assign() 方法所有可列舉屬性的值從一個或多個源物件分配到目標物件。
Object.assign(target,sources)
console.log(target);
// 驗證是否為深複製
target.name = '一碗粥'
console.log(target,sources); //{ name: '一碗周',job: '前端攻城獅' } { name: '一碗粥',job: '前端攻城獅' }

4.super 關鍵字

我們知道，this關鍵字總是指向函式所在的當前物件，ECMAScript 2015又新增了另一個類似的關鍵字super，指向當前物件的原型物件。

// 定義一個要作為原型物件的物件
const proto = {
  v: 'Hello'
}
// 定義一個物件
const obj = {
  v: 'World',printV1() {
    console.log(this.v);
  },// 使用 super 關鍵字
  printV2() {
    console.log(super.v);
  }
}
// 將obj 物件的原型修改為 prtot
Object.setPrototypeOf(obj,proto)
// this 的用法
obj.printV1() // World
www.cppcns.com// super 的用法
obj.printV2() // Hello

值得注意的是，super關鍵字表示原型物件時，只能用在物件的方法之中，用在其他地方都會報錯。目前，只有物件方法的簡寫法可以讓Script引擎確認，定義的是物件的方法。

5.物件的擴充套件運算子

物件的擴充套件運算子（...）用於取出引數物件的所有可遍歷屬性，拷貝到當前物件之中。

示例程式碼如下所示：

// 物件的擴充套件運算子（...）用於取出引數物件的所有可遍歷屬性，拷貝到當前物件之中。
let obj = {
  name: '一碗周',job: '前端攻城獅'
}
let newObj = {
 www.cppcns.com ...obj
}
console.log(newObj); // { name: '一碗周',job: '前端攻城獅' }
// 驗證是否為深複製
newObj.name = '一碗粥'
console.log(obj,newObj); // { name: '一碗周',job: '前端攻城獅' }

由於陣列是特殊的物件，所以物件的擴充套件運算子也可以用於陣列。

let arr = [1,2,3,4,5]
let obj = {
  ...arr
}
console.log(obj); // { '0': 1,'1': 2,'2': 3,'3': 4,'4': 5 }

如果擴充套件運算子後面不是物件，則會自動將其轉為物件。

console.log(
  {
  ...1 // 等同於 {...Object(1)}
  }
); // {}
console.log(
  {
  ...true // 等同於 {...Object(true)}
  }
); // {}
console.log(
  {
  ...undefined // 等同於 {...Object(undefined)}
  }
); // {}
console.log(
  {
  ...null // 等同於 {...Object(null)}
  }
); // {}

到此這篇關於ECMAscript新特性物件介紹的文章就介紹到這了,更多相關ECMAscript 物件介紹內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！