更多课程 选择中心


Web培训

400-996-5531

Web培训

15个JavaScript对象基础知识汇总


在今天的文章中,我们将一起来了解JavaScript中有关对象的一些最重要的知识概念。

1、对象字面量是创建对象的最简单方式

创建对象的最简单方法是使用对象字面量。我们在花括号{}中定义了一组属性,用逗号分隔。下面是一个例子。

constgame={

name:'Fornite',

developer:'EpicGames'

};

前一个对象有两个属性。第一个属性具有键名和值Fornite。

2、对象是属性的动态集合

事实上,对象是道具的动态集合。创建对象后,我们可以从中添加、编辑或删除属性。下面是在前一个游戏对象中添加和删除year属性的示例。

game.year=2017;

deletegame.year;

3、可以使用点和括号符号访问属性

当键是有效标识符时,可以使用点符号访问属性。

console.log(game.name)

当键不是有效标识符时,我们需要使用括号表示法。

console.log(game["name"])

4、键转换为字符串

键只是字符串,当非字符串值用作键时,它们将转换为字符串。看看当我尝试使用另一个对象作为键时会发生什么。

constdeveloperKey={

toString(){

return'developer'

}

}

console.log(game[developerKey]);

//EpicGames

当developerKey用作键时,它首先使用toString方法转换为字符串,然后使用结果'developer'字符串键来检索值。前面的代码给出了与game['developer']相同的结果。

5、对象继承自其他对象

JavaScript中,对象继承自其他对象。对象有一个名为__proto__的隐藏属性,指向它们的原型。所有对象都继承自全局Object.prototype。

game.__proto__===Object.prototype;

//true

即使我们没有定义这样的方法,游戏对象也有类似toString或toLocaleString的属性。它们继承自Object.prototype对象。

console.log(game.toString);

//ƒtoString(){

[nativecode]

}

console.log(game.toLocaleString);

//ƒtoLocaleString(){

[nativecode]

}

Object.create()接受一个原型对象并创建一个指向它的新对象。

constprototypeObj={};constobj=Object.create(prototypeObj);console.log(obj.__proto__===prototypeObj);//true

6、更改是在当前对象上完成的,而不是在它的原型上

请记住,更改是在当前对象上完成的,而不是在其原型上。原型仅用于阅读。添加、编辑或删除对当前对象执行的属性时。例如,Object.prototype具有toString属性,考虑继承自Object.prototype的空对象。以下示例中的delete运算符不执行任何操作,它不会从原型中删除toString属性。

constobj={};console.log(obj.toString);//ƒtoString(){[nativecode]}deleteobj.toStringconsole.log(obj.toString);//ƒtoString(){[nativecode]}

当我们更改toString属性时,会在当前对象中添加一个新属性,原型不会更改。此时,当前对象和原型都有一个同名的属性,使用当前对象中的那个。

constobj={};obj.toString=function(){};

7、我们可以创建没有原型的对象

Object.create(null)创建一个没有原型的对象。

constobj=Object.create(null);

console.log(obj.__proto__===undefined);

//true

8、类是原型系统之上的糖语法

class关键字创造了一种基于类的语言的错觉,但事实并非如此。JavaScript中的类只是原型系统上的一种糖语法。

classGame{

constructor(name){

this.name=name;

}

}

constgame=newGame('Fornite');

console.log(game.__proto__===Game.prototype);

9、对象可以存储其他对象

属性的值可以是任何类型。属性可以存储对象。考虑下一个例子,其中developer是一个对象而不是一个字符串。

constgame={name:'Fornite',developer:{name:'EpicGames',founder:'TimSweeney'}};

10、对象可以存储功能

属性值可以是任何类型,包括函数。

以下对象具有存储函数的toString属性。

constgame={

name:'Fornite',toString:function(){

returnthis.name;

}

}

;console.log(game.toString());

//Fornite

当函数存储在对象上时,它可以用作方法。请注意,在方法中,我们可以使用this关键字来访问关联对象的属性。

