٣.٤ الدوال المساعدة للمصفوفات — الجزء الأول¶

map()¶

التمرين 1: أنشئ مصفوفة بالأعداد من 0 إلى 10.

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

التمرين 2: ارجع إلى التمرين 1؛ أضف 1 إلى كل عنصر في numbers . تلميح: استخدم forEach.

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
numbers.forEach(function(num, numIndex){
  numbers[numIndex] = num + 1;
});

console.log(numbers);

النتيجة هي: (11) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

التمرين 3: ارجع إلى التمرين 1؛ استبدل كل عدد بمربّعه في numbers . تلميح: استخدم forEach ودالة سهمية.

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
numbers.forEach((num, numIndex) => numbers[numIndex] = num * num);

console.log(numbers);

النتيجة هي: (11) [0, 1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

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

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
numbers.map(function(num, numIndex){
  numbers[numIndex] = num + 1;
});

console.log(numbers);

النتيجة هي: (11) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

التمرين 2 الشيفرة تشبه شيفرة التمرين 4 ، لكن التمرين 4 تستخدم طريقة جديدة للمصفوفات هي map().

التمرين 5: تأمّل الشيفرة وقارنها مع التمرين 3 .

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
numbers.map((num, numIndex) => numbers[numIndex] = num * num);

console.log(numbers);

النتيجة هي: (11) [0, 1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

يبدو أن كلًا من array.map() و array.forEach() يُنتج النتيجة نفسها. لنستكشف أكثر!

التمرين 6: أنشئ مصفوفة جديدة من التالية، بحيث يساوي كل عنصر العنصر المقابل مضافًا إليه 4. تلميح: استخدم map() ودالة سهمية.

var numbers = [10, 20, 30, 40, 50];
var newNumbers = numbers.map(num => num + 4);

console.log(newNumbers);

النتيجة هي: (5) [14, 24, 34, 44, 54]

التمرين 7: ارجع إلى التمرين 6؛ ما عناصر numbers بعد استخدام map()?

var numbers = [10, 20, 30, 40, 50];
var newNumbers = numbers.map(num => num + 4);

console.log(numbers);

النتيجة هي: (5) [10, 20, 30, 40, 50]

map()

باستخدام array.map()يمكن إنشاء مصفوفة جديدة دون تعديل الأصلية في هذا المثال.

array.map() تستقبل دالة وتُرجع مصفوفة جديدة.

تستقبل الدالة ثلاثة معاملات كحد أقصى:

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

التمرين 8: أنشئ مصفوفة جديدة بضرب كل عنصر في المصفوفة التالية في 10.

var numbers = [55, 7, 81, 4515, 479, 10];
var newNumbers = numbers.map(num => num * 10);

console.log(newNumbers);

النتيجة هي: (6) [550, 70, 810, 45150, 4790, 100]

التمرين 9: ارجع إلى التمرين 8؛ هل يمكن استخدام forEach بدلًا من map() لإنتاج newNumbers ؟ أثبت إجابتك بشيفرة.

لا يمكن استخدام forEach بدلًا من map() لإرجاع مصفوفة جديدة مباشرةً لأن forEach تُرجع undefined.

var numbers = [55, 7, 81, 4515, 479, 10];
var newNumbers = numbers.forEach(num => num * 10);

console.log(newNumbers);

النتيجة هي: undefined

التمرين 10: ارجع إلى التمرين 9؛ هل يمكنك اتباع طريقة أخرى لإنشاء newNumbers باستخدام forEach?

var numbers = [55, 7, 81, 4515, 479, 10];
var newNumbers = [];

numbers.forEach((num, numIndex) => newNumbers[numIndex] = num * 10);

console.log(newNumbers);

النتيجة هي: (6) [550, 70, 810, 45150, 4790, 100]

التمرين 11: أنشئ مصفوفة جديدة تحتوي فقط على الأعداد الزوجية من التالية. تلميح: استخدم map() ودالة سهمية.

var numbers = [580, 710, 10, 45, 781, 12];
var newNumbers = numbers.map(num => ((num % 2) === 0 ? num : "not even"));
console.log(newNumbers);

النتيجة هي: (6) [580, 710, 10, "not even", "not even", 12]

التمرين 12: أنشئ مصفوفة جديدة تحتوي فقط على الأعداد الفردية من التالية. تلميح: استخدم map() ودالة سهمية.

var numbers = [580, 710, 10, 45, 781, 12];
var newNumbers = numbers.map(num => ((num % 2) !== 0 ? num : "not odd"));
console.log(newNumbers);

النتيجة هي: (6) ["not odd", "not odd", "not odd", 45, 781, "not odd"]

عامل باقي القسمة %

عامل باقي القسمة % يُرجع الباقي الناتج عن قسمة عددين.

filter()¶

التمرين 13: أعد تنفيذ التمرين 11 مع استبدال map بـ filter، واحذف العامل الثلاثي أيضًا، ثم افحص النتيجة.

var numbers = [580, 710, 10, 45, 781, 12];
var newNumbers = numbers.filter(num => (num % 2 === 0));

console.log(newNumbers);

النتيجة هي: (4) [580, 710, 10, 12]

filter()

باستخدام array.filter()يمكن إنشاء مصفوفة جديدة تضم العناصر التي تحقق شرط الدالة، دون تغيير الأصلية.

array.filter() تستقبل دالة وتُرجع مصفوفة جديدة.

تستقبل الدالة ثلاثة معاملات كحد أقصى:

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

التمرين 14: أعد تنفيذ التمرين 13 باستخدام filter().

var numbers = [580, 710, 10, 45, 781, 12];
var newNumbers = numbers.filter(num => (num % 2 !== 0 ));

console.log(newNumbers);

النتيجة هي: (2) [45, 781]

التمرين 15: أنشئ مصفوفة جديدة من التالية تضم السلاسل ذات الطول 3 فقط.

var names = ["Sami", "Sanad", "Ali", "Nawras", "Jad", "Ola", "JoJo", "Ahmed", "Lolo"];
var shortNames = names.filter(function(name){
       return name.length === 3;
});

console.log(shortNames);

النتيجة هي: (3) ["Ali", "Jad", "Ola"]

التمرين 16: أنشئ مصفوفة جديدة تضم القيم الصادقة فقط من الأصلية.

var values = ["value1", undefined, "val9", null, false, true, 87];
var trueValues = values.filter(value => !!value);

console.log(trueValues);

النتيجة هي: (4) ["value1", "val9", true, 87]

التمرين 17: أنشئ مصفوفة جديدة تضم القيم الكاذبة فقط من الأصلية.

var values = ["value1", undefined, "val9", null, false, true, 87];
var falseValues = values.filter(value => !value);

console.log(falseValues);

النتيجة هي: (3) [undefined, null, false]

التمرين 18: رشّح المصفوفة التالية لتبقى القيم التي تساوي 1 فقط.

var numbers = [5, 2, 1, 5, 87, 1, 9, 100, 10, 0, 1];
var ones = numbers.filter(num =>  num === 1);

console.log(ones);

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

التمرين 19: رشّح المصفوفة التالية لتبقى الأصفار فقط.

var numbers = [5, 2, 1, 5, 87, 1, 9, 100, 10, 0, 1, 0, 1, 0];
var zeros = numbers.filter(num =>  num === 0);

console.log(zeros);

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

التمرين 20: رشّح المصفوفة لتضم الأعداد الأكبر من 50 فقط.

var numbers = [5, 2, 1, 5, 87, 1, 9, 100, 10, 0, 1, 0, 1, 0];
var greatThan50 = numbers.filter(num =>  num > 50);

console.log(greatThan50);

النتيجة هي: (2) [87, 100]

التمرين 21: رشّح المصفوفة لتضم الأعداد الموجبة فقط.

var numbers = [5, 2, 1, -5, 87, -1, 9, 100, -10, 0, 1, 0, 1, 0];
var positiveNumbers = numbers.filter(num =>  num >= 0);

console.log(positiveNumbers);

النتيجة هي: (11) [5, 2, 1, 87, 9, 100, 0, 1, 0, 1, 0]

التمرين 22: رشّح المصفوفة لتضم الأعداد السالبة فقط.

var numbers = [5, 2, 1, -5, 87, -1, 9, 100, -10, 0, 1, 0, 1, 0];
var negativeNumbers = numbers.filter(num =>  num < 0);

console.log(negativeNumbers);

النتيجة هي: (3) [-5, -1, -10]

التمرين 23: أنشئ مصفوفة جديدة من التالية دون قيم null.

var values = ["null", 0, "Something", "undefined", null, false, true, null, "not to include", undefined, undefined];
var newValues = values.filter(function(value){
  return (value !== null);
});

console.log(newValues);

النتيجة هي: (9) ["null", 0, "Something", "undefined", false, true, "not to include", undefined, undefined]

التمرين 24: أنشئ مصفوفة جديدة من التالية دون قيم undefined.

var values = ["null", 0, "Something", "undefined", null, false, true, null, "not to include", undefined, undefined];
var newValues = values.filter(function(value){
  return (value !== undefined);
});

console.log(newValues);

النتيجة هي: (9) ["null", 0, "Something", "undefined", null, false, true, null, "not to include"]

التمرين 25: لنحذف جميع قيم null وundefined من التمرين 23 .

var values = ["null", 0, "Something", "undefined", null, false, true, null, "not to include", undefined, undefined];
var newValues = values.filter(function(value){
  return (value !== null);
}).filter(value => value !== undefined);

console.log(newValues);

النتيجة هي: (7) ["null", 0, "Something", "undefined", false, true, "not to include"]