JavaScript中對象如何使用

這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)JavaScript中對象如何使用，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)于2013年創(chuàng)立，公司以成都網(wǎng)站制作、網(wǎng)站設(shè)計、外貿(mào)網(wǎng)站建設(shè)、系統(tǒng)開發(fā)、網(wǎng)絡推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計等為主要業(yè)務，適用行業(yè)近百種。服務企業(yè)客戶1000多家，涉及國內(nèi)多個省份客戶。擁有多年網(wǎng)站建設(shè)開發(fā)經(jīng)驗。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計、宣傳推廣等服務。通過專業(yè)的設(shè)計、獨特的風格，為不同客戶提供各種風格的特色服務。

介紹

JavaScript 中，對象是鍵/值對的集合。值可以包含屬性和方法，并且可以包含所有其他 JavaScript 數(shù)據(jù)類型，例如字符串，數(shù)字和布爾值。

JavaScript中的所有對象都來自父 Object 的構(gòu)造函數(shù)。Object 為我們提供了很多實用的內(nèi)置方法，并且可以在單個對象中直接使用。不同于數(shù)組的原型方法例如 sort() 和 reverse() 只能被數(shù)組實例使用，對象方法直接來自 Object 構(gòu)造函數(shù)，并使用對象實例作為參數(shù)。這稱為靜態(tài)方法。

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

前提

為了充分利用本教程，您應該熟悉創(chuàng)建，修改和使用對象，您可以在“ 了解JavaScript中的對象 ”一文中查看這些對象。

有關(guān)JavaScript的其他指導，您可以查看“ JavaScript 如何編碼 ”系列。

Object.create()

Object.create() 方法用于創(chuàng)建一個新對象，并將其鏈接到現(xiàn)有的對象原型。

我們可以創(chuàng)建一個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 對象現(xiàn)在有一個 position 屬性 - 但是所有其他屬性和方法都可以通過 job 的原型獲得。通過Object.create()來實現(xiàn)最小化重復，對于保持代碼DRY十分有效。

Object.keys()

Object.keys() 會創(chuàng)建一個包含對象鍵的數(shù)組。

我們可以創(chuàng)建一個對象并打印鍵的數(shù)組。

// 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 循環(huán)和Object.keys()返回的可枚舉屬性有一個區(qū)別：

for-in 循環(huán)同時也會遍歷原型屬性

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() 創(chuàng)建一個包含對象值的數(shù)組。

// 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()允許您從對象返回數(shù)據(jù)。

Object.entries()

Object.entries() 創(chuàng)建對象的鍵/值對的嵌套數(shù)組。

// 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"]  ]

一旦我們有了鍵/值對數(shù)組，我們就可以使用該forEach()方法循環(huán)并處理結(jié)果。

// 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() 用于把一個對象的值復制到另一個對象。

我們可以創(chuàng)建兩個對象，使用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() 可用于確定對象是否已凍結(jié)，并返回布爾值。

Object.seal()

Object.seal()阻止將新屬性添加到對象，但允許修改現(xiàn)有屬性。這種方法類似于Object.freeze()。在實現(xiàn)下面的代碼之前刷新控制臺以避免錯誤。

// 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]]對象的內(nèi)部隱藏，也可通過 __proto__ 屬性訪問。

在這個例子中，我們可以創(chuàng)建一個可以訪問Array原型的數(shù)組。

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

Output  [constructor: &fnof;, concat: &fnof;, find: &fnof;, findIndex: &fnof;, pop: &fnof;, &hellip;]

我們可以在該原型輸出中看到employees數(shù)組訪問pop，find以及其他數(shù)組原型方法。我們可以通過測試employees原型來證實這一點Array.prototype。

Object.getPrototypeOf(employees) === Array.prototype;

Output  true

此方法可用于獲取有關(guān)對象的更多信息或確保它可以訪問另一個對象的原型。

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

上述就是小編為大家分享的JavaScript中對象如何使用了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：JavaScript中對象如何使用
本文路徑：http://muchs.cn/article0/gephio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、微信小程序、關(guān)鍵詞優(yōu)化、網(wǎng)站導航、網(wǎng)站改版、網(wǎng)頁設(shè)計公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容