programming javascript

Javascript này trong đối tượng lồng nhau

Trong bài viết này, tôi sẽ thảo luận về các thuộc tính lồng đối tượng JavaScript với các ví dụ. Vui lòng đọc bài viết trước của chúng tôi, nơi chúng tôi đã thảo luận về Thuộc tính đối tượng JavaScript. Ở cuối bài viết này, bạn sẽ hiểu mọi thứ về JavaScript Object Nested Properties

Thuộc tính lồng nhau của một đối tượng trong JavaScript

Cho đến nay, chúng ta đã thấy nhiều cách khác nhau để truy cập các thuộc tính mà tôi. e

Ký hiệu dấu chấm. tên đối tượng. tài sản; //người. họ tên
Ký hiệu dấu ngoặc. objectName[“property”] //person[“firstName”]
Thuộc tính được tính toán. Tên đối tượng[biểu thức] //z=”tuổi”; . Chúng ta sẽ tìm hiểu về computed property trong bài tới.

Hiểu các thuộc tính lồng nhau của đối tượng JavaScript

Bây giờ chúng ta sẽ xem các thuộc tính Nested của một đối tượng. Hãy cho chúng tôi hiểu Nested properties là gì, nó được tạo ra như thế nào và làm thế nào chúng tôi có thể truy cập nó?

Các thuộc tính lồng nhau của một đối tượng là các thuộc tính bên trong các thuộc tính. Một đối tượng có thể chứa một đối tượng khác làm thuộc tính. chúng ta có thể phân bổ một đối tượng khác làm thuộc tính của một đối tượng. Nói cách khác, một đối tượng có thể có thuộc tính là một đối tượng khác

Giá trị thuộc tính của đối tượng có thể là đối tượng khác. Chúng ta có thể truy cập các thuộc tính lồng nhau của một đối tượng hoặc các đối tượng lồng nhau bằng ký hiệu dấu chấm [. ] hoặc ký hiệu ngoặc []. Các thuộc tính lồng nhau của một đối tượng có thể được truy cập bằng cách xâu chuỗi các tên thuộc tính hoặc khóa theo đúng trình tự.

Ví dụ. Đối tượng JavaScript, truy cập Thuộc tính lồng nhau của đối tượng bằng cách sử dụng ký hiệu dấu chấm & dấu ngoặc vuông


     JavaScript Objects, access Nested Properties of an object using dot & bracket notation example


    
        //Nested properties
        var person = {
            firstName: "Elon",
            lastName: "Musk",
            age: 25,
            address: {
                id: 1,
                country: "UK"
            }
        };

        console.log["person object: ", person]
        console.log["person object length: ", Object.getOwnPropertyNames[person].length]
        console.log["person Object literal type? : ", typeof person];// object

        //display data
        console.log["Person object Nested Properties - with dot notation-->Property id value is: " + person.address.id];
        console.log["Person object Nested Properties - with dot notation-->Property country value is: " + person.address.country];

        console.log["Person object Nested Properties - with bracket notation-->Property id value is: " + person["address"]["id"]];
        console.log["Person object Nested Properties - with bracket notation-->Property country value is: " + person["address"]["country"]];

        console.log["Person object Nested Properties - with dot and bracket notation-->Property id value is: " + person.address["id"]];
        console.log["Person object Nested Properties - with bracket and dot notation-->Property country value is: " + person["address"].country];
        console.log["Person object Nested Properties -->Property id length is: " + person.address.id.length]; //1

Bây giờ hãy chạy đoạn mã trên và mở công cụ dành cho nhà phát triển trình duyệt và xem tab Bảng điều khiển và bạn có thể thấy đầu ra sau

Trong ví dụ trên, chúng ta có thể thấy rằng id và country là thuộc tính của đối tượng địa chỉ, đồng thời cũng là thuộc tính của đối tượng người

tôi. e. người [đối tượng] => địa chỉ [thuộc tính] => id [thuộc tính lồng ghép]
=> quốc gia [thuộc tính lồng ghép]

Chúng tôi đang cố gắng truy cập các thuộc tính lồng nhau, không có gì khác ngoài các thuộc tính trong các thuộc tính. Ở đây id và country là các thuộc tính lồng nhau bên trong thuộc tính địa chỉ. Vì vậy, để truy cập các thuộc tính lồng nhau, chúng ta đã học được rằng có thể truy cập các thuộc tính lồng nhau của một đối tượng bằng cách xâu chuỗi các tên thuộc tính hoặc khóa theo đúng trình tự.

Thứ tự tuần tự chính xác để truy cập các thuộc tính lồng nhau trước tiên là đối tượng rồi đến thuộc tính sau đó là các thuộc tính lồng nhau i. e. người sau đó địa chỉ sau id/quốc gia [thuộc tính lồng nhau]. Do đó, mã được viết ở trên để truy cập các thuộc tính lồng nhau bằng cách sử dụng ký hiệu dấu chấm là một người. địa chỉ. id và người. địa chỉ. quốc gia. điều tương tự cũng xảy ra khi truy cập các thuộc tính lồng nhau bằng cách sử dụng ký hiệu dấu ngoặc

Truy cập Thuộc tính lồng nhau bằng Biến trong JavaScript

Một cách khác để truy cập các thuộc tính lồng nhau là lưu trữ chúng vào các biến và sau đó chúng phải truy cập bằng cách sử dụng ký hiệu ngoặc []. Nếu chúng tôi cố gắng truy cập chúng bằng cách sử dụng ký hiệu dấu chấm, nó sẽ trả về Uncaught TypeError. Không thể đọc thuộc tính 'quốc gia' không xác định . Điều này có nghĩa là chúng ta phải truy cập nó chỉ bằng cách sử dụng ký hiệu ngoặc đơn. Những gì chúng ta đã thảo luận ở trên được đưa ra trong ví dụ dưới đây.

