٣.١ المصفوفات

إنشاء مصفوفة

التمرين 1: أنشئ متغيرًا باسم color1واضبط قيمته على "red".

var color1 = "red";

التمرين 2: أنشئ متغيرًا آخر باسم color2واضبط قيمته على "white".

var color2 = "white";

التمرين 3: أنشئ متغيرًا آخر باسم color3واضبط قيمته على "green".

var color3 = "green";

ماذا لو؟

ماذا لو أردنا إضافة ألوان أخرى؟ هل نُنشئ متغيرًا جديدًا لكل لون؟ لنرَ!

التمرين 4: اقرأ الشيفرة التالية وافهم النتيجة.

var colors = ["red", "white", "green"];
console.log(colors);

النتيجة هي: (3) ["red", "white", "green"]

بدلًا من وضع كل لون في متغير منفصل، جمعنا الألوان في متغير واحد. في التمرين 4تكون قيمة colors قائمة ألوان. نُسمّي هذه القائمة مصفوفة في JavaScript.

التمرين 5: أنشئ مصفوفة بالأعداد من 1 إلى 5، واعرضها في وحدة التحكم.

var numbers = [1, 2, 3, 4, 5];
console.log(numbers);

النتيجة هي: (5) [1, 2, 3, 4, 5].

تُكتب المصفوفة بين قوسين مربعين [].

التمرين 6: أنشئ مصفوفة بأسماء المستخدمين وأرقامهم: "user123" و1563 و"user846" و5528 و"user887" و6542.

var userData = ["user123", 1563, "user846", 5528, "user887", 6542];
console.log(userData);

النتيجة هي: (6) ["user123", 1563, "user846", 5528, "user887", 6542]

ما العدد الذي يظهر قبل المصفوفة في وحدة التحكم؟

طول المصفوفة

التمرين 7: اقرأ الشيفرة التالية وافهم النتيجة.

var colors = ["red", "white", "green"];
console.log(colors, colors.length);

var numbers = [1, 2, 3, 4, 5];
console.log(numbers, numbers.length);

var userData = ["user123", 1563, "user846", 5528, "user887", 6542];
console.log(userData, userData.length);

النتيجة كما يلي:

(3) ["red", "white", "green"] 3
(5) [1, 2, 3, 4, 5] 5
(6) ["user123", 1563, "user846", 5528, "user887", 6542] 6

إنه طول المصفوفة. توجد ثلاثة ألوان في مصفوفة colors ، لذا colors.length هي 3. وتوجد خمسة أعداد في numbers ، لذا numbers.length هي 5. وستة عناصر في userData ، لذا userData.length هي 6.

التمرين 8: لديك المصفوفة التالية var toDo = ["Clean the house", "Read a book", "Listen to a song", "Meditate for 15 minutes"]. اعرض طولها في وحدة التحكم.

var toDo = ["Clean the house", "Read a book", "Listen to a song", "Meditate for 15 minutes"];
console.log(toDo.length);

النتيجة هي: 4.

عناصر المصفوفة

التمرين 9: اعرض العنصر الثالث من المصفوفة التمرين 8 في وحدة التحكم. تلميح: استخدم array[2].

var toDo = ["Clean the house", "Read a book", "Listen to a song", "Meditate for 15 minutes"];
console.log(toDo[2]);

النتيجة هي: Listen to a song

فهرس العنصر الأول هو 0، والثاني 1، والثالث 2، وهكذا. نصل إلى العنصر بكتابة فهرسه بين قوسين مربعين []. كتبنا في مثالنا toDo[2]

التمرين 10: اعرض العنصر الأول من المصفوفة colors في وحدة التحكم.

var colors = ["red", "white", "green"];
console.log(colors[0]);

النتيجة هي: red

التمرين 11: اعرض العنصر الرابع من المصفوفة toDo في وحدة التحكم.

var toDo = ["Clean the house", "Read a book", "Listen to a song", "Meditate for 15 minutes"];
console.log(toDo[3]);

النتيجة هي: Meditate for 15 minutes

