دليل شامل لمفاتيح وقيم كائنات JavaScript: فهم أزواج Key-Value

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

 const desk = {
  height : "4 feet" ,
  weight : "30 pounds" ,
  color : "brown" ,
  material : "wood" ,
 };

يتكون الكائن من خصائص، أو ما يُعرف بـ أزواج المفتاح والقيمة (key-value pairs). في المثال أعلاه، يحتوي كائن desk على أربع خصائص. كل خاصية لها اسم، يُطلق عليه أيضًا مفتاح (key)، وقيمة مقابلة له. على سبيل المثال، المفتاح height له القيمة "4 feet". يشكل المفتاح والقيمة معًا خاصية واحدة.

height: "4 feet" ,

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

• كيفية إنشاء كائن.
• كيفية تخزين البيانات في كائن واسترجاعها منه.

دعنا نبدأ بإنشاء كائن.

إنشاء الكائنات في JavaScript: الأساسيات والأمثلة

لإنشاء كائن في JavaScript، نستخدم الأقواس المتعرجة {}. سأقوم بإنشاء كائن يُسمى pizza وإضافة أزواج مفتاح-قيمة إليه:

 const pizza = {
  topping : "cheese" ,
  sauce : "marinara" ,
  size : "small"
 };

في هذا المثال، تقع المفاتيح (keys) على يسار النقطتين الرأسيتين :، بينما تقع القيم (values) على يمينها. يُعد كل زوج مفتاح-قيمة خاصية (property). لدينا هنا ثلاث خصائص:

• المفتاح topping له القيمة "cheese".
• المفتاح sauce له القيمة "marinara".
• المفتاح size له القيمة "small".

يتم فصل كل خاصية عن الأخرى بفاصلة ,، ويتم تغليف جميع الخصائص داخل أقواس متعرجة {}. هذه هي البنية الأساسية للكائن، ولكن هناك بعض القواعد التي يجب مراعاتها عند إنشاء كائنات JavaScript.

مفاتيح الكائنات في JavaScript: قواعد التسمية والأنواع

يجب أن يكون كل مفتاح في كائن JavaScript عبارة عن سلسلة نصية (string)، أو رمز (symbol)، أو رقم (number). لنلقِ نظرة فاحصة على المثال التالي. لاحظ أن أسماء المفاتيح 1 و 2 يتم تحويلها فعليًا إلى سلاسل نصية (strings) بواسطة JavaScript.

 const shoppingCart = {
  1 : "apple" ,
  2 : "oranges"
 };

يتضح هذا الاختلاف عندما تقوم بطباعة الكائن في وحدة التحكم (console):

 console .log(shoppingCart);
 //Result: { '1': 'apple', '2': 'oranges' }

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

 const programmer = {
  firstname : "Phil" ,
  age : 21 ,
  backendDeveloper : true ,
  languages : [ "Python" , "JavaScript" , "Java" , "C++" ],
  "current project name" : "The Amazing App"
 };

قيم الكائنات في JavaScript: المرونة في أنواع البيانات

على الجانب الآخر، يمكن أن تكون القيمة أي نوع بيانات، بما في ذلك مصفوفة (array)، أو رقم (number)، أو قيمة منطقية (boolean). تحتوي القيم في المثال أعلاه (كائن programmer) على هذه الأنواع: سلسلة نصية (string)، عدد صحيح (integer)، قيمة منطقية (boolean)، ومصفوفة (array). يمكنك حتى استخدام دالة (function) كقيمة، وفي هذه الحالة تُعرف باسم طريقة (method). الدالة sounds()، في الكائن أدناه، هي مثال على ذلك.

 const animal = {
  type : "cat" ,
  name : "kitty" ,
  sounds() {
  console .log( "meow meow" )
  }
 };

الآن، لنفترض أنك تريد إضافة أو حذف زوج مفتاح-قيمة، أو ببساطة تريد استرجاع قيمة من الكائن. يمكنك القيام بهذه الأمور باستخدام ترميز النقطة (Dot Notation) أو ترميز الأقواس (Bracket Notation)، وهو ما سنتناوله لاحقًا.

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

يُعد ترميز النقطة (Dot Notation) وترميز الأقواس (Bracket Notation) طريقتين أساسيتين للوصول إلى خصائص الكائن واستخدامها في JavaScript. من المرجح أنك ستستخدم ترميز النقطة بشكل متكرر، لذا سنبدأ به.

إضافة زوج مفتاح-قيمة باستخدام ترميز النقطة (Dot Notation)

سأقوم بإنشاء كائن book فارغ أدناه:

 const book = {};

