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

JavaScript 中,对象是 键/值 对的集合。值可以包含属性和方法,并且可以包含所有其他 JavaScript 数据类型,例如字符串,数字和布尔值。本教程将介绍重要的内置对象方法,下面的每个部分都涉及特定方法并提供使用示例。

介绍

JavaScript 中,对象是 键/值 对的集合。值可以包含属性和方法,并且可以包含所有其他 JavaScript 数据类型,例如字符串,数字和布尔值。

JavaScript中的所有对象都来自父 Object 的构造函数。Object 为我们提供了很多实用的内置方法,并且可以在单个对象中直接使用。不同于 数组的原型方法 例如 sort() 和 reverse() 只能被数组实例使用,对象方法直接来自 Object 构造函数,并使用对象实例作为参数。这称为静态方法。

本教程将介绍重要的内置对象方法,下面的每个部分都涉及特定方法并提供使用示例。

前提

为了充分利用本教程,您应该熟悉创建,修改和使用对象,您可以在“ 了解JavaScript中的对象 ”一文中查看这些对象。

有关JavaScript的其他指导,您可以查看“ JavaScript 如何编码 ”系列。

Object.create()

Object.create() 方法用于创建一个新对象,并将其链接到现有的对象原型。

我们可以创建一个job对象实例,并将其扩展为更具体的对象。

// Initialize an object with properties and methods  

constjob = {  

position: 'cashier',  

type: 'hourly',  

isAvailable: true,  

showDetails() {  

constaccepting = 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  

constbarista = 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  

constemployees = {  

boss: 'Michael',  

secretary: 'Pam',  

sales: 'Jim',  

accountant: 'Oscar'  

};  

// Get the keys of the object  

constkeys = Object.keys(employees);  

console.log(keys); 

Output  

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

Object.keys() 还可用于迭代对象的键和值。

// Iterate through the keys  

Object.keys(employees).forEach(key => {  

letvalue = 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  

constlength = Object.keys(employees).length;  

console.log(length); 

Output  

使用该 length 属性,我们能够计算employees包含4个自有属性。

Object.values()

Object.values() 创建一个包含对象值的数组。

// Initialize an object  

constsession = {  

id: 1,  

time: `26-July-2018`,  

device: 'mobile',  

browser: 'Chrome'  

};  

// Get all values of the object  

constvalues = Object.values(session);  

console.log(values); 

Output  

[1, "26-July-2018", "mobile", "Chrome"] 

Object.keys()和Object.values()允许您从对象返回数据。

Object.entries()

Object.entries() 创建对象的键/值对的嵌套数组。

// Initialize an object  

constoperatingSystem = {  

name: 'Ubuntu',  

version: 18.04,  

license: 'Open Source'  

};  

// Get the object key/value pairs  

constentries = 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  

constname = {  

firstName: 'Philip',  

lastName: 'Fry'  

};  

// Initialize another object  

constdetails = {  

job: 'Delivery Boy',  

employer: 'Planet Express'  

};  

// Merge the objects  

constcharacter = 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  

constname = {  

firstName: 'Philip',  

lastName: 'Fry'  

};  

// Initialize another object  

constdetails = {  

job: 'Delivery Boy',  

employer: 'Planet Express'  

};  

// Merge the object with the spread operator  

constcharacter = {...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  

constuser = {  

username: 'AzureDiamond',  

password: 'hunter2'  

};  

// Freeze the object  

constnewUser = 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  

constuser = {  

username: 'AzureDiamond',  

password: 'hunter2'  

};  

// Seal the object  

constnewUser = 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+】,本群专用于学习交流技术、分享面试机会,拒绝广告,我也会在群内不定期答题、探讨。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,001评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,210评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,874评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,001评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,022评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,005评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,929评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,742评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,193评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,305评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,911评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2 352

推荐阅读更多精彩内容