在 JavaScript 中创建对象列表

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中创建对象列表

作者：迹忆客最近更新：2023/03/11 浏览次数：

本文将演示在 JavaScript 中创建对象列表及其属性和方法。

JavaScript 是一种面向对象的编程语言，在任何面向对象的编程语言中，一切都被视为对象。

对象是具有状态和行为的现实世界实体 - 例如，汽车。汽车具有状态（颜色）和行为（速度、加速度等）。

通常，一个对象伴随着其他编程语言中的一个类，而类定义了一个对象的蓝图。但是 JavaScript 不需要类来创建对象，因为它纯粹基于模板。

语法：

const object = {
    // object's different member's names & values
    name1: value1,
    name2: value2,
    name3: value3
};

让我们看一个简单的 JavaScript 演示。

const employee = {
    id: 541,
    company: ['Delft', 'Stack'],
    details: function() {
        document.write('I work for ${this.name[0]} ${this.name[1]} with employee id ${this.id}');
        // I work for DelftStack with employee id 541
    }
};

上述员工对象的前两个成员是数据项，我们通常称它们为对象的属性/状态。第三项是允许对象对数据做某事的函数，我们通常称它为对象的方法/行为。

简单来说，对象就是属性的集合。JavaScript 对象中的数据项或值称为其属性。

除了只读属性，我们还可以添加、更新和删除属性。

在下面的代码中，我们解释了访问对象属性的不同方法。

var student = {
    rollNo: "BSE541",
    name: "Joe Burns",
    age: 23,
    degree: "Computer Science",
};

student.age;     // accessing object using object.property
student[age];    // accessing object using object[property]
x = "age";
student[x];      // using variable to access object's property

简单来说，JavaScript 对象可以执行的操作称为方法。

var student = {
   rollNo: "BSE541",
   name: "Joe Burns",
   age: 23,
   degree: "Computer Science",
};

document.getElementById("demo").innerHTML = "Hi " + student.name;
// print "Hi Joe Burns"

下面是演示 JavaScript 对象属性和方法的完整 HTML 示例。

<!DOCTYPE html>
<html>
    <body>
        <h2>JavaScript Objects Example</h2>
        <p id="object"> </p>
        <script>
            const company = {
                name:"DelftStack",
                id:571,
                location:"USA"
            };
            document.getElementById("object").innerHTML = company.name + " is a technology company registered in the " + company.location + " with id: " + company.id;
        </script>
    </body>
</html>

输出：

JavaScript Objects Example
DelftStack is a technology company registered in the USA with id: 571

上一篇：使用 JavaScript 打开本地文本文件

下一篇：在 JavaScript 中实例化文件对象

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

在 Angular 中上传文件

发布时间：2023/04/14 浏览次数：71 分类：Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条，并在上传完成时显示文件上传完成消息。

Angular 中所有 Mat 图标的列表

发布时间：2023/04/14 浏览次数：91 分类：Angular

本教程演示了在哪里可以找到 Angular 中所有 Mat 图标的列表以及如何使用它们。

Angular 2 中的复选框双向数据绑定

发布时间：2023/04/14 浏览次数：139 分类：Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJS 中重新加载页面

发布时间：2023/04/14 浏览次数：142 分类：Angular

我们可以借助 windows.location.reload 和 reload 方法在 AngularJS 中重新加载页面。

在 AngularJs 中设置 Select From Typescript 的默认选项值

发布时间：2023/04/14 浏览次数：78 分类：Angular

本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。

在 AngularJS 中启用 HTML5 模式

发布时间：2023/04/14 浏览次数：150 分类：Angular

本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。

在 AngularJs 中加载 spinner

发布时间：2023/04/14 浏览次数：107 分类：Angular

我们将介绍如何在请求加载时添加加载 spinner，并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间：2023/04/14 浏览次数：78 分类：Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时，我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间：2023/04/14 浏览次数：104 分类：Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

迹忆客专注技术分享