٣.٣ عرض عناصر المصفوفة¶

حلقة for¶

التمرين 1: أنشئ مصفوفة تحتوي على 1 و2 و3، واعرض كل عنصر في سطر مستقل.

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

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

1
2
3

التمرين 2: أعد تنفيذ التمرين 1 باستخدام for .

var numbers = [1, 2, 3];
for(var i =0; i<3; i++){
  console.log(numbers[i]);
}

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

1
2
3

نعلم أن numbers[0] تصل إلى العنصر الأول، و numbers[1] إلى الثاني، و numbers[2] إلى الثالث. أنشأنا حلقة for تكرّر المهمة ثلاث مرات، بالفهرسة من 0 إلى أقل من 3، وهو طول المصفوفة.

التمرين 3: لديك الألوان red وgreen وwhite وblack. اعرض كل لون في سطر مستقل. تلميح: استخدم for مع array.length.

var colors = ["red", "green", "white", "black"];
for(var i =0; i < colors.length; i++){
  console.log(colors[i]);
}

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

red
green
white
black

التمرين 4: لديك قائمة من item1 إلى item8. اعرض كل عنصر في سطر مستقل.

var items = ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8"];
for(var i =0; i < items.length; i++){
  console.log(items[i]);
}

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

item1
item2
item3
item4
item5
item6
item7
item8

التمرين 5: لديك قائمة مهام: التأمل، والنادي الرياضي، ومشاهدة فيديو، وتناول وجبة صحية. اعرض كل مهمة في سطر مستقل.

var thingsToDo = ["meditate", "go to gym", "watch a video", "have a healthy meal"];
for(var i =0; i < thingsToDo.length; i++){
  console.log(thingsToDo[i]);
}

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

meditate
go to gym
watch a video
have a healthy meal

التمرين 6: لديك قائمة مشتريات: أوراق وخبز وقلمان وعطر وحليب. اعرض كل عنصر في سطر مستقل.

var thingsToBuy = ["papers", "bread", "2 pencils", "perfume", "milk"];
for(var i =0; i < thingsToBuy.length; i++){
  console.log(thingsToBuy[i]);
}

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

papers
bread
2 pencils
perfume
milk

for...of¶

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

var myWorkEthics = ["Concentrate", "Wait for no result", "Trust your Karma"];
for(item of myWorkEthics){
  console.log(item);
}

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

Concentrate
Wait for no result
Trust your Karma

for...of

for...of نوع آخر من الحلقات في JavaScript، يتيح المرور على قيم عناصر المصفوفة.

صياغة for...of هي for(arrayItem of array){ // statements to execute}

التمرين 8: أعد تنفيذ التمرين 2 باستخدام for...of .

var numbers = [1, 2, 3];
for(number of numbers){
  console.log(number);
}

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

1
2
3

التمرين 9: أعد تنفيذ التمرين 3 باستخدام for...of .

var colors = ["red", "green", "white", "black"];
for(color of colors){
  console.log(color);
}

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

red
green
white
black

التمرين 10: أعد تنفيذ التمرين 4 باستخدام for...of .

var items = ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8"];
for(item of items){
  console.log(item);
}

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

item1
item2
item3
item4
item5
item6
item7
item8

التمرين 11: أعد تنفيذ التمرين 5 باستخدام for...of .

var thingsToDo = ["meditate", "go to gym", "watch a video", "have a healthy meal"];
for(thingToDo of thingsToDo){
  console.log(thingToDo);
}

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

meditate
go to gym
watch a video
have a healthy meal

التمرين 12: أعد تنفيذ التمرين 6 باستخدام for...of .

var thingsToBuy = ["papers", "bread", "2 pencils", "perfume", "milk"];
for(thingToBuy of thingsToBuy){
  console.log(thingToBuy);
}

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

}
papers
bread
2 pencils
perfume
milk

array.forEach()¶

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

var numbers = [100, 200, 300, 400, 500];
numbers.forEach(function(currentItem, index, array){
  console.log(index, currentItem, array);
});

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

