انتقل إلى محتوى الدرس
الدرس 27
دورة جافا سكريبت

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

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

أقسام الدرس
5
الأمثلة
13
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,534
محتوى الدرس
في هذا الدرس 5تصفّح المواضيع

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

هذه مقارنات بين طريقة كتابة المتغيرات Variables والمصفوفات Arrays والكائنات Objects لنتعلم الفرق بين كتابتهم والفروقات بينهم.
HTML
var plane = "MS";
document.write(plane);
HTML
var plane = ['MS',2001,"2250kg","white"];
document.write(plane);
HTML
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

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

HTML
var courses = ["HTML", "CSS", "JS"];
courses [0] = "PHP";
document.write(typeof(courses));

الفرق بين ال الكائن Object وبين المصفوفة Array :

  • ال Object نقوم بطباعة اسم الكائن ثم بعد علامة النقطة ثم بعد ذلك المفتاح او ما يسمي ب "key" .
  • ال Array نقوم بطباعة اسم المصفوفة ثم بعد ذلك الأقواس المربعة [ ]  للوصول إلي القيمة المطلوبة عن طريق index number  .

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

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

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

HTML
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 
HTML
myArray[0] = Date.now;                    /* this is an object   */ 
myArray[1] = myFunction;                 /* this is a function */
myArray[2] = myCars;                        /* this is an array    */
HTML
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

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

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

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

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

HTML
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

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

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

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

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…