”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 掌握 JavaScript 对象指南

掌握 JavaScript 对象指南

发布于2024-08-27
浏览:609

A Guide to Master JavaScript-Objects

对象是 JavaScript 的基本组成部分,是存储和管理数据的支柱。对象是属性的集合,每个属性都是键(或名称)和值之间的关联。了解如何创建、操作和利用对象对于任何 JavaScript 开发人员都至关重要。在本文中,我们将探讨 JavaScript 中的各种对象函数,并提供详细的解释、示例和注释来帮助您掌握它们。

JavaScript 中的对象简介

在 JavaScript 中,对象用于存储数据集合和更复杂的实体。它们是使用对象文字或对象构造函数创建的。

// Using object literals
let person = {
    name: "John",
    age: 30,
    city: "New York"
};

// Using the Object constructor
let person = new Object();
person.name = "John";
person.age = 30;
person.city = "New York";

对象属性

  • Object.prototype:每个 JavaScript 对象都从其原型继承属性和方法。
let obj = {};
console.log(obj.__proto__ === Object.prototype); // Output: true

对象方法

1. 对象分配()

将所有可枚举自身属性的值从一个或多个源对象复制到目标对象。它返回目标对象。

let target = {a: 1};
let source = {b: 2, c: 3};
Object.assign(target, source);
console.log(target); // Output: {a: 1, b: 2, c: 3}

2. 对象.create()

使用指定的原型对象和属性创建一个新对象。

let person = {
    isHuman: false,
    printIntroduction: function() {
        console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
    }
};

let me = Object.create(person);
me.name = "Matthew";
me.isHuman = true;
me.printIntroduction(); // Output: My name is Matthew. Am I human? true

3.Object.defineProperties()

直接在对象上定义新属性或修改现有属性,返回该对象。

let obj = {};
Object.defineProperties(obj, {
    property1: {
        value: true,
        writable: true
    },
    property2: {
        value: "Hello",
        writable: false
    }
});
console.log(obj); // Output: { property1: true, property2: 'Hello' }

4.Object.defineProperty()

直接在对象上定义新属性或修改现有属性并返回对象。

let obj = {};
Object.defineProperty(obj, 'property1', {
    value: 42,
    writable: false
});
console.log(obj.property1); // Output: 42
obj.property1 = 77; // No error thrown, but the property is not writable
console.log(obj.property1); // Output: 42

5.Object.entries()

返回给定对象自己的可枚举字符串键控属性 [key, value] 对的数组。

let obj = {a: 1, b: 2, c: 3};
console.log(Object.entries(obj)); // Output: [['a', 1], ['b', 2], ['c', 3]]

6. 对象.freeze()

冻结对象。冻结的对象无法再更改;冻结对象可以防止向其中添加新属性、删除现有属性以及更改现有属性的值。

let obj = {prop: 42};
Object.freeze(obj);
obj.prop = 33; // Fails silently in non-strict mode
console.log(obj.prop); // Output: 42

7.Object.fromEntries()

将键值对列表转换为对象。

let entries = new Map([['foo', 'bar'], ['baz', 42]]);
let obj = Object.fromEntries(entries);
console.log(obj); // Output: { foo: 'bar', baz: 42 }

8.Object.getOwnPropertyDescriptor()

返回给定对象的自有属性(即直接存在于对象上而不是在对象的原型链中)的属性描述符。

let obj = {property1: 42};
let descriptor = Object.getOwnPropertyDescriptor(obj, 'property1');
console.log(descriptor);
// Output: { value: 42, writable: true, enumerable: true, configurable: true }

9.Object.getOwnPropertyDescriptors()

返回一个包含对象所有自有属性描述符的对象。

let obj = {property1: 42};
let descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
/* Output:
{
  property1: {
    value: 42,
    writable: true,
    enumerable: true,
    configurable: true
  }
}
*/

10.Object.getOwnPropertyNames()

返回直接在给定对象上找到的所有属性(包括不可枚举属性,使用 Symbol 的属性除外)的数组。