0 100 (5) [100, 200, 300, 400, 500]
1 200 (5) [100, 200, 300, 400, 500]
2 300 (5) [100, 200, 300, 400, 500]
3 400 (5) [100, 200, 300, 400, 500]
4 500 (5) [100, 200, 300, 400, 500]

array.forEach()

array.forEach() تُستخدم للمرور على عناصر المصفوفة.

صياغة array.forEach() هي array.forEach(function(currentItem, index, array){// statements to execute});

array.forEach() طريقة للمصفوفات تستقبل دالة وتنفّذها لكل عنصر. يمكن للدالة استقبال ثلاثة معاملات:

currentValue: العنصر الحالي، وهو المعامل المستخدم هنا.
index: فهرس العنصر الحالي، ويمكن إغفاله.
array: المصفوفة نفسها، ويمكن إغفالها.

التمرين 14: ارجع إلى التمرين 3؛ اعرض colors وعناصرها باستخدام forEach().

var colors = ["red", "green", "white", "black"];
colors.forEach(function(current){
  console.log(current);
});

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

red
green
white
black

التمرين 15: ارجع إلى التمرين 4؛ اعرض items وعناصرها باستخدام forEach().

var items = ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8"];
items.forEach(function(item){
  console.log(item);
});

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

item1
item2
item3
item4
item5
item6
item7
item8

التمرين 16: ارجع إلى التمرين 5؛ اعرض thingsToDo وعناصرها باستخدام forEach().

var thingsToDo = ["meditate", "go to gym", "watch a video", "have a healthy meal"];
thingsToDo.forEach(function(thing){
  console.log(thing);
});

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

meditate
go to gym
watch a video
have a healthy meal

التمرين 17: ارجع إلى التمرين 6؛ اعرض thingsToBuy وعناصرها باستخدام forEach() ودالة سهمية.

var thingsToBuy = ["papers", "bread", "2 pencils", "perfume", "milk"];
thingsToBuy.forEach(thing => console.log(thing));

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

papers
bread
2 pencils
perfume
milk

التمرين 18: اعرض فهرس كل عنصر وقيمته في المصفوفة التالية. استخدم forEach .

var days =  ["Sunday","Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

days.forEach(function(day, dayIndex){
   console.log(dayIndex, day);
});

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

0 "Sunday"
1 "Monday"
2 "Tuesday"
3 "Wednesday"
4 "Thursday"
5 "Friday"
6 "Saturday"

التمرين 19: أعد تنفيذ التمرين 18 باستخدام دالة سهمية.

var days =  ["Sunday","Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

days.forEach((day, dayIndex) => console.log(dayIndex, day));

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

0 "Sunday"
1 "Monday"
2 "Tuesday"
3 "Wednesday"
4 "Thursday"
5 "Friday"
6 "Saturday"

التمرين 20: اعرض عناصر المصفوفة التالية باستخدام forEach ودالة سهمية.

var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October', 'November', 'December'];

months.forEach(month => console.log(month));

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

January
February
March
April
May
June
July
August
September
October
November
December

التمرين 21: ارجع إلى التمرين 19؛ ما القيمة المُرجعة من days.forEach()

var days =  ["Sunday","Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

var forEachReturn = days.forEach((day, dayIndex) => console.log(dayIndex, day));

console.log(forEachReturn);

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

0 "Sunday"
1 "Monday"
2 "Tuesday"
3 "Wednesday"
4 "Thursday"
5 "Friday"
6 "Saturday"
undefined

التمرين 22: ارجع إلى التمرين 20؛ ما القيمة المُرجعة من months.forEach()

var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October', 'November', 'December'];

var forEachReturn = months.forEach(month => console.log(month));

console.log(forEachReturn);

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

January
February
March
April
May
June
July
August
September
October
November
December
undefined

array.forEach()

القيمة المُرجعة من array.forEach() هي undefined

طرق متعددة لعرض العناصر!

توجد طرق متعددة لعرض عناصر المصفوفة؛ اختر ما يناسب المهمة وما تفهمه جيدًا.

بالنسبة لي، تبدو حلقة for...of الأسهل والأنسب هنا.