المصفوفات في لغة جافاسكربت 7

المصفوفات arrays في لغة جافاسكربت

المصفوفات ( arrays ) لغة javascript هي عبارة عن وسيلة لتخزين البيانات من نوع واحد بشكل مؤقت و تسمى في اللغة الإنجليزية Array. و الغرض من إستخدام المصفوفات هو تخزين البيانات, و يمكن للـ array list أن تحتوي على مجموعة عناصر من نوع بيانات واحد أو اكثر. و تكون البيانات في المصفوفة ضمن أقواس مربعة [].

مثال 1

نفترض أنك تملك شركة أو تعمل في شركة و تُريد أن تخزّن بيانات الموظفين فيها, أكتب إسم الموظف و عمره و حالته الإجتماعية و الدولة.

var name = "Muhammad";
var age = 30;
var isMarried = true;
var country = "Syria";

هكذا نحن سجلنا بيانات موظف واحد ضمن متغيرات فردية, ماذا لو كان لدينا الكثير من الموظفين؟ مثلاً 10 موظفين أو 100 هل سوف نكرر بنفس المثال السابق بهذا العدد الهائل؟

الجواب هو من خلال الـ array list.

طريقة إنشاء مصفوفة في الجافا سكربت بسيطة جداً

var id_1 = ["Muhammad",30,true,"Syria"];
console.log(id_1);

قمنا بتعريف متغير واحد فقط وهو يشير للموظف رقم 1 و كتبنا إسمه id_1 و فتحنا أقواس مربعة ووضعنا بداخلها البيانات المطلوبة لهذا الموظف. ثم قمنا بعرض بيانات هذا الموظف عبر console. ونقوم بتنفيذ الكود في المتصفح و نتوجه إلى console.

نلاحظ من خلال هذه الصورة عرض لنا array4 أي أن هذه المصفوفة بها أربع عناصر وهي العناصر التي كتبناها لبيانات الموظف.

معرفة تمركز العناصر index في مصفوفة

يبدأ عد بيانات المصفوفة من الرقم 0 تصاعدياً أي أول عنصر في المصفوفة يُرمَز له بالرقم 0 و العنصر الثاني 1 و الثالث 2 و على هذا الشكل.

مثال 2

نُريد عرض فقط أول نوع من البيانات من هذه المصفوفة, نكتب ضمن الكونسل رقم 0 هذا يعني أول شيئ ضمن المصفوفة.

var id_1 = ["Muhammad",30,true,"Syria"];
console.log(id_1[0]);

طلبنا من البرنامج عرض فقط قيمة أول عنصر في هذه المصفوفة و هو الذي تمركزه رقم 0 و عندما نشغل الكود

Muhammad

مثال 3

إطلب من البرنامج عرض أكثر من نوع من البيانات من المثال السابق.

var id_1 = ["Muhammad",30,true,"Syria"];
console.log(id_1[0] + id_1[3]);

طلبنا من البرنامج عرض قيمة أول عنصر و رابع عنصر في هذه المصفوفة. و عندما نشغل الكود

MuhammadSyria

معرفة تمركز عنصر عبر indexOf لغة جافاسكربت

إذا كنا لا نُريد عرض بيانات ضمن الـ array, فقط نُريد معرفة تمركز أحد العناصر أي ( ما هو رقم تمركزه ضمن هذه المصفوفة ) يكون هذا عبر indexOf .

مثال 4

var id_1 = ["Muhammad",30,true,"Syria"];
console.log(id_1.indexOf(true));

عن طريق عرض البيانات قلنا للبرنامج أعطنا تمركز الكلمة true في هذه المصفوفة عن طريق إستخدام indexOf. و عند تشغيل الكود

عرض عدد عناصر المصفوفة عبر length()

في حال كان لدينا مصفوفة بها الكثير من البيانات و نريد معرفه عدد البيانات الموجودة في داخل هذه المصفوفة. يمكن معرفة عدد عناصر المصفوفة عبر length() يعطينا عدد عناصر المصفوفة المطلوبة.

مثال 5

