الدليل النهائي لطرق مصفوفة JavaScript - الخريطة

تقوم map()الطريقة بتطبيق دالة على كل عنصر في مصفوفة وتقوم بإرجاع نسخة من المصفوفة الأصلية بقيم معدلة (إن وجدت).

بناء الجملة:

const newArr = oldArr.map(function(currentValue, index, array) { // Do stuff with currentValue (index and array are optional) });
  • newArr - المصفوفة الجديدة التي تم إرجاعها
  • oldArr- المصفوفة القديمة قيد التشغيل. لن يتم تغيير هذه المجموعة
  • currentValue - القيمة الحالية قيد المعالجة
  • index - الفهرس الحالي للقيمة الجاري معالجتها
  • array - المجموعة الأصلية

أمثلة:

ES5

var arr = [1, 2, 3, 4]; var newArray = arr.map(function(element) { return element * 2 }); console.log(arr); // [1, 2, 3, 4] console.log(newArray); // [2, 4, 6, 8]

ES6

const arr = [1, 2, 3, 4]; const newArray = arr.map(element => { return element * 2; }); const newArrayOneLiner = arr.map(element => element * 2); console.log(arr); // [1, 2, 3, 4] console.log(newArray); // [2, 4, 6, 8] console.log(newArrayOneLiner); // [2, 4, 6, 8]

map ضد forEach

على السطح، و map()و forEach()أساليب متشابهة جدا. كلتا الطريقتين تتكرر من خلال مصفوفة وتطبق دالة على كل عنصر. الفرق الرئيسي هو أن تقوم map()بإرجاع مصفوفة جديدة ، بينما forEach()لا تعيد أي شيء.

إذن ما الطريقة التي يجب أن تستخدمها؟ بشكل عام ، من الأفضل استخدامها forEach()إذا لم تكن بحاجة إلى تغيير القيم في المصفوفة الأصلية. forEach()يعد اختيارًا جيدًا إذا كان كل ما عليك فعله هو تسجيل كل عنصر من عناصر المصفوفة في وحدة التحكم أو حفظها في قاعدة بيانات:

const letters = ['a', 'b', 'c', 'd']; letters.forEach(letter => { console.log(letter); });

map()يعد خيارًا أفضل إذا كنت بحاجة إلى تحديث القيم في المصفوفة الأصلية. إنه مفيد بشكل خاص إذا كنت تريد تخزين المصفوفة المحدثة كمتغير والاحتفاظ بالأصل كمرجع.

كيفية الاستخدام mapمع طرق المصفوفة الأخرى

منذ map()إرجاع مصفوفة ، يمكنك استخدامه مع طرق مصفوفة أخرى لجعل شفرتك أكثر إيجازًا وقابلة للقراءة.

باستخدام mapمعfilter

شيء واحد يجب تذكره أثناء الاستخدام map()هو أنه يطبق دالة على كل عنصر من عناصر المصفوفة الأصلية ، ويعيد مصفوفة جديدة بنفس طول المصفوفة القديمة. بمعنى آخر ، لا يمكن تخطي عناصر المصفوفة التي لا تريد تعديلها:

const nums = [5, 10, 15, 20]; const doublesOverTen = nums.map(num => { if (num > 10) { return num * 2; } }); console.log(doublesOverTen); // [undefined, undefined, 30, 40]

filter()وهنا يأتي دور الطريقة. filter()تُرجع مصفوفة جديدة من العناصر المصفاة التي تلبي شرطًا معينًا ، والتي يمكنك بعد ذلك ربطها map()بـ:

const nums = [5, 10, 15, 20]; const doublesOverTen = nums.filter(num => { return num > 10; }).map(num => { return num * 2; }); console.log(doublesOverTen); // [30, 40]

يمكن تبسيط هذا الرمز بشكل أكبر:

const nums = [5, 10, 15, 20]; const doublesOverTen = nums.filter(num => num > 10).map(num => num * 2); console.log(doublesOverTen); // [30, 40]

باستخدام mapمعreverse

قد تكون هناك أوقات تحتاج فيها إلى عكس مصفوفة أثناء رسم الخرائط من خلالها. و reverse()الأسلوب يجعل هذا سهلا، ولكن من المهم أن نتذكر أنه، بينما map()هو غير قابل للتغيير، reverse()ليست كذلك. بمعنى آخر ، reverse()ستغير العملية المصفوفة الأصلية:

const nums = [1, 2, 3, 4, 5]; const reversedDoubles = nums.reverse().map(num => num * 2); console.log(nums); // [5, 4, 3, 2, 1] console.log(reversedDoubles); // [10, 8, 6, 4, 2]

تتمثل إحدى المزايا الرئيسية لـ map()أنه لا يغير المصفوفة الأصلية ، واستخدام reverse()مثل هذا يتعارض مع الغرض. ومع ذلك ، يعد هذا إصلاحًا بسيطًا - فقط تذكر أن تستخدم map()أولاً ، ثم reverse()تقوم بإرجاع المصفوفة الجديدة:

const nums = [1, 2, 3, 4, 5]; const reversedDoubles = nums.map(num => num * 2).reverse(); console.log(nums); // [1, 2, 3, 4, 5] console.log(reversedDoubles); // [10, 8, 6, 4, 2]

استخدام mapعلى كائن

بينما map()هو مخصص للعمل على المصفوفات ، مع القليل من العمل الإضافي ، يمكنك أيضًا التكرار خلال الكائنات. Object.keys()، Object.values()، Object.entries()وكلها تُرجع مصفوفة ، مما يعني أنه map()يمكن ربطها بسهولة بكل طريقة:

const obj = { a: 1, b: 2, c: 3 } const doubles = Object.values(obj).map(num => num * 2); console.log(doubles); // [2, 4, 6]

الآن انطلق map()وكل الأشياء!