let obj = {a: 1, b: 2, c: 3};
let props = Object.getOwnPropertyNames(obj);
console.log(props); // Output: ['a', 'b', 'c']

11.Object.getOwnPropertySymbols()

返回直接在给定对象上找到的所有符号属性的数组。

let obj = {};
let sym = Symbol('foo');
obj[sym] = 'bar';
let symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // Output: [Symbol(foo)]

12.Object.getPrototypeOf()

返回指定对象的原型(即内部 [[Prototype]] 属性的值)。

let proto = {};
let obj = Object.create(proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

13. 对象.is()

判断两个值是否相同。

console.log(Object.is('foo', 'foo')); // Output: true
console.log(Object.is({}, {})); // Output: false

14.Object.isExtensible()

确定是否允许扩展对象。

let obj = {};
console.log(Object.isExtensible(obj)); // Output: true
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // Output: false

15. 对象.isFrozen()

确定对象是否被冻结。

let obj = {};
console.log(Object.isFrozen(obj)); // Output: false
Object.freeze(obj);
console.log(Object.isFrozen(obj)); // Output: true

16. 对象.isSealed()

确定对象是否被密封。

let obj = {};
console.log(Object.isSealed(obj)); // Output: false
Object.seal(obj);
console.log(Object.isSealed(obj)); // Output: true

17. 对象.keys()

返回给定对象自己的可枚举属性名称的数组,以与正常循环相同的顺序进行迭代。

let obj = {a: 1, b: 2, c: 3};
console.log(Object.keys(obj)); // Output: ['a', 'b', 'c']

18. 对象.preventExtensions()

防止对象的任何扩展。

let obj = {};
Object.preventExtensions(obj);
obj.newProp = 'test'; // Throws an error in strict mode
console.log(obj.newProp); // Output: undefined

19. 对象.seal()

密封对象,防止向其添加新属性并将所有现有属性标记为不可配置。只要当前属性的值可写,就仍然可以更改。

let obj = {property1: 42};
Object.seal(obj);
obj.property1 = 33;
delete obj.property1; // Throws an error in strict mode
console.log(obj.property1); // Output: 33

20. 对象.setPrototypeOf()

将指定对象的原型(即内部 [[Prototype]] 属性)设置为另一个对象或 null。

let proto = {};
let obj = {};
Object.setPrototypeOf(obj, proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

21. 对象.values()

返回给定对象自己的可枚举属性值的数组,其顺序与 for...in 循环提供的顺序相同。

let obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj)); // Output: [1, 2, 3]

实际例子

示例 1:克隆对象

使用 Object.assign() 克隆对象。

let obj = {a: 1, b: 2};
let clone = Object.assign({}, obj);
console.log(clone); // Output: {a: 1, b: 2}

示例 2:合并对象

使用Object.assign()合并对象。

let obj1 = {a: 1, b: 2};
let obj2 = {b: 3, c: 4};
let merged = Object.assign({},

 obj1, obj2);
console.log(merged); // Output: {a: 1, b: 3, c: 4}

示例 3:创建具有指定原型的对象

使用Object.create()创建具有指定原型的对象。

let proto = {greet: function() { console.log("Hello!"); }};
let obj = Object.create(proto);
obj.greet(); // Output: Hello!

示例 4:定义不可变属性

使用 Object.defineProperty() 定义不可变属性。

let obj = {};
Object.defineProperty(obj, 'immutableProp', {
    value: 42,
    writable: false
});
console.log(obj.immutableProp); // Output: 42
obj.immutableProp = 77; // Throws an error in strict mode
console.log(obj.immutableProp); // Output: 42

示例 5:将对象转换为数组

使用Object.entries()将对象转换为键值对数组。

let obj = {a: 1, b: 2, c: 3};
let entries = Object.entries(obj);
console.log(entries); // Output: [['a', 1], ['b', 2], ['c', 3]]

结论

对象是 JavaScript 的核心组件,提供了一种灵活的方式来管理和操作数据。通过掌握对象函数,您可以轻松执行复杂的操作,编写更高效、可维护的代码。这个综合指南涵盖了 JavaScript 中最重要的对象函数,并配有详细的示例和解释。练习使用这些函数并尝试不同的用例,以加深您的理解并提高您的编码技能。

