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

دليل لإتقان كائنات JavaScript

تم النشر بتاريخ 2024-08-27
تصفح:661

A Guide to Master JavaScript-Objects

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

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

في JavaScript، تُستخدم الكائنات لتخزين مجموعات من البيانات والكيانات الأكثر تعقيدًا. يتم إنشاؤها باستخدام القيم الحرفية للكائن أو منشئ الكائن.

// Using object literals
let person = {
    name: "John",
    age: 30,
    city: "New York"
};

// Using the Object constructor
let person = new Object();
person.name = "John";
person.age = 30;
person.city = "New York";

خصائص الكائن

  • Object.prototype: يرث كل كائن JavaScript الخصائص والأساليب من النموذج الأولي الخاص به.
let obj = {};
console.log(obj.__proto__ === Object.prototype); // Output: true

طرق الكائن

1. الكائن.تعيين ()

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

let target = {a: 1};
let source = {b: 2, c: 3};
Object.assign(target, source);
console.log(target); // Output: {a: 1, b: 2, c: 3}

2. كائن.إنشاء ()

إنشاء كائن جديد باستخدام كائن النموذج الأولي وخصائصه المحددة.

let person = {
    isHuman: false,
    printIntroduction: function() {
        console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
    }
};

let me = Object.create(person);
me.name = "Matthew";
me.isHuman = true;
me.printIntroduction(); // Output: My name is Matthew. Am I human? true

3. Object.defineProperties()

يحدد الخصائص الجديدة أو يعدل الخصائص الموجودة مباشرة على الكائن، ويعيد الكائن.

let obj = {};
Object.defineProperties(obj, {
    property1: {
        value: true,
        writable: true
    },
    property2: {
        value: "Hello",
        writable: false
    }
});
console.log(obj); // Output: { property1: true, property2: 'Hello' }

4. Object.defineProperty()

يحدد خاصية جديدة مباشرة على كائن أو يعدل خاصية موجودة ويعيد الكائن.

let obj = {};
Object.defineProperty(obj, 'property1', {
    value: 42,
    writable: false
});
console.log(obj.property1); // Output: 42
obj.property1 = 77; // No error thrown, but the property is not writable
console.log(obj.property1); // Output: 42

5. Object.entries()

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

let obj = {a: 1, b: 2, c: 3};
console.log(Object.entries(obj)); // Output: [['a', 1], ['b', 2], ['c', 3]]

6. كائن.تجميد ()

تجميد كائن. لم يعد من الممكن تغيير الكائن المجمد؛ تجميد كائن يمنع إضافة خصائص جديدة إليه، وإزالة الخصائص الموجودة، ويمنع تغيير قيم الخصائص الموجودة.

let obj = {prop: 42};
Object.freeze(obj);
obj.prop = 33; // Fails silently in non-strict mode
console.log(obj.prop); // Output: 42

7. Object.fromEntries()

تحويل قائمة أزواج القيمة الرئيسية إلى كائن.

let entries = new Map([['foo', 'bar'], ['baz', 42]]);
let obj = Object.fromEntries(entries);
console.log(obj); // Output: { foo: 'bar', baz: 42 }

8. Object.getOwnPropertyDescriptor()

إرجاع واصف خاصية لخاصية خاصة (أي خاصية موجودة مباشرة على كائن وليس في سلسلة النموذج الأولي للكائن) لكائن معين.

let obj = {property1: 42};
let descriptor = Object.getOwnPropertyDescriptor(obj, 'property1');
console.log(descriptor);
// Output: { value: 42, writable: true, enumerable: true, configurable: true }

9. Object.getOwnPropertyDescriptors()

إرجاع كائن يحتوي على كافة واصفات الخصائص الخاصة بالكائن.

let obj = {property1: 42};
let descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
/* Output:
{
  property1: {
    value: 42,
    writable: true,
    enumerable: true,
    configurable: true
  }
}
*/

10. Object.getOwnPropertyNames()

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

let obj = {a: 1, b: 2, c: 3};
let props = Object.getOwnPropertyNames(obj);
console.log(props); // Output: ['a', 'b', 'c']

11. Object.getOwnPropertySymbols()

إرجاع مصفوفة من كافة خصائص الرمز الموجودة مباشرة على كائن معين.