11、物体可以被冻结

默认情况下,对象是动态的,这意味着我们可以在创建后添加、编辑或删除它们的属性。

尽管如此,我们可以使用Object.freeze()实用程序在创建时冻结这样的对象。之后,我们无法添加、编辑或删除其中的属性。

查看下一个冻结的对象。

constgame=Object.freeze({

name:'Fornite',

});

//game.developer='EpicGames';

//Cannotaddpropertydeveloper,objectisnotextensiblegame.name="Valorant";

//Cannotassigntoreadonlyproperty'name'ofobject

12、原型可以冻结

原型也可以冻结。

当原型被冻结时,从它继承的对象不能具有同名的新属性。考虑以下冻结原型。

constprototype=Object.freeze({

toString:function(){

returnthis.name;

}});

因为原型被冻结并且具有toString属性,我们不能在从它继承的新对象上定义具有相同名称的属性。

constgame=Object.create(prototype);game.name='Fornite';game.toString=function(){return`Game:${this.name}`;};//Cannotassigntoreadonlyproperty'toString'ofobject

13、Object.keys、Object.values和Object.entries帮助检索拥有的键和值

对象有两种属性,拥有的属性是在对象本身上定义的。例如name和developer是我们游戏对象的所有属性。继承的属性是来自原型的属性。例如,toString是所有对象的继承属性。

我们可以使用Object.keys()实用程序获取对象的所有拥有键。

constgame={

name:'Fornite',developer:'EpiGames'

};

console.log(Object.keys(game));

//["name","developer"]

以类似的方式,我们可以使用Object.values()获取所有值。

console.log(Object.values(game));

//["Fornite","EpiGames"]

Object.entries()检索包含所有拥有的[key,value]对的数组。

console.log(Object.entries(game));

//[

//["name","Fornite"],

//["developer","EpiGames"]//]

Object.keys、Object.values和Object.entries都返回一个数组。一旦我们有了它,我们就可以开始使用数组方法了。

14、使用对象模拟数组

是的,数组是使用对象模拟的。考虑以下数组。

constgames=[{

name:'CandyCrush',developer:'King'

},

{

name:'AngryBirds',developer:'RovioEntertainment'

}];

它使用类似于下面的对象进行模拟。

{

'0':{

name:"CandyCrush",developer:"King"

},

'1':

{

name:"AngryBirds",

developer:"RovioEntertainment"

}}

这就是为什么我们可以使用数字索引和字符串来访问相同的元素。请记住,非字符串键被转换为字符串,因此,数组索引被转换为字符串。

console.log(games[1]===games['1']);//true

15、对象是哈希映射

JavaScript中的对象类似于其他语言中称为映射或哈希表的对象,密钥的访问时间为O(1)。

O(1)意味着无论地图上的数据量如何,访问密钥都需要恒定的时间。

O(n)意味着它花费的时间与列表的大小成线性关系。列表越大,访问时间越大。

这就是为什么你可能会看到对象用作映射来搜索唯一键。

constgamesMap={

1:{

name:'Fornite',developer:'EpicGames'

},

2:{

name:'CandyCrush',developer:'King'

},

3:{

name:'AngryBirds',developer:'RovioEntertainment'

}}

我们现在可以使用gamesMap地图在恒定时间O(1)内通过id获取游戏对象,而无需遍历列表。

总结

以上这些就是你需要了解的有关JavaScript对象的一些最重要的知识概念,希望这些内容对你有所帮助,如果你觉得有用的话,请不要忘记点赞我,关注我,并将它与你的开发者朋友一起来分享这篇文章,也许能够帮助到他。

预约申请免费试听课

填写下面表单即可预约申请免费试听! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:拿高薪的Web前端都是怎么学习的?
下一篇:11个杀手级JavaScript单行代码

前端样式框架用什么技术?

5种流行的前端设计技术是什么?

Web前端开发需要掌握什么?

Web前端好学吗需要天赋吗?

Copyright © 2023 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省