"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > فهم الكائنات المتداخلة في جافا سكريبت

فهم الكائنات المتداخلة في جافا سكريبت

تم النشر بتاريخ 2024-11-03
تصفح:871

Understanding Nested Objects in JavaScript

الكائنات هي ما تتعامل معه أثناء عملك كمطور JavaScript، وغني عن القول أن هذا ينطبق على TypeScript أيضًا. يوفر لك TypeScript طرقًا متعددة لتحديد تعريفات النوع لخصائص الكائن. سنلقي نظرة على اثنين منها خلال هذا المنشور، بدءًا من الأمثلة البسيطة والانتقال إلى بعض تعريفات الأنواع المتقدمة.

الكائنات المتداخلة في JavaScript هي كائنات تحتوي على كائنات أو صفائف أخرى كخصائص لها. وهذا يسمح بإنشاء هياكل بيانات معقدة يمكنها تمثيل كيانات العالم الحقيقي بشكل أكثر فعالية.
في JavaScript، يمكنك دمج الكائنات داخل كائنات أخرى. يُعرف هذا أيضًا باسم تداخل الكائنات أو تكوين الكائنات. يتيح لك تداخل الكائنات إنشاء بنيات بيانات معقدة عن طريق تنظيم الكائنات داخل الكائنات.

إنشاء كائن متداخل

إليك مثال بسيط لكائن متداخل يمثل ملف تعريف المستخدم:

const userProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "[email protected]",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

على سبيل المثال:
يحتوي كائن userProfile على خصائص مثل اسم المستخدم والعمر وجهة الاتصال.
خاصية جهة الاتصال نفسها عبارة عن كائن يحتوي على البريد الإلكتروني والهاتف.
خاصية الهاتف هي كائن متداخل آخر مع أرقام المنزل والجوال.

الوصول إلى خصائص الكائنات المتداخلة

للوصول إلى الخصائص داخل الكائنات المتداخلة، يمكنك استخدام علامة النقطة أو علامة الأقواس. إليك كيفية الوصول إلى رقم الهاتف المحمول الخاص بالمستخدم:

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

يمكنك أيضًا تعديل الخصائص المتداخلة. على سبيل المثال، إذا كنت تريد تغيير تفضيل السمة:

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

استخدام الأنواع مع الكائنات المتداخلة

عند العمل باستخدام TypeScript، يمكنك تحديد أنواع الكائنات المتداخلة لضمان سلامة الكتابة. إليك كيفية تحديد نوع لكائن 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: "[email protected]",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

في مثال TypeScript هذا، يحدد نوع UserProfile بنية كائن userProfile، مما يضمن كتابة جميع الخصائص بشكل صحيح.

فيما يلي مثال آخر للكائنات المتداخلة في JavaScript

دعونا نلقي نظرة على مثال أكثر تعقيدًا يمثل نظام المكتبات، حيث يحتوي كل كتاب على تفاصيل مختلفة، بما في ذلك المؤلف والناشر والأنواع.
يمكن تعريف الكائنات المتداخلة باستخدام الكلمة الأساسية type نفسها. يمكن لـ 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;
    }
};

دعونا نحلل بنية الكائنات المتداخلة

  • كائن المكتبة: يمثل المكتبة بأكملها ويحتوي على خصائص مثل الاسم والموقع والكتب.
  • كائن الموقع: يحتوي على كائنات متداخلة للعنوان والإحداثيات.
  • يتضمن العنوان الشارع والمدينة والولاية والرمز البريدي. إحداثيات مخازن خطوط الطول والعرض.
  • مصفوفة الكتب: مصفوفة تحتوي على كائنات كتاب متعددة، يحتوي كل منها على:
  • العنوان: عنوان الكتاب.
  • كائن المؤلف: كائن متداخل يتضمن الاسم الأول واسم العائلة للمؤلف.

- سنة النشر: سنة نشر الكتاب.
-الأنواع: مجموعة من الأنواع التي ينتمي إليها الكتاب.
-النسخ المتوفرة: رقم يشير إلى عدد النسخ المتوفرة.

الوصول إلى البيانات ومعالجتها

يمكنك الوصول إلى هذا الكائن المتداخل ومعالجته بطرق مختلفة. وإليك كيفية الحصول على مؤلف الكتاب الأول:

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