لإضافة زوج مفتاح-قيمة باستخدام ترميز النقطة، استخدم البنية التالية: objectName.keyName = value. هذا هو الكود لإضافة المفتاح (author) والقيمة ("Jane Smith") إلى كائن book:

book.author = "Jane Smith" ;

إليك تفصيل الكود أعلاه:

• book هو اسم الكائن.
• . (نقطة) تفصل بين اسم الكائن واسم المفتاح.
• author هو اسم المفتاح.
• = (علامة يساوي) تُستخدم لتعيين القيمة.
• "Jane Smith" هي القيمة.

عندما أقوم بطباعة كائن book، سأرى زوج المفتاح-القيمة المضاف حديثًا:

 console .log(book);
 //Result: { author: 'Jane Smith' }

سأضيف زوج مفتاح-قيمة آخر إلى كائن book:

book.publicationYear = 2006 ;

يحتوي كائن book الآن على خاصيتين:

 console .log(book);
 //Result: { author: 'Jane Smith', publicationYear: 2006 }

الوصول إلى البيانات في كائن JavaScript باستخدام ترميز النقطة (Dot Notation)

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

 const basketballPlayer = {
  name : "James" ,
  averagePointsPerGame : 20 ,
  height : "6 feet, 2 inches" ,
  position : "shooting guard"
 };

لنفترض أنك تريد استرجاع القيمة "shooting guard". هذه هي البنية التي يجب استخدامها: objectName.keyName. دعنا نطبق هذه البنية للحصول على قيمة "shooting guard" وطباعتها:

 console .log(basketballPlayer.position);
 //Result: shooting guard

إليك تفصيل الكود أعلاه:

• basketballPlayer هو اسم الكائن.
• . (نقطة) تفصل بين اسم الكائن واسم المفتاح.
• position هو اسم المفتاح.

هذا مثال آخر:

 console .log(basketballPlayer.name);
 //Result: James

حذف زوج مفتاح-قيمة في JavaScript

لحذف زوج مفتاح-قيمة، استخدم العامل delete. هذه هي البنية: delete objectName.keyName. لحذف المفتاح height وقيمته من كائن basketballPlayer، ستكتب هذا الكود:

 delete basketballPlayer.height;

نتيجة لذلك، يحتوي كائن basketballPlayer الآن على ثلاثة أزواج مفتاح-قيمة:

 console .log(basketballPlayer);
 //Result: { name: 'James', averagePointsPerGame: 20, position: 'shooting guard' }

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

basketballPlayer.shooting percentage = "75%" ; //Results in an error

لذا، لن يعمل ترميز النقطة في كل موقف. لهذا السبب هناك خيار آخر: ترميز الأقواس (Bracket Notation).

إضافة زوج مفتاح-قيمة باستخدام ترميز الأقواس (Bracket Notation) في JavaScript

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

 const employee = {};

الآن أريد إضافة زوج مفتاح-قيمة باستخدام ترميز الأقواس. هذه هي البنية: objectName["keyName"] = value. إليك كيفية إضافة المفتاح (occupation) والقيمة (sales) إلى كائن employee:

employee[ "occupation" ] = "sales" ;

إليك تفصيل الكود أعلاه:

• employee هو اسم الكائن.
• "occupation" هو اسم المفتاح محاطًا بعلامات اقتباس داخل الأقواس المربعة.
• = (علامة يساوي) تُستخدم لتعيين القيمة.
• "sales" هي القيمة.

فيما يلي العديد من الأمثلة الإضافية التي تستخدم مرونة ترميز الأقواس لإضافة مجموعة متنوعة من أزواج المفتاح-القيمة:

 //Add multi-word key name
 employee[ "travels frequently" ] = true ;
 //Add key name that starts with a number and includes a hyphen
 employee[ "1st-territory" ] = "Chicago" ;
 //Add a key name that starts with a number
 employee[ "25" ] = "total customers" ;

عندما أقوم بطباعة كائن employee، سيبدو هكذا:

{ '25' : 'total customers' , occupation : 'sales' , 'travels frequently' : true , '1st-territory' : 'Chicago' }

مع وضع هذه المعلومات في الاعتبار، يمكننا إضافة مفتاح "shooting percentage" إلى كائن basketballPlayer من الأمثلة السابقة:

 const basketballPlayer = {
  name : "James" ,
  averagePointsPerGame : 20 ,
  height : "6 feet, 2 inches" ,
  position : "shooting guard"
 };

قد تتذكر أن ترميز النقطة تسبب في خطأ عندما حاولنا إضافة مفتاح يتضمن مسافات:

basketballPlayer.shooting percentage = "75%" ; //Results in an error

لكن ترميز الأقواس يجنبنا الأخطاء، كما ترى هنا:

basketballPlayer[ "shooting percentage" ] = "75%" ;

