JavaScript

Java Script Object vs Array
الكائنات والمصفوفات في لغة جافا سكريبت

ستتعلم في هذا الدرس ما هو الفرق بين الكائنات والمصفوفات في لغة جافا سكريبت Java Script Object vs Array وكيفة تحويل الكائن الي مصفوفة Convert Object To Array وكيف يمكن تحويل المصفوفه الي كائن Convert Array to Object

التاريخ

06 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1304

المواضيع

24
الشروحات chevron_left Java Script Object vs Array chevron_left JavaScript

Array VS Object
الكائنات والمصفوفات في لغة جافا سكريبت

</> Variables VS Arrays VS Objects
المتغيرات و المصفوفات والكائنات في الجافاسكريبت

هذه مقارنات بين طريقة كتابة المتغيرات Variables والمصفوفات Arrays والكائنات Objects لنتعلم الفرق بين كتابتهم والفروقات بينهم.
var plane = "MS";
document.write(plane);
var plane = ['MS',2001,"2250kg","white"];
document.write(plane);
var plane = {name : "MS",model : 2001,weight : "2250kg",color : "White"};
document.write(plane.name,"<br>");
document.write(plane.model);

</> Arrays vs Objects
الفرق بين المصفوفة والكائنات في الجافاسكريبت

  • المصفوفة JavaScipt Array هي نوع خاص من انواع ال Object ,
  • توجد دالة مدمجة Built-in Function في لغة ال JavaScript وهي typeof وظيفتها ان ترجع لك نوع المتغير الذي نضعة بداخلها , فاذا قمنا بكتابة متغير ال array بداخلها سوف تقوم بأرجاع النوع object يعني ذلك ان المصفوفة array هي في الاصل عبارة عن Object

- جرب هذا المثال لكي تتضح الصورة كاملة 

var courses = ["HTML", "CSS", "JS"];
courses [0] = "PHP";
document.write(typeof(courses));
الفرق بين ال الكائن Object وبين المصفوفة Array :
  • ال Object نقوم بطباعة اسم الكائن ثم بعد علامة النقطة ثم بعد ذلك المفتاح او ما يسمي ب "key" .
  • ال Array نقوم بطباعة اسم المصفوفة ثم بعد ذلك الأقواس المربعة [ ]  للوصول إلي القيمة المطلوبة عن طريق index number  .

طباعة او استخدام واحد من القيم المحزنة بداخل ال array

var courses = ["HTML", "CSS", "JS"];
document.write("<b>"+ courses[0] +"<b>");

طباعة او استخدام واحد من القيم المخزنة بداخل ال object

var car = {type:"MS", model:"2001", color:"white"};
document.write("<b>"+ car.model +"<b>");

</> Array Elements Can Be Objects
المصفوفة تكون كائن في الجافاسكريبت

المصفوفات هي أنواع خاصة من الكائنات objects , لهذا السبب ، يمكن أن يكون لديك متغيرات من أنواع مختلفة في نفس المصفوفة
  • يمكن أن يكون لديك كائنات في المصفوفة array 
  • يمكن أن يكون لديك دوال functions في المصفوفة array 
  • يمكن أن يكون لديك مصفوفة array  في المصفوفة array 
myArray[0] = Date.now;                    /* this is an object   */ 
myArray[1] = myFunction;                 /* this is a function */
myArray[2] = myCars;                        /* this is an array    */
var factory = [ 
 'cars', 
 {
 "model":"2001",
 "color": "red",
 },
 'Motorcycle' ] ;
console.log(factory);

</> Convert Object to array
تحويل الكائن الي مصفوفة في الجافاسكريبت

نستطيع تحويل الكائن object الي مصفوفة array باستخدام عدة دوال مختلفة وهم : 

  • ( )Object.values
  • ( )Object.keys
  • ( )Object.entries 

باستخدام ( )Object.values

var plane= {
  type:"MS", 
  model:2001, 
  color:"white"
}
var propertyValues=Object.values(plane);  
document.write(propertyValues);

باستخدام دالة ( )Object.keys

var plane= {
  type:"MS", 
  model:2001, 
  color:"white"
}
var propertyValues=Object.keys(plane);  
document.write(propertyValues);

باستخدام دالة ( )Object.entries

var plane= {
  type:"MS", 
  model:2001, 
  color:"white"
}
var propertyValues=Object.entries(plane);  
document.write(propertyValues);

</> Convert array to object
تحويل المصفوفة الي كائن

يمكننا تحويل المصفوفة array الي كائن object باستخدام طريقتين مختلفتين وهم 

  • الطريقة الأولي باستخدام الspread Operator { ... } وهي عن طريق انشاء كائن object ثم اضافة اسم المصفوفة التي تريد تحويلها الي كائن مسبوقة بثلاثة نقاط " . . . " وبهذه الطريقة نكون قد أنشأنا كائن جديد يحتوي علي جميع عناصر المصفوفة 
  • الطريقة الثانية باستخدام دالة ( )Object.assign ونقوم بتمرير اليها قيمتين القيمة الاولي تكون أقواس متعرجة curly brackets { } والقيمة الثانية تكون أسم الكائن object

باستخدام spread operator

var courses = ["HTML", "CSS", "JS"];
var obj = {...courses};
console.log(obj);

باستخدام دالة ( )Object.assign

var courses = ["HTML", "CSS", "JS"];
var obj = Object.assign({},courses);
console.log(obj);
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.