في هذا الدرس 5تصفّح المواضيع
Variables VS Arrays VS Objects
المتغيرات و المصفوفات والكائنات في الجافاسكريبت
Variables VS Arrays VS Objects المتغيرات و المصفوفات والكائنات في الجافاسكريبت
هذه مقارنات بين طريقة كتابة المتغيرات Variables والمصفوفات Arrays والكائنات Objects لنتعلم الفرق بين كتابتهم والفروقات بينهم.
HTML
var plane = {name : "MS",model : 2001,weight : "2250kg",color : "White"};
document.write(plane.name,"<br>");
document.write(plane.model);
Arrays vs Objects
الفرق بين المصفوفة والكائنات في الجافاسكريبت
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
طباعة او استخدام واحد من القيم المخزنة بداخل ال object
HTML
var car = {type:"MS", model:"2001", color:"white"};
document.write("<b>"+ car.model +"<b>");
Array Elements Can Be Objects
المصفوفة تكون كائن في الجافاسكريبت
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
تحويل الكائن الي مصفوفة في الجافاسكريبت
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
تحويل المصفوفة الي كائن
Convert array to object تحويل المصفوفة الي كائن
يمكننا تحويل المصفوفة array الي كائن object باستخدام طريقتين مختلفتين وهم
- الطريقة الأولي باستخدام الspread Operator { ... } وهي عن طريق انشاء كائن object ثم اضافة اسم المصفوفة التي تريد تحويلها الي كائن مسبوقة بثلاثة نقاط " . . . " وبهذه الطريقة نكون قد أنشأنا كائن جديد يحتوي علي جميع عناصر المصفوفة
- الطريقة الثانية باستخدام دالة ( )Object.assign ونقوم بتمرير اليها قيمتين القيمة الاولي تكون أقواس متعرجة curly brackets { } والقيمة الثانية تكون أسم الكائن object
باستخدام spread operator
باستخدام دالة ( )Object.assign
HTML
var courses = ["HTML", "CSS", "JS"];
var obj = Object.assign({},courses);
console.log(obj);
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.