برنامج JavaScript Array of Objects التعليمي - كيفية إنشاء كائنات وتحديثها وتكرارها باستخدام أساليب صفيف JS

في المتوسط ​​، أعمل مع بيانات JSON 18 مرة في الأسبوع. وما زلت بحاجة إلى البحث في Google عن طرق محددة للتعامل معها في كل مرة تقريبًا. ماذا لو كان هناك دليل نهائي يمكنه دائمًا أن يمنحك الإجابة؟

في هذه المقالة ، سأوضح لك أساسيات العمل مع مصفوفات الكائنات في JavaScript.

إذا سبق لك العمل باستخدام بنية JSON ، فقد عملت باستخدام كائنات JavaScript. تماما حرفيا. يرمز JSON إلى JavaScript Object Notation.

إنشاء كائن بهذه البساطة:

{ "color": "purple", "type": "minivan", "registration": new Date('2012-02-03'), "capacity": 7 } 

هذا الكائن يمثل سيارة. يمكن أن يكون هناك العديد من أنواع السيارات وألوانها ، فكل كائن يمثل سيارة معينة.

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

يبدو اعتبار كل عنصر قائمة فئة كما يلي في HTML:

لم أرغب في تكرار هذا الرمز 12 مرة ، مما يجعله غير قابل للاستمرار.

خلق مجموعة من الأشياء

لكن دعنا نعود إلى السيارات. دعنا نلقي نظرة على هذه المجموعة من السيارات:

يمكننا تمثيلها كمصفوفة بهذه الطريقة:

let cars = [ { "color": "purple", "type": "minivan", "registration": new Date('2017-01-03'), "capacity": 7 }, { "color": "red", "type": "station wagon", "registration": new Date('2018-03-03'), "capacity": 5 }, { ... }, ... ] 

لا تبقى مصفوفات الكائنات كما هي طوال الوقت. نحتاج دائمًا للتلاعب بهم. لذلك دعونا نلقي نظرة على كيفية إضافة كائنات إلى مصفوفة موجودة بالفعل.

أضف كائنًا جديدًا في البداية - Array.unshift

لإضافة كائن في الموضع الأول ، استخدم Array.unshift.

let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); 

أضف كائنًا جديدًا في النهاية - Array.push

لإضافة كائن في الموضع الأخير ، استخدم Array.push.

let car = {  "color": "red",  "type": "cabrio",  "registration": new Date('2016-05-02'),  "capacity": 2 } cars.push(car); 

أضف كائنًا جديدًا في المنتصف - Array.splice

لإضافة كائن في المنتصف ، استخدم Array.splice. هذه الوظيفة مفيدة للغاية حيث يمكنها أيضًا إزالة العناصر. احترس من المعلمات:

Array.splice( {index where to start}, {how many items to remove}, {items to add} ); 

لذلك إذا أردنا إضافة فولكس فاجن كابريو الحمراء في المركز الخامس ، فسنستخدم:

let car = {  "color": "red",  "type": "cabrio",  "registration": new Date('2016-05-02'),  "capacity": 2 } cars.splice(4, 0, car); 

التكرار خلال مجموعة من الكائنات

دعني أطرح عليك سؤالاً هنا: لماذا تريد المرور عبر مجموعة من الكائنات؟ سبب سؤالي هو أن الحلقات ليست هي السبب الرئيسي لما نريد تحقيقه.

توفر JavaScript العديد من الوظائف التي يمكنها حل مشكلتك دون تنفيذ المنطق فعليًا في دورة عامة. لنلقي نظرة.

ابحث عن كائن في مصفوفة بقيمه - Array.find

لنفترض أننا نريد العثور على سيارة حمراء. يمكننا استخدام الوظيفة Array.find.

let car = cars.find(car => car.color === "red"); 

تُرجع هذه الوظيفة العنصر المطابق الأول:

console.log(car); // output: // { //   color: 'red', //   type: 'station wagon', //   registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', //   capacity: 5 // } 

من الممكن أيضًا البحث عن قيم متعددة:

let car = cars.find(car => car.color === "red" && car.type === "cabrio");

في هذه الحالة ، سنحصل على آخر سيارة في القائمة.

احصل على عناصر متعددة من مصفوفة تطابق شرطًا - Array.filter

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

let redCars = cars.filter(car => car.color === "red"); console.log(redCars); // output: // [ // { //    color: 'red', //    type: 'station wagon', //    registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', //    capacity: 5 //  }, // { //    color: 'red', //    type: 'cabrio', //    registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)', //    capacity: 2 //  } // ] 

تحويل كائنات المصفوفة - Array.map

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

let sizes = cars.map(car => { if (car.capacity <= 3){ return "small"; } if (car.capacity <= 5){ return "medium"; } return "large"; }); console.log(sizes); // output: // ['large','medium','medium', ..., 'small'] 

من الممكن أيضًا إنشاء كائن جديد إذا احتجنا إلى المزيد من القيم:

let carsProperties = cars.map(car => { let properties = { "capacity": car.capacity, "size": "large" };  if (car.capacity <= 5){    properties['size'] = "medium";  }  if (car.capacity <= 3){    properties['size'] = "small";  } return properties; }); console.log(carsProperties); // output: // [ //   { capacity: 7, size: 'large' }, //   { capacity: 5, size: 'medium' }, //   { capacity: 5, size: 'medium' }, //   { capacity: 2, size: 'small' }, // ... // ] 

أضف خاصية لكل كائن في المصفوفة - Array.forEach

But what if we want the car object too? In that case we can enhance the object for a new property size. This is a good use-case for the Array.forEach function.

cars.forEach(car => { car['size'] = "large";  if (car.capacity <= 5){    car['size'] = "medium";  }  if (car.capacity <= 3){    car['size'] = "small";  } }); 

Sort an array by a property - Array.sort

When we're done with transforming the objects, we usually need to sort them one way or another.

Typically, the sorting is based on a value of a property every object has. We can use the Array.sort function, but we need to provide a function that defines the sorting mechanism.

Let's say we want to sort the cars based on their capacity in descending order.

let sortedCars = cars.sort((c1, c2) => (c1.capacity  c2.capacity) ? -1 : 0); console.log(sortedCars); // output: // [ // { // color: 'purple', // type: 'minivan', // registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)', // capacity: 7 // }, // { // color: 'red', // type: 'station wagon', // registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', // capacity: 5 // }, // ... // ] 

The Array.sort compares two objects and puts the first object in the second place if the result of the sorting function is positive. So you can look at the sorting function as if it was a question: Should the first object be placed in second place?

Make sure to always add the case for zero when the compared value of both objects is the same to avoid unnecessary swaps.

Checking if objects in array fulfill a condition - Array.every, Array.includes

Array.every and Array.some come handy when we just need to check each object for a specific condition.

Do we have a red cabrio in the list of cars? Are all cars capable of transporting at least 4 people? Or more web-centric: Is there a specific product in the shopping cart?

cars.some(car => car.color === "red" && car.type === "cabrio"); // output: true cars.every(car => car.capacity >= 4); // output: false 

You may remember the function Array.includes which is similar to Array.some, but works only for primitive types.

Summary

In this article, we went through the basic functions that help you create, manipulate, transform, and loop through arrays of objects. They should cover most cases you will stumble upon.

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

أو تواصل معي وسأقوم بإعداد مقال آخر :-)