版本声明 本文转载于:https://dev.to/imsushant12/a-guide-to-master-javascript-objects-362b?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 即使卸载后,VSCode 扩展也不会从文件系统中删除,我创建了一个解决方案!
    即使卸载后,VSCode 扩展也不会从文件系统中删除,我创建了一个解决方案!
    所以这是基于 vscode 的编辑器的问题。即使您卸载了扩展程序,它也会保留在文件系统中,并随着时间的推移堵塞您的系统。我创建了一个简单的解决方案。运行此 python 脚本将删除 vscode 上未安装的扩展。 它适用于 VS Code、VS Code Insiders,也适用于 VSCodiu...
    编程 发布于2024-11-06
  • 通过 GitHub Actions 按计划更新网站内容
    通过 GitHub Actions 按计划更新网站内容
    我想分享我构建一个自我可持续的内容管理系统的旅程,该系统不需要传统意义上的内容数据库。 问题 该网站的内容(博客文章和书签)存储在 Notion 数据库中: 带书签的数据库 –  Notion UI 我试图解决的问题是不必在添加每个书签后手动部署网站。最重要的是 - 保持托管尽可能便...
    编程 发布于2024-11-06
  • 如何在 Laravel 5 应用程序的共享托管环境中清除缓存?
    如何在 Laravel 5 应用程序的共享托管环境中清除缓存?
    如何从 Laravel 5 中的共享托管服务器清除缓存清除缓存对于维护 Laravel 应用程序的性能和效率至关重要。但是,在您可能无法访问 CLI 的共享托管环境中,清除缓存可能是一个挑战。清除视图缓存的解决方法在这种情况下,您可以通过在 CLI 之外调用 Artisan 命令来解决此问题。要清除...
    编程 发布于2024-11-06
  • 如何加速 Matplotlib 绘图以提高性能?
    如何加速 Matplotlib 绘图以提高性能?
    为什么 Matplotlib 这么慢?在评估 Python 绘图库时,考虑性能很重要。 Matplotlib 是一个广泛使用的库,它看起来可能很缓慢,引发了关于加快速度或探索替代选项的问题。让我们深入研究这个问题并探索可能的解决方案。提供的示例展示了具有多个子图和数据更新的图。使用 Matplotl...
    编程 发布于2024-11-06
  • 使用画布调整图像大小时如何克服锯齿状边缘和模糊结果?
    使用画布调整图像大小时如何克服锯齿状边缘和模糊结果?
    解决在 JavaScript 中使用 Canvas 调整图像大小时的平滑问题在 JavaScript 中使用 Canvas 调整图像大小有时会导致明显的锯齿状边缘或模糊。为了实现平滑的调整大小,可以采用一种称为向下步进的技术。在大多数浏览器中,默认情况下使用线性插值来调整大小。双三次插值可产生更平滑...
    编程 发布于2024-11-06
  • 如何解决 MySQL C# 中的文本编码问题?
    如何解决 MySQL C# 中的文本编码问题?
    修复 MySQL C# 中的文本编码问题使用实体框架在 C# 中处理 MySQL 数据库时,用户可能会遇到文本编码问题,特别是带有特殊字符,例如“ë”,渲染不正确。本文探讨了解决此常见问题的最合适的解决方案。要纠正编码问题,必须执行以下操作:验证排序规则设置: 确保所涉及的数据库或表的排序规则与 U...
    编程 发布于2024-11-06
  • 如何将美丽搜索与 Node.js 集成
    如何将美丽搜索与 Node.js 集成
    作为 Node.js 开发人员,构建能够提供快速且准确的搜索结果的应用程序非常重要。用户期望立即得到相关的响应,但实现起来可能具有挑战性,特别是在处理大型数据集时。 这就是美丽搜索的用武之地——一个为轻松满足这些需求而构建的搜索引擎。 什么是美丽搜索? Meilisearch 是一个...
    编程 发布于2024-11-06
  • 并行 JavaScript 机
    并行 JavaScript 机
    作者:Vladas Saulis,PE Prodata,克莱佩达,立陶宛 2024 年 5 月 18 日 抽象的 本文提出了一种新的编程模型,可以以简单且自动平衡的方式利用多核 CPU 系统。该模型还提出了一种更简单的编程范例,用于在大多数大规模并行计算领域(例如天气预报、核物理、搜索引擎等)开发并...
    编程 发布于2024-11-06
  • 推荐项目:人事管理系统数据库设置
    推荐项目:人事管理系统数据库设置
    LabEx 的这个综合项目提供了深入研究数据库管理世界的宝贵机会,重点是人事管理系统的创建和实施。无论您是新手数据库管理员还是经验丰富的开发人员,这种实践经验都将为您提供必要的技能,以便在关系数据库环境中有效管理和操作数据。 深入了解数据库基础知识 该项目首先引导您完成使用 sudo...
    编程 发布于2024-11-06
  • Python 中实例方法和类方法有什么区别?
    Python 中实例方法和类方法有什么区别?
    类与实例方法Python 的 PEP 8 风格指南建议使用“self”作为实例方法的第一个参数,使用“cls”作为类方法的第一个参数。理解这两类方法之间的区别对于有效的面向对象编程至关重要。实例方法实例方法与类的特定实例相关联。它们对实例的数据进行操作,并且通常接收“self”作为它们的第一个参数。...
    编程 发布于2024-11-06
  • 将 AdoptiumJDK 源代码加载到 Eclipse IDE 中
    将 AdoptiumJDK 源代码加载到 Eclipse IDE 中
    AdoptiumJDK 的安装程序中没有内置源代码文件,如果您需要通过 Eclipse IDE 检查如何使用任何本机 JDK 方法,这是不可能的。 按照以下步骤在Eclipse IDE中加载源代码: 访问 AdoptiumJDK 官方网站并按所需的 JDK 版本进行过滤,在我的例子中是 11.0.2...
    编程 发布于2024-11-06
  • 绝对定位与相对定位:为什么它们的行为如此不同?
    绝对定位与相对定位:为什么它们的行为如此不同?
    了解绝对位置与相对位置:宽度、高度等处理网页上的元素定位时,了解这些概念绝对位置与相对位置的区别至关重要。让我们深入探讨经常引起疑问的四个关键点:1。相对宽度与绝对宽度为什么相对定位的div自动占据100%宽度,而绝对定位的div只占据内容宽度?原因是设置位置:absolute 从文档结构的正常流程...
    编程 发布于2024-11-06
  • Python、Node js 和 PHP 中用于验证码识别的顶级模块
    Python、Node js 和 PHP 中用于验证码识别的顶级模块
    在我们的自动化时代,大多数解决方案都可以免费找到,我现在不是在谈论解决数学问题,而是稍微复杂的任务,例如数据解析,和我们的例子一样,还有 recapcha 识别。但如何找到一个好的模块呢?毕竟,随着技术的发展,每个人都得到了它,无论是认真的开发人员还是彻头彻尾的骗子。 我分析了验证码识别模块的市场,...
    编程 发布于2024-11-06
  • 以下是一些标题选项,重点关注问题格式和核心内容:

**选项 1(直接且简洁):**

* **如何在 PHP 中高效地循环多维数组?**

**选项2
    以下是一些标题选项,重点关注问题格式和核心内容: **选项 1(直接且简洁):** * **如何在 PHP 中高效地循环多维数组?** **选项2
    在 PHP 中循环多维数组多维数组可能是解析的一个挑战,特别是在处理不同深度级别和非顺序索引时。考虑一个保存事件信息的数组,其中可以包含多个艺术家及其相应的链接,如下所示:array(2) { [1]=> array(3) { ["eventID"]...
    编程 发布于2024-11-06
  • 通过 Linting 提高代码质量
    通过 Linting 提高代码质量
    Whenever I start a new project, one of the first things I do is put in place a code linter. For the uninitiated, linters analyze your project and call...
    编程 发布于2024-11-06

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3