如何在JavaScript中使用對象的方法

介紹

JavaScript 中，對象是 鍵/值 對的集合。值能夠包含屬性和方法，而且能夠包含全部其餘 JavaScript 數據類型，例如字符串，數字和布爾值。

JavaScript中的全部對象都來自父 Object 的構造函數。Object 爲咱們提供了不少實用的內置方法，而且能夠在單個對象中直接使用。不一樣於 數組的原型方法 例如 sort() 和 reverse() 只能被數組實例使用，對象方法直接來自 Object 構造函數，並使用對象實例做爲參數。這稱爲靜態方法。

本教程將介紹重要的內置對象方法，下面的每一個部分都涉及特定方法並提供使用示例。

前提

爲了充分利用本教程，您應該熟悉建立，修改和使用對象，您能夠在「 瞭解JavaScript中的對象 」一文中查看這些對象。

有關JavaScript的其餘指導，您能夠查看「 JavaScript 如何編碼 」系列。

Object.create()

Object.create() 方法用於建立一個新對象，並將其連接到現有的對象原型。

咱們能夠建立一個job對象實例，並將其擴展爲更具體的對象。

// Initialize an object with properties and methods  const job = {  position: 'cashier',  type: 'hourly',  isAvailable: true,  showDetails() {  const accepting = this.isAvailable ? 'is accepting applications' : "is not currently accepting applications";  console.log(`The ${this.position} position is ${this.type} and ${accepting}.`);  }  };  // Use Object.create to pass properties  const barista = Object.create(job);  barista.position = "barista";  barista.showDetails();  複製代碼

Output  The barista position is hourly and is accepting applications.  複製代碼

barista 對象如今有一個 position 屬性 - 可是全部其餘屬性和方法均可以經過 job 的原型得到。經過Object.create()來實現最小化重複，對於保持代碼DRY十分有效。

Object.keys()

Object.keys() 會建立一個包含對象鍵的數組。

咱們能夠建立一個對象並打印鍵的數組。

// Initialize an object  const employees = {  boss: 'Michael',  secretary: 'Pam',  sales: 'Jim',  accountant: 'Oscar'  };  // Get the keys of the object  const keys = Object.keys(employees);  console.log(keys);  複製代碼

Output  ["boss", "secretary", "sales", "accountant"]  複製代碼

Object.keys() 還可用於迭代對象的鍵和值。

// Iterate through the keys  Object.keys(employees).forEach(key => {  let value = employees[key];  console.log(`${key}: ${value}`);  });  複製代碼

Output  boss: Michael  secretary: Pam  sales: Jim  accountant: Oscar  複製代碼

for-in 循環和Object.keys()返回的可枚舉屬性有一個區別：

for-in 循環同時也會遍歷原型屬性

Object.keys() 只會返回自有(實例)屬性

Object.keys() 對於檢查對象的長度也頗有用。

// Get the length of the keys  const length = Object.keys(employees).length;  console.log(length);  複製代碼

Output  4  複製代碼

使用該 length 屬性，咱們可以計算employees包含4個自有屬性。

Object.values()

Object.values() 建立一個包含對象值的數組。

// Initialize an object  const session = {  id: 1,  time: `26-July-2018`,  device: 'mobile',  browser: 'Chrome'  };  // Get all values of the object  const values = Object.values(session);  console.log(values);  複製代碼

Output  [1, "26-July-2018", "mobile", "Chrome"]  複製代碼

Object.keys()和Object.values()容許您從對象返回數據。

Object.entries()

Object.entries() 建立對象的鍵/值對的嵌套數組。

// Initialize an object  const operatingSystem = {  name: 'Ubuntu',  version: 18.04,  license: 'Open Source'  };  // Get the object key/value pairs  const entries = Object.entries(operatingSystem);  console.log(entries);  複製代碼

Output  [  ["name", "Ubuntu"]  ["version", 18.04]  ["license", "Open Source"]  ]  複製代碼

一旦咱們有了鍵/值對數組，咱們就可使用該forEach()方法循環並處理結果。

// Loop through the results  entries.forEach(entry => {  const [key, value] = entry;  console.log(`${key}: ${value}`);  });  複製代碼