ننشئ عنصر h1 في ملف html وربطه في id لعرض البيانات.

<body style="background-color: lime;>
	<h1 id="result"></h1>
</body>

في ملف الجافاسكربت

var months = ["January","February","March"];
document.getElementById("result").innerHTML = months.length;

انشأنا مصفوفة بإسم months و محتواها يظُم أسماء 3 من الأشهر. و إخترنا طريقة عرض البيانات عبر id المرتبط به في ملف html. و قمنا بتحديد إسم المتغير للمصفوفة months التي نريد عرض البيانات بها. و العنصر length() يمكن عن طريقه جلب عدد العناصر الموجودة في داخل المصفوفة. عندما نشغل الكود السابق في المتصفح ستكون نتيجته هي:

هنا أعطانا عدد العناصر التي كانت بداخل المصفوفة array و هي 3 عناصر.

جلب تمركز آخر عنصر متطابق عبر lastIndexOf()

في حال كانت لدينا بيانات متطابقة ضمن مصفوفة ما و نريد أن نعرف أين هو تمركز آخر عنصر متطابق في هذه المصفوفة نستخدم lastIndexOf.

مثال 6

var months = ["January","March","February","March"];
document.getElementById("result").innerHTML = months.lastIndexOf("March");

قمنا بالطلب من البرنامج أن يعطينا آخر تمركز للكلمة March التي توجد أكثر من مرة في البرنامج. عند عرض النتيجة في المتصفح سيأتي لنا بآخر اندكس للعناصر المتشابهة. وعند تشغيله في المتصفح سوف يعطينا الرقم 3 أي هو أندكس آخر كلمة متشابهة من الكلمة التي مررناها له.

حذف آخر خانة في المصفوفة عبر pop()

في حال أردنا حذف عناصر المصفوفة عنصر عنصر من النهاية نستخدم في هذا, الدالة pop() عند إستخدامها سوف يحذف لنا عنصر من نهاية المصفوفة.

مثال 7

في ملف html ننشئ زر و نضع له خاصية النقر onclick.

<button onclick="removeLastItem()">حذف اخر عنصر</button>

و في ملف الجافاسكربت

var months = ["January","March","February","March"];
document.getElementById("result").innerHTML =months;
function removeLastItem(){
	months.pop();
	document.getElementById("result").innerHTML =months;
}

قمنا بإستخدام الدالة pop() للحذف ووصعناها في دالة مرتبطة بزر button و قمنا بعرض البيانات عير html. عند النقر على الزر سوف يحذف آخر قيمة و الضغط مرة ثانية يحذف القيمة التي تسبقها من الأخير ... الخ حتى إنتهاء جميع عناصر المصفوفة.

إضافة قيمة جديدة لنهاية المصفوفة عبر push()

نستطيع إضافة أي بيانات إلى المصفوفة من خلال إستخدام الدالة push() و نقوم بتحديد له البيانات التي نريد إضافتها.

مثال 8

var months = ["January","March","February","March"];
document.getElementById("result").innerHTML =months;
function removeLastItem(){
	months.push("Juni");
	document.getElementById("result").innerHTML =months;
}

بكل نقرة على الزر سوف يضيف الكلمة Juni مرة واحدة و إذا ضغطنا عشرين مرة سوف يطبعه عشرين مرة.

إضافة عنصر للبداية بواسطة unshift()

مثال 9

var months = ["January","March","February","March"];
document.getElementById("result").innerHTML =months;
function removeLastItem(){
	months.unshift("Juni");
	document.getElementById("result").innerHTML =months;
}

عند الضغط على الزر سوف يضيف لنا في البداية Juni بكل ضغطه يضيفها مرة.

ترتيب العناصر حسب الأبجدية عبر sort()

مثال 10

var alphabet = ["d","a","b","c"]
alphabet.sort();
console.log(alphabet.toString());

انشأنا متغير بإسم alphabet و أعطيناه قيم مصفوفة عدة أحرف إنجليزية و بعدها طلبنا ترتيبها عبر sort() و عرض البيانات عبر console.

نسور التقنية Nusur Tech