Memahami Objek Bersarang dalam JavaScript

Objek ialah perkara yang anda hadapi bekerja sebagai pembangun JavaScript, dan tidak perlu dikatakan, itu juga berlaku untuk TypeScript. TypeScript memberi anda pelbagai cara untuk mentakrifkan definisi jenis untuk sifat objek. Kami akan melihat beberapa daripadanya sepanjang siaran ini, bermula dengan contoh mudah dan beralih kepada beberapa definisi jenis lanjutan.

Objek bersarang dalam JavaScript ialah objek yang mengandungi objek atau tatasusunan lain sebagai sifatnya. Ini membolehkan penciptaan struktur data kompleks yang boleh mewakili entiti dunia sebenar dengan lebih berkesan.
Dalam JavaScript, anda boleh menyarangkan objek dalam objek lain. Ini juga dikenali sebagai sarang objek atau komposisi objek. Sarang objek membolehkan anda mencipta struktur data yang kompleks dengan menyusun objek dalam objek.

Mencipta Objek Bersarang

Berikut ialah contoh mudah objek bersarang yang mewakili profil pengguna:

const userProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

Contohnya:
Objek UserProfile mempunyai sifat seperti nama pengguna, umur dan kenalan.
Sifat kenalan itu sendiri ialah objek yang mengandungi e-mel dan telefon.
Sifat telefon ialah satu lagi objek bersarang dengan nombor rumah dan mudah alih.

Mengakses Sifat Objek Bersarang

Untuk mengakses sifat dalam objek bersarang, anda boleh menggunakan tatatanda titik atau tanda kurungan. Begini cara anda boleh mengakses nombor telefon mudah alih pengguna:

const mobileNumber = userProfile.contact.phone.mobile;
console.log(mobileNumber); // Output: 987-654-3210

Anda juga boleh mengubah suai sifat bersarang. Contohnya, jika anda ingin menukar pilihan tema:

userProfile.preferences.theme = "light";
console.log(userProfile.preferences.theme); // Output: light

Menggunakan Jenis dengan Objek Bersarang

Apabila bekerja dengan TypeScript, anda boleh menentukan jenis untuk objek bersarang untuk memastikan keselamatan jenis. Begini cara anda boleh menentukan jenis untuk objek UserProfile:

type UserProfile = {
    username: string;
    age: number;
    contact: {
        email: string;
        phone: {
            home: string;
            mobile: string;
        };
    };
    preferences: {
        notifications: boolean;
        theme: string;
    };
};

const user: UserProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

Dalam contoh TypeScript ini, jenis UserProfile mentakrifkan struktur objek UserProfile, memastikan semua sifat ditaip dengan betul.

Berikut ialah satu lagi contoh Objek Bersarang dalam JavaScript

Mari kita lihat contoh yang lebih kompleks yang mewakili sistem perpustakaan, di mana setiap buku mempunyai pelbagai butiran, termasuk pengarang, penerbit dan genrenya.
Objek bersarang boleh ditakrifkan menggunakan kata kunci jenis itu sendiri. TypeScript juga boleh mengabstrakkan definisi jenis objek bersarang ke dalam definisi jenis. Tandatangan indeks boleh digunakan apabila anda tidak pasti berapa banyak sifat objek akan mempunyai tetapi anda pasti jenis sifat objek

Menentukan Objek Bersarang untuk Sistem Perpustakaan

Begini cara anda boleh menstruktur objek bersarang untuk senario ini:

const userProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

Mari kita pecahan Struktur Objek Bersarang

• Objek Perpustakaan: Mewakili keseluruhan perpustakaan dan mengandungi sifat seperti nama, lokasi dan buku.
• Objek Lokasi: Mengandungi objek bersarang untuk alamat dan koordinat.
• alamat termasuk jalan, bandar, negeri dan poskod. koordinat menyimpan latitud dan longitud.
• Tatasusunan Buku: Tatasusunan yang memuatkan berbilang objek buku, setiap satu mengandungi:
• Tajuk: Tajuk buku.
• Objek Pengarang: Objek bersarang yang merangkumi Nama pertama dan Nama akhir pengarang.

-Tahun Terbitan: Tahun buku itu diterbitkan.
-Genre: Pelbagai genre yang dimiliki oleh buku itu.
-Salinan Tersedia: Nombor yang menunjukkan bilangan salinan yang tersedia.

Mengakses dan Memanipulasi Data