let obj = {};
let sym = Symbol('foo');
obj[sym] = 'bar';
let symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // Output: [Symbol(foo)]

12. Object.getPrototypeOf()

إرجاع النموذج الأولي (أي قيمة خاصية [[النموذج الأولي]] الداخلية) للكائن المحدد.

let proto = {};
let obj = Object.create(proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

13. الكائن ()

يحدد ما إذا كانت القيمتان هي نفس القيمة.

console.log(Object.is('foo', 'foo')); // Output: true
console.log(Object.is({}, {})); // Output: false

14. Object.isExtensible()

يحدد ما إذا كان تمديد الكائن مسموحًا به.

let obj = {};
console.log(Object.isExtensible(obj)); // Output: true
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // Output: false

15. Object.isFrozen()

يحدد ما إذا كان الكائن مجمداً.

let obj = {};
console.log(Object.isFrozen(obj)); // Output: false
Object.freeze(obj);
console.log(Object.isFrozen(obj)); // Output: true

16. الكائن.isSealed ()

يحدد ما إذا كان الكائن مغلقًا.

let obj = {};
console.log(Object.isSealed(obj)); // Output: false
Object.seal(obj);
console.log(Object.isSealed(obj)); // Output: true

17. مفاتيح الكائن ()

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

let obj = {a: 1, b: 2, c: 3};
console.log(Object.keys(obj)); // Output: ['a', 'b', 'c']

18. Object.preventExtensions()

يمنع أي امتدادات للكائن.

let obj = {};
Object.preventExtensions(obj);
obj.newProp = 'test'; // Throws an error in strict mode
console.log(obj.newProp); // Output: undefined

19. الكائن. الختم ()

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

let obj = {property1: 42};
Object.seal(obj);
obj.property1 = 33;
delete obj.property1; // Throws an error in strict mode
console.log(obj.property1); // Output: 33

20. Object.setPrototypeOf()

تعيين النموذج الأولي (أي خاصية [[النموذج الأولي]] الداخلية) لكائن محدد إلى كائن آخر أو فارغ.

let proto = {};
let obj = {};
Object.setPrototypeOf(obj, proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

21. Object.values()

إرجاع مصفوفة من قيم الخصائص القابلة للتعداد الخاصة بكائن معين، بنفس الترتيب الذي توفره حلقة for...in.

let obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj)); // Output: [1, 2, 3]

أمثلة عملية

المثال 1: استنساخ كائن

استخدام Object.assis() لاستنساخ كائن.

let obj = {a: 1, b: 2};
let clone = Object.assign({}, obj);
console.log(clone); // Output: {a: 1, b: 2}

المثال 2: دمج الكائنات

استخدام Object.assis() لدمج الكائنات.

let obj1 = {a: 1, b: 2};
let obj2 = {b: 3, c: 4};
let merged = Object.assign({},

 obj1, obj2);
console.log(merged); // Output: {a: 1, b: 3, c: 4}

المثال 3: إنشاء كائن بنموذج أولي محدد

استخدام Object.create() لإنشاء كائن بنموذج أولي محدد.

let proto = {greet: function() { console.log("Hello!"); }};
let obj = Object.create(proto);
obj.greet(); // Output: Hello!

المثال 4: تعريف الخصائص غير القابلة للتغيير

استخدام Object.defineProperty() لتعريف الخصائص غير القابلة للتغيير.

let obj = {};
Object.defineProperty(obj, 'immutableProp', {
    value: 42,
    writable: false
});
console.log(obj.immutableProp); // Output: 42
obj.immutableProp = 77; // Throws an error in strict mode
console.log(obj.immutableProp); // Output: 42

المثال 5: تحويل كائن إلى مصفوفة

استخدام Object.entries() لتحويل كائن إلى مجموعة من أزواج القيمة الرئيسية.

let obj = {a: 1, b: 2, c: 3};
let entries = Object.entries(obj);
console.log(entries); // Output: [['a', 1], ['b', 2], ['c', 3]]

خاتمة

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

بيان الافراج تم نشر هذه المقالة على: https://dev.to/imsushant12/a-guide-to-master-javascript-objects-362b?1 إذا كان هناك أي انتهاك، يرجى الاتصال بـ [email protected] لحذفه
أحدث البرنامج التعليمي أكثر>

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

Copyright© 2022 湘ICP备2022001581号-3