مطابقة الأنماط في JavaScript باستخدام خاصية بقية الكائن: إتقان نمط بقية الكائن

تقدم عملية إسناد تفكيك الكائنات في JavaScript، بالإضافة إلى خصائص بقية/نشر الكائن (التي تم تقديمها في ES2018)، آلية قوية لمطابقة الأنماط واستخراج البيانات من الكائنات بطريقة موجزة وسهلة القراءة. تتيح هذه الميزة، التي يُشار إليها غالبًا باسم "نمط بقية الكائن"، للمطورين استخلاص خصائص محددة من كائن بسهولة مع التقاط الخصائص المتبقية في كائن جديد في نفس الوقت. يقدم هذا المقال دليلاً شاملاً لفهم واستخدام خاصية بقية الكائن لكتابة كود فعال وقابل للصيانة.

فهم تفكيك الكائنات

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

مثال:

            
const person = {
  firstName: "Alice",
  lastName: "Smith",
  age: 30,
  city: "London",
  country: "United Kingdom"
};

const { firstName, lastName } = person;

console.log(firstName); // Output: Alice
console.log(lastName);  // Output: Smith

            

              
                Copy
              
            
          

في هذا المثال، قمنا باستخراج الخاصيتين firstName و lastName من كائن person وقمنا بإسنادهما إلى متغيرات مقابلة. هذا أكثر نظافة بكثير من الوصول إليهما بشكل فردي باستخدام التدوين النقطي (person.firstName, person.lastName).

تقديم خاصية بقية الكائن

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

مثال:

            
const product = {
  id: 123,
  name: "Wireless Headphones",
  price: 99.99,
  brand: "Sony",
  color: "Black",
  bluetoothVersion: "5.0"
};

const { id, name, ...details } = product;

console.log(id);    // Output: 123
console.log(name);  // Output: Wireless Headphones
console.log(details); // Output: { price: 99.99, brand: 'Sony', color: 'Black', bluetoothVersion: '5.0' }

            

              
                Copy
              
            
          

في هذا المثال، يتم استخراج id و name كمتغيرات فردية. يتم جمع الخصائص المتبقية (price, brand, color, و bluetoothVersion) في كائن جديد يسمى details.

حالات استخدام خاصية بقية الكائن

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

1. استخراج خيارات التكوين

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

مثال:

            
function createButton(options) {
  const { text, onClick, ...rest } = options;

  // Apply default styles
  const defaultStyles = {
    backgroundColor: "#007bff",
    color: "white",
    padding: "10px 20px",
    border: "none",
    borderRadius: "5px",
    cursor: "pointer"
  };

  // Merge default styles with remaining options
  const styles = { ...defaultStyles, ...rest };

  const button = document.createElement("button");
  button.textContent = text;
  button.addEventListener("click", onClick);

  // Apply styles to the button
  Object.assign(button.style, styles);

  return button;
}

// Usage
const myButton = createButton({
  text: "Click Me",
  onClick: () => alert("Button Clicked!"),
  backgroundColor: "#28a745", // Override default background color
  fontSize: "16px" // Add a custom font size
});

document.body.appendChild(myButton);

            

              
                Copy
              
            
          

في هذا المثال، يتم استخراج text و onClick لاستخدام محدد. يتم دمج الخيارات المتبقية في rest مع defaultStyles، مما يسمح للمستخدمين بتخصيص مظهر الزر مع الاستفادة من التنسيق الافتراضي.

2. تصفية الخصائص

يمكن استخدام خاصية بقية الكائن لتصفية الخصائص غير المرغوب فيها من كائن بشكل فعال. هذا مفيد بشكل خاص عند التعامل مع البيانات الواردة من واجهة برمجة تطبيقات (API) أو عند إعداد البيانات للإرسال.

مثال:

            
const userData = {
  id: 1,
  username: "john.doe",
  email: "john.doe@example.com",
  password: "secret", // We don't want to send the password to the server
  createdAt: "2023-10-27T10:00:00Z",
  updatedAt: "2023-10-27T10:00:00Z"
};

const { password, ...safeUserData } = userData;

console.log(safeUserData); // Output: { id: 1, username: 'john.doe', email: 'john.doe@example.com', createdAt: '2023-10-27T10:00:00Z', updatedAt: '2023-10-27T10:00:00Z' }

// Now you can safely send safeUserData to the server

            

              
                Copy
              
            
          

هنا، يتم استبعاد خاصية password من كائن safeUserData، مما يضمن عدم نقل المعلومات الحساسة دون داع.

3. استنساخ الكائنات مع تعديلات

بينما يُستخدم عامل النشر (...) غالبًا للاستنساخ السطحي للكائنات، فإن دمجه مع تفكيك الكائنات يتيح لك إنشاء نسخ معدلة من الكائنات بكفاءة.

مثال:

            
const originalSettings = {
  theme: "light",
  fontSize: "14px",
  language: "en",
  notificationsEnabled: true
};

const updatedSettings = {
  ...originalSettings,
  theme: "dark", // Override the theme
  fontSize: "16px" // Override the font size
};

console.log(updatedSettings); // Output: { theme: 'dark', fontSize: '16px', language: 'en', notificationsEnabled: true }

            

              
                Copy
              
            
          