هذه هي النتيجة عند طباعة الكائن:

{ name : 'James' , averagePointsPerGame : 20 , height : '6 feet, 2 inches' , position : 'shooting guard' , 'shooting percentage' : '75%' }

الوصول إلى البيانات في كائن JavaScript باستخدام ترميز الأقواس (Bracket Notation)

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

 const animal = {
  type : "cat" ,
  name : "kitty" ,
  sounds() {
  console .log( "meow meow" )
  }
 };

دعنا نحصل على القيمة المرتبطة بالمفتاح name. للقيام بذلك، قم بتغليف اسم المفتاح بعلامات اقتباس وضعه بين قوسين مربعين. هذه هي البنية: objectName["keyName"]. إليك الكود الذي ستكتبه باستخدام ترميز الأقواس: animal["name"];. هذا تفصيل للكود أعلاه:

• animal هو اسم الكائن.
• ["name"] هو اسم المفتاح محاطًا بأقواس مربعة.

إليك مثال آخر:

 console .log(animal[ "sounds" ]());
 //Result: meow meow undefined

لاحظ أن sounds() هي طريقة (method)، ولهذا السبب أضفت الأقواس في النهاية لاستدعائها. هذه هي كيفية استدعاء طريقة باستخدام ترميز النقطة:

 console .log(animal.sounds());
 //Result: meow meow undefined

طرق الكائنات في JavaScript: استرجاع المفاتيح والقيم

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

 const runner = {
  name : "Jessica" ,
  age : 20 ,
  milesPerWeek : 40 ,
  race : "marathon"
 };

استخدم الطريقة Object.keys() لاسترجاع جميع أسماء المفاتيح من كائن. هذه هي البنية: Object.keys(objectName). يمكننا استخدام هذه الطريقة على كائن runner أعلاه:

 Object .keys(runner);

إذا قمت بطباعة النتيجة، فستحصل على مصفوفة من مفاتيح الكائن:

 console .log( Object .keys(runner));
 //Result: [ 'name', 'age', 'milesPerWeek', 'race' ]

وبالمثل، يمكنك استخدام الطريقة Object.values() للحصول على جميع القيم من كائن. هذه هي البنية: Object.values(objectName). الآن سنحصل على جميع القيم من كائن runner:

 console .log( Object .values(runner));
 //Result: [ 'Jessica', 20, 40, 'marathon' ]

ملخص لأهم المفاهيم في كائنات JavaScript

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

• الكائنات (Objects): تُستخدم لتخزين البيانات كخصائص (أزواج مفتاح-قيمة).
• مفاتيح الكائنات (Object Keys): يجب أن تكون سلاسل نصية (strings)، أو رموز (symbols)، أو أرقام (numbers). تتطلب المفاتيح التي تحتوي على مسافات أو واصلات أو تبدأ بأرقام استخدام علامات اقتباس.
• قيم الكائنات (Object Values): يمكن أن تكون أي نوع بيانات (سلاسل نصية، أرقام، قيم منطقية، مصفوفات، دوال، إلخ).
• الوصول إلى خصائص الكائن (Accessing Object Properties):
  • ترميز النقطة (Dot Notation): objectName.keyName. مفضل للأسماء البسيطة.
  • ترميز الأقواس (Bracket Notation): objectName["keyName"]. يوفر مرونة أكبر للأسماء المعقدة.
• حذف خاصية (Deleting a Property): استخدم العامل delete مع ترميز النقطة أو الأقواس: delete objectName.keyName أو delete objectName["keyName"].
• استرجاع جميع المفاتيح أو القيم:
  • Object.keys(objectName): لإرجاع مصفوفة بجميع المفاتيح.
  • Object.values(objectName): لإرجاع مصفوفة بجميع القيم.

الخلاصة التقنية

تُعد كائنات JavaScript أداة لا غنى عنها في ترسانة أي مطور. إن فهم كيفية تنظيم البيانات في أزواج مفتاح-قيمة، والقدرة على التلاعب بهذه البيانات بكفاءة باستخدام ترميز النقطة والأقواس، يفتح الباب أمام بناء تطبيقات أكثر قوة وتنظيمًا. المرونة التي توفرها الكائنات في استيعاب أنواع بيانات مختلفة، بما في ذلك الدوال كـ “طرق”، تجعلها مثالية لتمثيل الكيانات المعقدة في العالم الحقيقي. إتقان هذه المفاهيم الأساسية ليس مجرد خطوة أولى، بل هو أساس متين للتوسع في مفاهيم JavaScript الأكثر تقدمًا مثل البرمجة الشيئية (Object-Oriented Programming) والتعامل مع البيانات المهيكلة (Structured Data) بكفاءة عالية.