التمرين 12: اعرض العنصر السادس من المصفوفة toDo في وحدة التحكم.

var toDo = ["Clean the house", "Read a book", "Listen to a song", "Meditate for 15 minutes"];
console.log(toDo[5]);

النتيجة هي: undefined

لماذا؟

عند قراءة عنصر غير موجود، تُرجع JavaScript undefined لذلك الموضع.

التمرين 13: أنشئ مصفوفة فارغة واعرضها في وحدة التحكم.

var emptyArr = [];
console.log(emptyArr);

النتيجة هي: []

التمرين 14: ما طول المصفوفة المنشأة في التمرين 13.

var emptyArr = [];
console.log(emptyArr.length);

النتيجة هي: 0

التمرين 15: اعرض العنصر الأول من التمرين 14 .

var emptyArr = [];
console.log(emptyArr[0]);

النتيجة هي: undefined

أنواع عناصر المصفوفة

التمرين 16: أنشئ مصفوفة بالعناصر "user56" وtrue و10 وnull و5 وundefined، واعرضها.

var newArr = ["user56", true, 10, null, 5, undefined];
console.log(newArr);

النتيجة هي: (6) ["user56", true, 10, null, 5, undefined]

التمرين 17: افحص نوع كل عنصر في المصفوفة التمرين 16 ، واعرض النتيجة في وحدة التحكم.

var newArr = ["user56", true, 10, null, 5, undefined];
console.log(typeof newArr[0]);
console.log(typeof newArr[1]);
console.log(typeof newArr[2]);
console.log(typeof newArr[3]);
console.log(typeof newArr[4]);
console.log(typeof newArr[5]);

النتيجة كما يلي:

string
boolean
number
object
number
undefined

معلومة

يمكن أن تضم المصفوفة عناصر من أنواع بيانات مختلفة.

المصفوفة

المصفوفة قائمة من العناصر تُكتب بين قوسين مربعين []، ويمكن أن تحتوي على أنواع بيانات مختلفة.

المصفوفات المتداخلة

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

var vegetables = ["potatoes", "tomatoes"];
var fruits = ["bananas", "apples", "oranges"];
var office = ["papers", "3 pens"];

التمرين 19: ارجع إلى التمرين 18؛ اجمع القوائم الفرعية في قائمة المشتريات، واعرض النتيجة.

var vegetables = ["potatoes", "tomatoes"];
var fruits = ["bananas", "apples", "oranges"];
var office = ["papers", "3 pens"];
var thingsToBuy = [vegetables, fruits, office];
console.log(thingsToBuy);

النتيجة هي: (3) [Array(2), Array(3), Array(2)]

ماذا يعني ذلك؟ يعني أن المصفوفة thingsToBuy تحتوي على ثلاث مصفوفات. الأولى Array(2) طولها 2 لأنها تحتوي على عنصرين. والثانية Array(3) طولها 3 لأنها تحتوي على ثلاثة عناصر. والأخيرة Array(2) طولها 2 لأنها تحتوي على عنصرين.

ملاحظة

يمكن وضع مصفوفة داخل مصفوفة أخرى.

التمرين 20: ارجع إلى التمرين 19؛ ساعد سند على الوصول إلى أول عنصر في قائمة الخضروات.

var firstList = thingsToBuy[0];
var firstVegToBuy = firstList[0];
console.log(firstVegToBuy);

ستحصل على: potatoes

يمكنك أيضًا كتابة:

var firstVegToBuy = thingsToBuy[0][0];
console.log(firstVegToBuy);

التمرين 21: ارجع إلى التمرين 19؛ ساعده على الوصول إلى ثاني عنصر في القائمة المكتبية.

var secondOfficeThingToBuy = thingsToBuy[2][1];
console.log(secondOfficeThingToBuy);

النتيجة هي: 3 pens

التمرين 22: ارجع إلى التمرين 19؛ ساعده على الوصول إلى ثالث عنصر في قائمة الفواكه.

var thirdFruitToBuy = thingsToBuy[1][2];
console.log(thirdFruitToBuy);

النتيجة هي: oranges