في هذا المثال، نقوم بإنشاء كائن جديد updatedSettings عن طريق نشر خصائص originalSettings ثم استبدال خاصيتي theme و fontSize بقيم جديدة.

4. التعامل مع استجابات واجهات برمجة التطبيقات (APIs)

عند استهلاك البيانات من واجهات برمجة التطبيقات، غالبًا ما تتلقى كائنات تحتوي على معلومات أكثر مما تحتاج. تساعدك خاصية بقية الكائن على استخراج البيانات ذات الصلة وتجاهل الباقي.

مثال (جلب بيانات المستخدم من API):

            
async function getUserProfile(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data = await response.json();

  // Assuming the API returns data like this:
  // {
  //   id: 1,
  //   username: "john.doe",
  //   email: "john.doe@example.com",
  //   profilePicture: "https://example.com/images/john.jpg",
  //   registrationDate: "2023-01-01",
  //   lastLogin: "2023-10-27",
  //   status: "active",
  //   ...otherData
  // }

  const { id, username, email, profilePicture } = data;

  // We only need id, username, email, and profilePicture for our component
  return { id, username, email, profilePicture };
}

getUserProfile(1).then(user => {
  console.log(user); // Output: { id: 1, username: 'john.doe', email: 'john.doe@example.com', profilePicture: 'https://example.com/images/john.jpg' }
});

            

              
                Copy
              
            
          

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

5. إدارة الحالة (State) في مكونات React

في React، يمكن لخاصية بقية الكائن تبسيط تحديث الحالة من خلال السماح لك بتعديل أجزاء من كائن الحالة بشكل انتقائي.

مثال:

            
import React, { useState } from 'react';

function MyComponent() {
  const [state, setState] = useState({
    name: 'Initial Name',
    age: 25,
    city: 'Some City'
  });

  const updateName = (newName) => {
    setState(prevState => ({
      ...prevState,
      name: newName
    }));
  };

  const updateDetails = (newDetails) => {
    setState(prevState => ({
      ...prevState,
      ...newDetails // Update multiple properties at once
    }));
  };

  return (
    

      
Name: {state.name}
      
Age: {state.age}
      
City: {state.city}
       updateName('Updated Name')}>Update Name
       updateDetails({ age: 30, city: 'New City' })}>Update Details
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

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

أفضل الممارسات لاستخدام خاصية بقية الكائن

لاستخدام خاصية بقية الكائن بشكل فعال وتجنب المزالق الشائعة، ضع في اعتبارك هذه الممارسات الأفضل:

• الموضع: يجب أن تكون خاصية بقية الكائن دائمًا آخر خاصية في عملية إسناد التفكيك. وضعها في مكان آخر سيؤدي إلى خطأ في الصياغة.
• القراءة: بينما يمكن لخاصية بقية الكائن أن تجعل الكود الخاص بك أكثر إيجازًا، أعط الأولوية للقراءة. استخدم أسماء متغيرات ذات معنى وتعليقات لتوضيح الغرض من إسناد التفكيك.
• الثبات (Immutability): عند العمل مع خاصية بقية الكائن، تذكر أنك تقوم بإنشاء كائن جديد يحتوي على الخصائص المتبقية. هذا يضمن بقاء الكائن الأصلي دون تغيير، مما يعزز الثبات.
• النسخ السطحي: كن على دراية بأن خاصية بقية الكائن تنشئ نسخة سطحية من الخصائص المتبقية. إذا كان الكائن الأصلي يحتوي على كائنات متداخلة، فسيتم الإشارة إلى تلك الكائنات المتداخلة، ولن يتم نسخها بعمق. للاستنساخ العميق، فكر في استخدام مكتبات مثل _.cloneDeep() من Lodash.
• TypeScript: عند استخدام TypeScript، حدد الأنواع المناسبة للكائنات التي تقوم بتفكيكها لضمان سلامة النوع وتجنب السلوك غير المتوقع. يمكن أن يساعد استنتاج النوع في TypeScript، ولكن يوصى عمومًا بالأنواع الصريحة للوضوح والصيانة.

أمثلة من جميع أنحاء العالم

لنلقِ نظرة على بعض الأمثلة لكيفية استخدام خاصية بقية الكائن في سياقات عالمية مختلفة:

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

الدمج مع ميزات التفكيك الأخرى

يمكن استخدام خاصية بقية الكائن جنبًا إلى جنب مع ميزات التفكيك الأخرى، مثل:

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

مثال:

            
const config = {
  apiEndpoint: 'https://api.example.com',
  timeout: 5000,
  retries: 3,
  logging: {
    level: 'info',
    format: 'json'
  }
};

const { apiEndpoint, timeout = 10000, logging: { level: logLevel, format } = {}, ...rest } = config;

console.log(apiEndpoint); // Output: https://api.example.com
console.log(timeout);     // Output: 5000
console.log(logLevel);    // Output: info
console.log(format);       // Output: json
console.log(rest);         // Output: { retries: 3 }

            

              
                Copy
              
            
          

الخاتمة

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

يعد إتقان خاصية بقية الكائن مهارة قيمة لأي مطور JavaScript يعمل مع هياكل بيانات معقدة ويسعى إلى إيجاز الكود ووضوحه. احتضن هذه الميزة وأطلق العنان لإمكانياتها الكاملة لتعزيز سير عمل تطوير JavaScript الخاص بك.