Output  name: Ubuntu  version: 18.04  license: Open Source  複製代碼

Object.entries() 方法僅返回對象實例本身的屬性，而不返回可經過其原型繼承的任何屬性。

Object.assign()

Object.assign() 用於把一個對象的值複製到另外一個對象。

咱們能夠建立兩個對象，使用Object.assign()方法將它們合併。

// Initialize an object  const name = {  firstName: 'Philip',  lastName: 'Fry'  };  // Initialize another object  const details = {  job: 'Delivery Boy',  employer: 'Planet Express'  };  // Merge the objects  const character = Object.assign(name, details);  console.log(character);  複製代碼

Output  {firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}  複製代碼

也可使用展開語法(Spread syntax)來完成相同的任務。在下面的代碼中，咱們將經過展開語法合併name和details對象，來聲明character對象。

// Initialize an object  const name = {  firstName: 'Philip',  lastName: 'Fry'  };  // Initialize another object  const details = {  job: 'Delivery Boy',  employer: 'Planet Express'  };  // Merge the object with the spread operator  const character = {...name, ...details}  console.log(character);  複製代碼

Output  {firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"} 複製代碼

展開語法(Spread syntax) 在對象語法中也成爲淺層克隆(shallow-cloning)。

Object.freeze()

Object.freeze() 防止修改對象的屬性和值，並防止在對象中添加或刪除屬性。

// Initialize an object  const user = {  username: 'AzureDiamond',  password: 'hunter2'  };  // Freeze the object  const newUser = Object.freeze(user);  newUser.password = '*******';  newUser.active = true;  console.log(newUser);  複製代碼

Output  {username: "AzureDiamond", password: "hunter2"}  複製代碼

在上面的例子中，咱們試圖重寫密碼用*******覆蓋hunter2，但password的值能保持不變。咱們還嘗試添加一個新屬性active，但沒有添加。

Object.isFrozen() 可用於肯定對象是否已凍結，並返回布爾值。

Object.seal()

Object.seal()阻止將新屬性添加到對象，但容許修改現有屬性。這種方法相似於Object.freeze()。在實現下面的代碼以前刷新控制檯以免錯誤。

// Initialize an object  const user = {  username: 'AzureDiamond',  password: 'hunter2'  };  // Seal the object  const newUser = Object.seal(user);  newUser.password = '*******';  newUser.active = true;  console.log(newUser);  複製代碼

Output  {username: "AzureDiamond", password: "*******"}  複製代碼

新active屬性未添加到密封對象，但password屬性已成功更改。

Object.isSealed() 可用於肯定對象是否已封閉，並返回布爾值。

Object.getPrototypeOf()

Object.getPrototypeOf()用於獲取[[Prototype]]對象的內部隱藏，也可經過 __proto__ 屬性訪問。

在這個例子中，咱們能夠建立一個能夠訪問Array原型的數組。

const employees = ['Ron', 'April', 'Andy', 'Leslie'];  Object.getPrototypeOf(employees);  複製代碼

Output  [constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]  複製代碼

咱們能夠在該原型輸出中看到employees數組訪問pop，find以及其餘數組原型方法。咱們能夠經過測試employees原型來證明這一點Array.prototype。

Object.getPrototypeOf(employees) === Array.prototype;  複製代碼

Output  true  複製代碼

此方法可用於獲取有關對象的更多信息或確保它能夠訪問另外一個對象的原型。

還有一種相關Object.setPrototypeOf()方法將一個原型添加到另外一個對象。建議您使用Object.create()， 由於它更快，性能更高。

結論

對象有許多有用的方法能夠幫助咱們修改，保護和迭代它們。在本教程中，咱們回顧瞭如何建立和分配新對象，迭代對象的鍵和/或值，以及凍結或密封對象。

以爲不錯請點贊支持，歡迎留言或進個人我的羣855801563領取【架構資料專題目合集90期】、【BATJTMD大廠JAVA面試真題1000+】，本羣專用於學習交流技術、分享面試機會，拒絕廣告，我也會在羣內不按期答題、探討。