15 个你应该知道的JavaScript 对象基础知识
admin
2024-04-24 07:29:11
0

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

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

const game = {
name: ‘Fornite’,
developer: ‘Epic Games’
};
前一个对象有两个属性。第一个属性具有键名和值 Fornite。

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

事实上,对象是道具的动态集合。

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

game.year = 2017;
delete game.year;
3.可以使用点和括号符号访问属性

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

console.log(game.name)
当键不是有效标识符时,我们需要使用括号表示法。

console.log(game[“name”])
4.键转换为字符串

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

const developerKey = {
toString(){
return ‘developer’
}
}
console.log(game[developerKey]);
//Epic Games
当 developerKey 用作键时,它首先使用 toString 方法转换为字符串,然后使用结果 ‘developer’ 字符串键来检索值。前面的代码给出了与 game[‘developer’] 相同的结果。

5.对象继承自其他对象

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

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

console.log(game.toString);
//ƒ toString() { [native code] }
console.log(game.toLocaleString);
//ƒ toLocaleString() { [native code] }
Object.create() 接受一个原型对象并创建一个指向它的新对象。

const prototypeObj = {};
const obj = Object.create(prototypeObj);
console.log(obj.proto === prototypeObj);
//true
6.更改是在当前对象上完成的,而不是在它的原型上

请记住,更改是在当前对象上完成的,而不是在其原型上。原型仅用于阅读。

添加、编辑或删除对当前对象执行的属性时。

例如,Object.prototype 具有 toString 属性,考虑继承自 Object.prototype 的空对象。以下示例中的 delete 运算符不执行任何操作,它不会从原型中删除 toString 属性。

const obj = {};
console.log(obj.toString);
//ƒ toString() { [native code] }
delete obj.toString
console.log(obj.toString);
//ƒ toString() { [native code] }
当我们更改 toString 属性时,会在当前对象中添加一个新属性,原型不会更改。此时,当前对象和原型都有一个同名的属性,使用当前对象中的那个。

const obj = {};
obj.toString = function(){};
7.我们可以创建没有原型的对象

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

const obj = Object.create(null);
console.log(obj.proto === undefined);
//true
8.类是原型系统之上的糖语法

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

class Game{
constructor(name){
this.name = name;
}
}
const game = new Game(‘Fornite’);
console.log(game.proto === Game.prototype);
9.对象可以存储其他对象

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

const game = {
name : ‘Fornite’,
developer: {
name: ‘Epic Games’,
founder: ‘Tim Sweeney’
}
};
10.对象可以存储功能

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

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

const game = {
name : ‘Fornite’,
toString: function(){
return this.name;
}
};
console.log(game.toString());
//Fornite
当函数存储在对象上时,它可以用作方法。请注意,在方法中,我们可以使用 this 关键字来访问关联对象的属性。

11.物体可以被冻结

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

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

查看下一个冻结的对象。

const game = Object.freeze({
name: ‘Fornite’,
});
//game.developer = ‘Epic Games’;
//Cannot add property developer, object is not extensible
game.name = “Valorant”;
//Cannot assign to read only property ‘name’ of object
12.原型可以冻结

原型也可以冻结。

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

const prototype = Object.freeze({
toString : function (){
return this.name;
}
});
因为原型被冻结并且具有 toString 属性,我们不能在从它继承的新对象上定义具有相同名称的属性。

const game = Object.create(prototype);
game.name = ‘Fornite’;
game.toString = function (){
return Game: ${this.name};
};
//Cannot assign to read only property ‘toString’ of object
13.Object.keys、Object.values 和 Object.entries 帮助检索拥有的键和值

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

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

const game = {
name: ‘Fornite’,
developer: ‘Epi Games’
};
console.log(Object.keys(game));
//[“name”, “developer”]
以类似的方式,我们可以使用 Object.values() 获取所有值。

console.log(Object.values(game));
//[“Fornite”, “Epi Games”]
Object.entries() 检索包含所有拥有的 [key, value] 对的数组。

console.log(Object.entries(game));
//[
//[“name”, “Fornite”],
//[“developer”, “Epi Games”]
//]
Object.keys、Object.values 和 Object.entries 都返回一个数组。一旦我们有了它,我们就可以开始使用数组方法了。

14.使用对象模拟数组

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

const games = [
{name: ‘Candy Crush’, developer: ‘King’},
{name: ‘Angry Birds’, developer: ’ Rovio Entertainment’}
];
它使用类似于下面的对象进行模拟。

{
‘0’ : {name: “Candy Crush”, developer: “King”},
‘1’ : {name: “Angry Birds”, developer: " Rovio Entertainment"}
}
这就是为什么我们可以使用数字索引和字符串来访问相同的元素。请记住,非字符串键被转换为字符串,因此,数组索引被转换为字符串。

console.log(games[1] === games[‘1’]);
//true
15.对象是哈希映射

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

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

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

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

const gamesMap = {
1 : {name: ‘Fornite’, developer: ‘Epic Games’},
2 : {name: ‘Candy Crush’, developer: ‘King’},
3 : {name: ‘Angry Birds’, developer: ’ Rovio Entertainment’}
}
我们现在可以使用 gamesMap 地图在恒定时间 O(1) 内通过 id 获取游戏对象,而无需遍历列表

相关内容

热门资讯

“两连板”上海建工:科卡金矿资... 9月15日,上海建工集团股份有限公司发布股票交易异常波动公告称,公司股票于2025年9月11日、9月...
21独家|浦发信用卡被集中盗刷... “人在家中坐,钱往卡外飞。”作者 | 吴霜编辑 | 方海平近日,多位浦发银行信用卡用户在社交媒体上发...
优迅股份“闪电”冲刺科创板:十... 21世纪经济报道记者 彭新9月19日,厦门优迅芯片股份有限公司(简称“优迅股份”)将“闯关”科创板。...
上市不到三个月,股价暴涨16倍... 红星资本局9月15日消息,今日港股市场创新药板块再次见证历史。药捷安康-B(02617.HK)开盘后...
中青旅:上半年营业收入增长主要... 9月15日,中青旅控股股份有限公司(中青旅,600138.SH)董事、副总裁(分管财务工作)、董事会...
百亿“K金之王”,赴港IPO了... 国际金价持续攀升并突破历史纪录之际,百亿“K金之王”赴港IPO了。9月12日,广东潮宏基实业股份有限...
郑刚悬赏5000万下场手撕罗永... 从小甜甜到牛夫人,郑刚和罗永浩已打5个官司。作者 | 刘钦文编辑丨高岩来源 | 野马财经一场私人晚餐...
听听CEO如何理解菜鸟 听听C... 出品|虎嗅黄青春频道作者|商业消费主笔黄青春题图|视觉中国菜鸟 CEO 万霖鲜少站在聚光灯下,上周三...
十年间实现翻番,2024年中国... 6月6日消息,在国务院新闻办今天(6月6日)举行的新闻发布会上,商务部有关负责人介绍,2024年中国...
甲骨文和Open AI联合吹的... 文 / 二风来源 / 节点财经最近几天,华尔街的交易员们应该见证了科技史上最令人“瞠目”的时刻之一。...