كيفية استخدام الخرائط في جافا سكريبت

مقدمة

من حلقة for الكلاسيكية إلى دالة forEach()، تُستخدم تقنيات وأساليب متنوعة لتكرار مجموعة بيانات في JavaScript. من أشهر هذه الأساليب دالة .map(). تُنشئ دالة .map() مصفوفة باستدعاء دالة محددة لكل عنصر في المصفوفة الأصلية. دالة .map() هي دالة غير قابلة للتغيير، تُنشئ مصفوفة js جديدة، على عكس دوال التعديل التي تُجري تغييرات على المصفوفة المُستدعية فقط. لهذه الدالة استخدامات عديدة عند العمل مع المصفوفات. في هذا البرنامج التعليمي، ستشاهد أربعة استخدامات بارزة لدالة .map() في JavaScript: استدعاء دالة من عناصر المصفوفة، تحويل السلاسل النصية إلى مصفوفات، عرض القوائم في مكتبات JavaScript، وإعادة تنسيق كائنات المصفوفة.

المتطلبات الأساسية

لا يتطلب هذا البرنامج التعليمي أي تعليمات برمجية، ولكن إذا كنت تريد متابعة الأمثلة، فيمكنك استخدام Node.js REPL أو أدوات مطور المتصفح.

كيفية استدعاء دالة JS لكل عنصر في المصفوفة

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

وهنا مثال:

const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => {
return sweetItem * 2
})
console.log(sweeterArray)

تم تسجيل هذا الإخراج في وحدة التحكم:

Output
[ 4, 6, 8, 10, 70 ]

يمكن تبسيط ذلك لجعله أكثر نظافة من خلال ما يلي:

// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;
// we have an array
const sweetArray = [2, 3, 4, 5, 35];
// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);

تم تسجيل نفس الإخراج في وحدة التحكم:

Output
[ 4, 6, 8, 10, 70 ]

إن وجود كود مثل sweetArray.map(makeSweeter) يجعل الكود الخاص بك أكثر قابلية للقراءة.

كيفية تحويل سلسلة JS إلى مصفوفة

تنتمي الدالة map() إلى النموذج الأولي للمصفوفة. في هذه الخطوة، ستستخدمها لتحويل سلسلة نصية إلى مصفوفة. لن تُطوّر هنا دالة للسلاسل النصية، بل ستستخدم الدالة الخاصة .call().

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

يمكن تمرير وسيطات السياق والمعلمات إلى وسيطات الوظيفة الرئيسية من خلال Call().

وهنا مثال:

const name = "Sammy"
const map = Array.prototype.map
const newName = map.call(name, eachLetter => {
return `${eachLetter}a`
})
console.log(newName)

تم تسجيل هذا الإخراج في وحدة التحكم:

Output
[ "Sa", "aa", "ma", "ma", "ya" ]

هنا، استخدمت الدالة .map() على سلسلة ومررتَ وسيطة الدالة التي تتوقعها .map().

يعمل هذا مثل طريقة split() لسلسلة، إلا أنه يمكن تغيير كل حرف فردي في السلسلة قبل إرجاعه في مصفوفة.

كيفية عرض القوائم في مكتبات JavaScript

تستخدم مكتبات JavaScript، مثل React، دالة .map() لعرض عناصر القائمة. يتطلب هذا استخدام صيغة JSX، لأن دالة .map() مُضمنة في صيغة JSX.

فيما يلي مثال لمكون React:

import React from "react";
import ReactDOM from "react-dom";
const names = ["whale", "squid", "turtle", "coral", "starfish"];
const NamesList = () => (
<div>
<ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

هذا مكون React بدون جنسية، يُعرِّض عنصر div مع قائمة. تُعرَّض عناصر القائمة الفردية باستخدام دالة .map() للتكرار على مصفوفة من الأسماء. يُعرَّض المكون باستخدام ReactDOM على عنصر DOM ذي مُعرِّف الجذر.

كيفية إعادة تنسيق كائنات مصفوفة JavaScript

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

وهنا مثال:

const myUsers = [
{ name: 'shark', likes: 'ocean' },
{ name: 'turtle', likes: 'pond' },
{ name: 'otter', likes: 'fish biscuits' }
]
const usersByLikes = myUsers.map(item => {
const container = {};
container[item.name] = item.likes;
container.age = item.name.length * 10;
return container;
})
console.log(usersByLikes);

تم تسجيل هذا الإخراج في وحدة التحكم:

Output
[
{shark: "ocean", age: 50},
{turtle: "pond", age: 60},
{otter: "fish biscuits", age: 50}
]

هنا، عدّلت كل كائن في المصفوفة باستخدام تدوين الأقواس والنقط. يمكن استخدام هذه الحالة لمعالجة البيانات المستلمة أو ضغطها قبل تخزينها أو تحليلها في تطبيق واجهة المستخدم.