Ví dụ. Đối tượng JavaScript, Thuộc tính lồng nhau của đối tượng


    JavaScript Objects, Nested Properties of an object access using variable example


    
        //Nested properties
        var person = {
            firstName: "Elon",
            lastName: "Musk",
            age: 25,
            address: {
                id: 1,
                country: "UK"
            }
        };

        let data1 = "address"; //storing it in a variable
        let data2 = "country";
        console.log["person object: ", person]
        console.log["person object length: ", Object.getOwnPropertyNames[person].length]
        console.log["person Object literal type? : ", typeof person];// object

        //display data
        console.log["Person object Nested Properties access using variable with bracket notation-->Property country value is: " + person[data1][data2]];
        console.log["Person object Nested Properties access using variable with dot notation-->Property country value is: " + person.data1[data2]];//Uncaught TypeError: Cannot read property 'country' of undefined

Bây giờ hãy chạy đoạn mã trên và mở công cụ dành cho nhà phát triển trình duyệt bằng cách nhấn phím F12 và xem tab Bảng điều khiển và bạn có thể thấy đầu ra sau

Trong ví dụ trên, chúng ta đã lưu trữ thuộc tính địa chỉ của đối tượng person trong biến data1 let data1 = “address”; . e. person[data1][data2] trả về giá trị thuộc tính UK. Mặt khác, nếu chúng ta cố gắng truy cập cùng các thuộc tính lồng nhau được lưu trữ trong một biến bằng cách sử dụng ký hiệu dấu chấm. data1[data2] chúng tôi nhận được Lỗi loại không bắt được. Không thể đọc thuộc tính 'quốc gia' không xác định .

Mảng và đối tượng lồng nhau trong JavaScript

Các giá trị thuộc tính của một đối tượng có thể là các mảng và các giá trị bên trong mảng có thể là các đối tượng như

//Nested arrays of an object
        var person = {
            firstName: "Elon",
            lastName: "Musk",
            age: 25,
            cars: [
                { name: "Ford", "models": ["Fiesta", "Focus", "Mustang"] },
                { name: "BMW", "models": ["320", "X3", "X5"] },
                { name: "Fiat", "models": ["500", "Panda"] }
            ]
        };

Chúng ta phải sử dụng vòng lặp for-in để truy cập từng mảng/phần tử bên trong mảng i. e

for [let i in person.cars] {
    console.log["****" + person.cars[i].name + "****"];
    for [let j in person.cars[i].models] {
        console.log[person.cars[i].models[j]];
    }
}

Ví dụ. Các đối tượng JavaScript, truy cập các mảng lồng nhau của một đối tượng bằng cách sử dụng ký hiệu dấu chấm và dấu ngoặc vuông


    JavaScript Objects, access Nested arrays of an object using dot & bracket notation example


            
        //Nested arrays of an object
        var person = {
            firstName: "Elon",
            lastName: "Musk",
            age: 25,
            cars: [
                { name: "Ford", "models": ["Fiesta", "Focus", "Mustang"] },
                { name: "BMW", "models": ["320", "X3", "X5"] },
                { name: "Fiat", "models": ["500", "Panda"] }
            ]
        };

        let x = ""
        //To access arrays inside arrays, use a for-in loop for each array
        for [let i in person.cars] {
            console.log["****" + person.cars[i].name + "****"];
            for [let j in person.cars[i].models] {
                console.log[person.cars[i].models[j]];
            }
        }

        //display data
        console.log["person object: ", person]
        console.log["person object length: ", Object.getOwnPropertyNames[person].length]
        console.log["person Object literal type? : ", typeof person];// object

đầu ra

Trong ví dụ trên, chúng ta đã tạo một đối tượng person với các thuộc tính FirstName, LastName, age và cars với các giá trị tương ứng. Nếu chúng ta để ý rằng giá trị của tài sản ô tô là mảng các chi tiết ô tô tôi. e

ô tô. [
{ name. “Ford”, “người mẫu”. [“Fiesta”, “Focus”, “Mustang”] },
{ name. “BMW”, “người mẫu”. [“320”, “X3”, “X5”] },
{ name. “Fiat”, “mô hình”. [“500”, “Panda”] }
]

trong đó cũng chứa một mảng khác bên trong nó, đó là mảng các mô hình ô tô, không gì khác ngoài các mảng lồng nhau i. e

{ tên. “Ford”, “người mẫu”. [“Fiesta”, “Focus”, “Mustang”]},
{ name. “BMW”, “người mẫu”. [“320”, “X3”, “X5”] },
{ name. “Fiat”, “mô hình”. [“500”, “Gấu trúc”] }

Như chúng ta đã nói ở trên, các giá trị thuộc tính của đối tượng có thể là mảng và giá trị bên trong mảng có thể là đối tượng. Và phần tử của mảng hoặc mảng bên trong mảng [mảng lồng nhau] có thể được truy cập bằng vòng lặp for-in

Trong bài viết tiếp theo, tôi sẽ thảo luận về Phương thức JavaScript Instanceof[] với các ví dụ. Ở đây, trong bài viết này, tôi cố gắng giải thích các Thuộc tính lồng đối tượng JavaScript với các ví dụ và tôi hy vọng bạn thích bài viết Thuộc tính lồng đối tượng JavaScript này

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề