如何在JavaScript中使用對象方法玄货?

image

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

JavaScript中的所有對象都來自父對象構(gòu)造函數(shù)隘世。對象有許多有用的內(nèi)置方法可柿,我們可以使用和訪問這些方法來簡化處理單個對象的工作。與數(shù)組實例上使用的sort()和reverse()等數(shù)組原型方法不同丙者,對象方法直接用于對象構(gòu)造函數(shù)复斥,并將對象實例用作參數(shù)。這就是所謂的靜態(tài)方法械媒。

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()

輸出:

The barista position is hourly and is accepting applications.

barista對象現(xiàn)在有一個屬性—position痢虹,但是job中的所有其他屬性和方法都可以通過原型獲得。Object.create()有助于通過最小化重復(fù)來保持代碼的干爽主儡。

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)

輸出:

["boss", "secretary", "sales", "accountant"]

Object.keys 可用于迭代對象的鍵和值缀辩。

// Iterate through the keys
Object.keys(employees).forEach(key => {
  let value = employees[key]

  console.log(`${key}: ${value}`)
})

輸出:

boss: Michael
secretary: Pam
sales: Jim
accountant: Oscar</pre>

Object.keys 對于檢查對象的長度也很有用臭埋。

// Get the length of the keys
const length = Object.keys(employees).length

console.log(length)

輸出:

4

使用length屬性,我們可以計算employee的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)

輸出:

[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)

輸出:

[
["name", "Ubuntu"]
["version", 18.04]
["license", "Open Source"]
]

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

const entries = Object.entries(operatingSystem)
// Loop through the results
entries.forEach(entry => {
  let key = entry[0]
  let value = entry[1]
  console.log(`${key}: ${value}`)
})

輸出:

name: Ubuntu
version: 18.04
license: Open Source</pre>

Object.entries()方法方法將只返回對象實例本身的屬性,而不返回可能通過其原型繼承的任何屬性叠穆。

Object.assign()

Object.assign()用于將值從一個對象復(fù)制到另一個對象少漆。

我們可以創(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)

輸出:

{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}</pre>

也可以使用spread運算符(...)來完成相同的任務(wù)硼被。

// Merge the object with the spread operator
const character = { ...name, ...details }
console.log(character)

輸出:

{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}</pre>

對象文字中的這種擴展語法也稱為淺層克隆示损。

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)

輸出:

{username: "AzureDiamond", password: "hunter2"}

在本例中检访,我們試圖用******重寫密碼 hunter2,但是password屬性保持不變仔掸。我們還嘗試添加一個新屬性active脆贵,但是沒有添加。

isfrozen()可用來確定對象是否被凍結(jié)起暮,并返回一個布爾值卖氨。

Object.seal()

Object.seal()可防止將新屬性添加到對象,但允許修改現(xiàn)有屬性负懦。這種方法類似于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)

輸出:

{username: "AzureDiamond", password: "*******"}

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

Object.getPrototypeOf()

Object.getPrototypeOf()用于獲取[[Prototype]]對象的內(nèi)部隱藏焙矛,也可通過__proto__屬性訪問。

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

const employees = ['Ron', 'April', 'Andy', 'Leslie']
Object.getPrototypeOf(employees)</pre>

輸出:

[constructor: ?, concat: ?, find: ?, findIndex: ?, pop: ?, …]

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

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

輸出:

true

此方法可用于獲取有關(guān)對象的更多信息或確保它可以訪問另一個對象的原型。還有一種相關(guān)Object.setPrototypeOf()方法將一個原型添加到另一個對象闺金。建議您使用逾滥,Object.create()因為它更快,性能更高败匹。

結(jié)論

對象有許多有用的方法可以幫助我們修改寨昙,保護和迭代它們。在本教程中掀亩,我們回顧了如何創(chuàng)建和分配新對象舔哪,迭代對象的鍵和/或值,以及凍結(jié)或密封對象槽棍。
原文地址:如何在JavaScript中使用對象方法捉蚤?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末抬驴,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子缆巧,更是在濱河造成了極大的恐慌布持,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件陕悬,死亡現(xiàn)場離奇詭異题暖,居然都是意外死亡,警方通過查閱死者的電腦和手機墩莫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進店門芙委,熙熙樓的掌柜王于貴愁眉苦臉地迎上來逞敷,“玉大人狂秦,你說我怎么就攤上這事⊥凭瑁” “怎么了裂问?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長牛柒。 經(jīng)常有香客問我堪簿,道長,這世上最難降的妖魔是什么皮壁? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任椭更,我火速辦了婚禮,結(jié)果婚禮上蛾魄,老公的妹妹穿的比我還像新娘虑瀑。我一直安慰自己,他們只是感情好滴须,可當(dāng)我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布舌狗。 她就那樣靜靜地躺著,像睡著了一般扔水。 火紅的嫁衣襯著肌膚如雪痛侍。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天魔市,我揣著相機與錄音主届,去河邊找鬼。 笑死待德,一個胖子當(dāng)著我的面吹牛君丁,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播磅网,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼谈截,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起簸喂,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤毙死,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后喻鳄,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體扼倘,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年除呵,在試婚紗的時候發(fā)現(xiàn)自己被綠了再菊。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡颜曾,死狀恐怖纠拔,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情泛豪,我是刑警寧澤稠诲,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站诡曙,受9級特大地震影響臀叙,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜价卤,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一劝萤、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧慎璧,春花似錦床嫌、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至盖文,卻和暖如春嘱蛋,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背五续。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工洒敏, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人疙驾。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓凶伙,卻偏偏與公主長得像,于是被迫代替她去往敵國和親它碎。 傳聞我的和親對象是個殘疾皇子函荣,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,877評論 2 345