在 JavaScript 中建立物件列表

Muhammad Muzammil Hussain 2023年1月3日 2022年5月10日
在 JavaScript 中建立物件列表

本文將演示在 JavaScript 中建立物件列表及其屬性和方法。

在 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 中的物件屬性

簡單來說,物件就是屬性的集合。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 中的物件方法

簡單來說,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 Object