Anda boleh mengakses dan memanipulasi objek bersarang ini dalam pelbagai cara. Begini cara untuk mendapatkan pengarang buku pertama:

const mobileNumber = userProfile.contact.phone.mobile;
console.log(mobileNumber); // Output: 987-654-3210

Untuk menambah buku baharu pada pustaka:

userProfile.preferences.theme = "light";
console.log(userProfile.preferences.theme); // Output: light

Menggunakan Kaedah dalam Objek

Anda juga boleh menggunakan kaedah yang ditakrifkan dalam objek. Contohnya, untuk mendapatkan jumlah bilangan buku:

type UserProfile = {
    username: string;
    age: number;
    contact: {
        email: string;
        phone: {
            home: string;
            mobile: string;
        };
    };
    preferences: {
        notifications: boolean;
        theme: string;
    };
};

const user: UserProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

Contoh ini menggambarkan cara objek bersarang boleh digunakan untuk mencipta struktur yang lebih komprehensif untuk mewakili data yang kompleks, seperti sistem perpustakaan. Dengan menyusun maklumat berkaitan bersama-sama, anda boleh mengurus dan berinteraksi dengan data dengan mudah dengan cara yang bermakna.

Satu lagi contoh bersarang

Untuk meningkatkan organisasi kod dan kebolehselenggaraan, anda boleh mengabstrak objek bersarang ke dalam jenis yang berasingan. Pendekatan ini membolehkan anda mentakrifkan jenis Caterer secara berasingan dan menggunakannya dalam jenis Keretapi. Begini cara anda boleh melakukannya dalam TypeScript:

const library = {
    name: "Central City Library",
    location: {
        address: {
            street: "123 Main St",
            city: "Central City",
            state: "CC",
            zip: "12345"
        },
        coordinates: {
            latitude: 40.7128,
            longitude: -74.0060
        }
    },
    books: [
        {
            title: "JavaScript: The Good Parts",
            author: {
                firstName: "Douglas",
                lastName: "Crockford"
            },
            publishedYear: 2008,
            genres: ["Programming", "Technology"],
            availableCopies: 5
        },
        {
            title: "Clean Code",
            author: {
                firstName: "Robert",
                lastName: "C. Martin"
            },
            publishedYear: 2008,
            genres: ["Programming", "Software Engineering"],
            availableCopies: 3
        }
    ],
    totalBooks: function() {
        return this.books.length;
    }
};

Menentukan Jenis Kereta Api
Seterusnya, kami akan menentukan jenis Kereta Api, yang akan menggunakan jenis Katerer untuk harta katerernya.

const firstBookAuthor = library.books[0].author;
console.log(`${firstBookAuthor.firstName} ${firstBookAuthor.lastName}`); 
// Output: Douglas Crockford

Contoh Objek Kereta Api

Kini, kita boleh membuat contoh jenis Keretapi, termasuk butiran Caterer.

library.books.push({
    title: "The Pragmatic Programmer",
    author: {
        firstName: "Andrew",
        lastName: "Hunt"
    },
    publishedYear: 1999,
    genres: ["Programming", "Career"],
    availableCopies: 4
});

Faedah pendekatan ini ialah:

• Kebolehgunaan semula: Jenis Caterer boleh digunakan semula di bahagian lain kod anda, seperti dalam jenis pengangkutan yang berbeza (cth., kapal terbang, bas).
• Kejelasan: Mengasingkan jenis Caterer menjadikan jenis Keretapi lebih bersih dan lebih mudah difahami.
• Kebolehselenggaraan: Jika struktur Caterer berubah, anda hanya perlu mengemas kininya di satu tempat.

Dengan mengabstraksi objek bersarang ke dalam jenis yang berasingan, anda boleh meningkatkan organisasi dan kejelasan kod TypeScript anda. Pendekatan ini membolehkan kebolehgunaan semula dan kebolehselenggaraan yang lebih baik, menjadikannya lebih mudah untuk mengurus struktur data yang kompleks.

Mari kita imbas kembali

Objek bersarang ialah ciri berkuasa dalam JavaScript yang membenarkan penyusunan struktur data yang kompleks.

Dengan menggunakan objek bersarang, anda boleh mencipta perwakilan data yang lebih bermakna, menjadikan kod anda lebih mudah difahami dan diselenggara. Selain itu, menggunakan TypeScript boleh membantu menguatkuasakan keselamatan struktur dan jenis apabila berurusan dengan objek kompleks ini.

Atas ialah kandungan terperinci Memahami Objek Bersarang dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!