15 个你应该知道的JavaScript 对象基础知识

2023-11-04

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

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 获取游戏对象,而无需遍历列表。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

15 个你应该知道的JavaScript 对象基础知识 的相关文章

  • 在版本 4.4.6 中禁用 ckeditor 上下文菜单

    我在 Rails4 项目中使用 ckeditor 我尝试了 ckeditor gem 和 ckeditor rails gem 来提供 ckeditor 库 这里有多个帖子 人们希望删除 ckeditor 上下文菜单 以便可以显示本机浏览器
  • 固定 div 位于居中 div 旁边

    我有一个网页 其中有可滚动的内容 此内容包含在 content 内 位于页面的中心 现在我希望导航栏出现在内容左侧 50 像素处 该栏应具有固定位置 不应滚动 这是我到目前为止所尝试过的 nav position fixed top 50
  • 如何在React Native Android中获取响应头?

    您好 我想在获取 POST 请求后获取响应标头 我尝试调试看看里面有什么response with console log response 我可以从以下位置获取响应机构responseData但我不知道如何获取标题 我想同时获得标题和正文
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • 合并 2 个大型 CSS 文件的有效方法

    我正在寻找一个可以合并 2 个大型 CSS 文件的工具 到目前为止我尝试过的所有方法 例如CSSMerge 都没有成功 其中一些只是随机删除属性 其他人则因 webkit 和 moz 等非标准属性而窒息 并给我错误 我还需要保留每条规则大小
  • -webkit-box-shadow 与 QtWebKit 模糊?

    当时有什么方法可以实现 webkit box shadow 的工作模糊吗 看完这篇评论错误报告 https bugs webkit org show bug cgi id 23291 我认识到这仍然是一个问题 尽管错误报告被标记为RESOL
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么
  • 使用 Google 日历源时如何禁用 FullCalendar 中的活动链接?

    我正在使用 FullCalendar 库从 Google 日历加载日历中的事件 不幸的是 事件添加到日历后 它们是可点击的 当您点击该活动时 您会自动重定向到 Google 日历页面以查看该特定活动 或者如果您有足够的访问权限 则可以直接对
  • JavaScript eval("{}") 返回行为?

    根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a
  • Vaadin 12 将对象传递给 JavaScript 函数:无法对类进行编码

    Vaadin 12 Kotlin 项目 In my myPage html我有JavaScript myObject redirectToCheckout sessionId 1111 2222 所以我需要调用javaScript函数red
  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden
  • 用于选择特定 div 中具有特定类的锚元素的 jQuery 选择器是什么

    我有一些这样的代码 我想选择每个 a 带有类的标签status在 div 中foo div a class status a div 你可以这样做 foo find status a
  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J
  • Flot 库将 y 轴设置为最小值 0 和最大值 24

    如何将 y 轴设置在 0 到 24 的范围内 这是我的代码 j plot j placeholder d1 xaxis mode time min new Date 2010 11 01 getTime max new Date 2011
  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