لإضافة كتاب جديد إلى المكتبة:

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

استخدام أسلوب في الكائن

يمكنك أيضًا استخدام الأساليب المحددة في الكائن. على سبيل المثال، للحصول على إجمالي عدد الكتب:

console.log(library.totalBooks()); // Output: 3

يوضح هذا المثال كيف يمكن استخدام الكائنات المتداخلة لإنشاء بنية أكثر شمولاً لتمثيل البيانات المعقدة، مثل نظام المكتبة. ومن خلال تنظيم المعلومات ذات الصلة معًا، يمكنك بسهولة إدارة البيانات والتفاعل معها بطريقة مفيدة.

مثال متداخل آخر

لتحسين تنظيم التعليمات البرمجية وقابلية الصيانة، يمكنك تجريد الكائنات المتداخلة إلى أنواع منفصلة. يتيح لك هذا الأسلوب تحديد نوع متعهد تقديم الطعام بشكل منفصل واستخدامه ضمن نوع القطار. إليك كيفية القيام بذلك في TypeScript:

// Define the type for Caterer
type Caterer = {
    name: string;   // Name of the catering company
    address: string; // Address of the catering company
    phone: number;   // Phone number of the catering company
};

تحديد نوع القطار
بعد ذلك، سوف نقوم بتحديد نوع القطار، الذي سيستخدم نوع متعهد تقديم الطعام لخاصية متعهد تقديم الطعام الخاصة به.

// Define the type for Train
type Train = {
    model: string;                // Model of the train
    trainNumber: string;          // Unique train number
    timeOfDeparture: Date;        // Departure time
    timeOfArrival: Date;          // Arrival time
    caterer: Caterer;             // Reference to the Caterer type
};

مثال لكائن القطار

الآن، يمكننا إنشاء مثيل لنوع القطار، بما في ذلك تفاصيل متعهد تقديم الطعام.

// Example of a Train object
const train: Train = {
    model: "Shinkansen N700",
    trainNumber: "S1234",
    timeOfDeparture: new Date("2024-10-25T09:00:00Z"),
    timeOfArrival: new Date("2024-10-25T11:30:00Z"),
    caterer: {
        name: "Gourmet Train Catering",
        address: "123 Culinary Ave, Tokyo",
        phone: 1234567890,
    },
};

فوائد هذا النهج هي:

  • قابلية إعادة الاستخدام: يمكن إعادة استخدام نوع متعهد تقديم الطعام في أجزاء أخرى من التعليمات البرمجية الخاصة بك، كما هو الحال في أنواع النقل المختلفة (مثل الطائرات والحافلات).
  • الوضوح: فصل نوع متعهد تقديم الطعام يجعل نوع القطار أكثر نظافة وأسهل للفهم.
  • قابلية الصيانة: إذا تغير هيكل متعهد تقديم الطعام، فأنت بحاجة فقط إلى تحديثه في مكان واحد.

من خلال تجريد الكائنات المتداخلة إلى أنواع منفصلة، ​​يمكنك تحسين تنظيم ووضوح كود TypeScript الخاص بك. يتيح هذا النهج إمكانية إعادة الاستخدام والصيانة بشكل أفضل، مما يسهل إدارة هياكل البيانات المعقدة.

دعونا نلخص

الكائنات المتداخلة هي ميزة قوية في JavaScript تسمح بتنظيم هياكل البيانات المعقدة.

باستخدام الكائنات المتداخلة، يمكنك إنشاء تمثيلات أكثر وضوحًا للبيانات، مما يجعل فهم التعليمات البرمجية الخاصة بك وصيانتها أسهل. بالإضافة إلى ذلك، يمكن أن يساعد استخدام TypeScript في فرض البنية وسلامة الكتابة عند التعامل مع هذه الكائنات المعقدة.

بيان الافراج تم نشر هذه المقالة على: https://dev.to/irenejpopova/understanding-nested-objects-in-javascript-4b31?1 إذا كان هناك أي انتهاك، يرجى الاتصال بـ [email protected] لحذفه
أحدث البرنامج التعليمي أكثر>

تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

Copyright© 2022 湘ICP备2022001581号-3