مقدمة الى المصفوفات JavaScript Methods Arrays

-

بنحكي في هذا الدرس عن Arrays والي هي عبارة عن مجموعة او قائمة مرتبة ordered collection من القيم، وهذه القيم مختلفة ممكن تكون ارقام، أسماء، HTML elements، ممكن تكون مثلا مكونات في موقعك مثل بضائع goods، أسماء العملاء ... الخ. ويمكن الوصول الى القيم او العناصر داخلها بسهوله. تتميز arrays بتوفيرها طرقا للتحكم والوصول الى القيم او العناصر داخلها حيث ان كل قيمة او عنصر لها Index خاص بها يمكن من خلاله الوصول له والتعامل مه.

الصورة التالية توضح الفكرة. 

من الصورة يمكن ملاحظة ان array بتتكون من عدد من القيم value المختلفة، وكل قيمه لها index خاص بها. هذه القيم تسمي (Element)
 تتمتع مصفوفة JavaScript بالخصائص التالية:

  • يمكن أن تحتوي على قيم من اناع مختلفة. على سبيل المثال، يمكن أن تحتوي على عناصر element مكونه number, string, and boolean.
  • حجم المصفوفة ديناميكي ويتزايد تلقائيًا dynamic and auto-growing. بعبارة أخرى، قد لا تحتاج إلى تحديد حجم المصفوفة مقدمًا (واكيد اذا كنت عارف الحجم ممكن يتحدد).
لماذا المصفوفات 
لنفرض في الصورة السابقة لو المطلوب نعرف قائمة بأنواع السيارات، فالكود التالي هو المطلوب. 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array </h3>
<p id="Date"></p>
<script>
let car1 = "BMW" ;
let car2 = "Mercedes";
let car3= "Jaguar";
document.write(car1);
document.write("<br>");
document.write(car2);
document.write("<br>");
document.write(car3);
document.write("<br>");
</script>
</body>
</html> 
النتيجة:

تمام بالطريقة السابقة عملنا مجرد تعريف وطباعه لأنواع السيارات.

شو لو كان المطلوب مثلا البحث عن نوع معين واضافة خاصيه له، وشو لو كان عندنا مثلا 100 نوع. اكيد بالطريقة السابقة صعب جدا نعرًف 100 سيارة. الحل هو استخدام المصفوفات بحيث يمكن تعريف عدد لا نهائي من elements 
واضح من الحكي ان المصفوفة هي طريقة يمكن من خلالها تعريف وتخزين مجموعه من القيم في مكان واحد وبالتالي من السهولة الوصول الى القيم بداخلها.  
فهمنا شو هي المصفوفة، ممتاز 

كيفية انشاء Array 
يوفر لك JavaScript طريقتين لإنشاء مصفوفة. 

الطريقة الأولى هو استخدام Array constructor:
في Array constructor يجب استخدام Keyword new  متبوعة ب ()Array لإنشاء المصفوفة 
امثلة على ذلك:
انشاء مصفوفه فارغة بحجم غير محدد

let MyArray = new Array();
في الكود السابق انشأنا مصفوفه باسم MyArray فارغه ( لا تحتوي أي قيم)، وبحجم غير محدد. 

تمام شو لو كنا بنعرف الحجم بكون تعريف المصفوفة بالشكل التالي: 
let MyArray = new Array(10);
هذا الكود يعني ان المصفوفة MyArray تتكون من 10 عناصر فقط. 

انشاء قيم داخل المصفوفة
في الصورة اول الدرس نحاول نطبق الصورة على شكل كود: 
let MyArray = new Array("BMW",5,"True","Mercedes","Jaguar");
لاحظ ان اضفنا القيم المطلوبة داخل المصفوفة من البداية.
عمليا، نادرا ما تستخدم هذه الطريقة عند انشاء Arrays 

الطريقة الثانية : استخدام array literal notation
في هذه الطريقة تستخدم الأقواس المربعة [] لاحتواء قائمة العناصر وتكون مفصولة بفواصل.
نطبق مثال
في الصورة اول الدرس نحاول نطبق الصورة على شكل كود: 
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
مثال لمصفوفة ألوان:
 let colors = ['red', 'green', 'blue'];
انشاء مصفوفة فارغة وغير محدد الحجم
let emptyArray = [];

وبشكل عام بنصح باستخدام طريقة array literal notation للبساطة وسهولة القراءة وسرعة التنفيذ.

الوصول إلى عناصر مصفوفة JavaScript Accessing JavaScript array elements
للوصول الى أي عنصر او قيمة داخل المصفوفة يجب استخدام index (مكان العنصر داخل المصفوفة).
نطبق هذا الحكي على الأمثلة السابقة:

مثال للوصول الى العنصر الأول في المصفوفة.
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array </h3>
<p id="Date"></p>
<script>
let car1 = "BMW" ;
let car2 = "Mercedes";
let car3= "Jaguar";
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
document.write(MyArray[0]);
document.write("<br>");
document.write(MyArray[1]);
document.write("<br>");
document.write(MyArray[2]);
document.write("<br>");
</script>
</body>
</html> 
النتيجة: 

مثال للوصول الى العنصر الأخير في المصفوفة.
الكود:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let car1 = "BMW" ;
let car2 = "Mercedes";
let car3= "Jaguar";
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
document.write(MyArray[MyArray.length-1]);
document.write("<br>");
</script>
</body>
</html> 
النتيجة:

لاحظ ان استخدمنا طول المصفوفة باستخدام الامر length وبعدها نقصنا واحد. (السبب لان المصفوفة تبدأ بالرقم 0، وطول المصفوفة يبدا من 1، في هذا المثال طول المصفوفة يساوي 5 بينما العنصر الأخير موجود في index رقم 4 وبالتالي يجب طرح 1 من طول المصفوفة للحصول على 4)   

العناصر في المصفوفات تبدأ ب index يساوي  0( اول عنصر بكون 0، الثاني يساوي 1 ،  الثالث يساوي 2 .... وهكذا) 

تغيير قيم وعناصر المصفوفة Changing an Array Element
الموضوع بسيط جدا، بنستخدم index الخاص ب elements للمصفوفة للتغير. 
في المثال السابق لو كان المطلوب تغير القيمة True في المصفوفة الى Toyota.
الكود: 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array </h3>
<p id="Date"></p>
<script>
let car1 = "BMW" ;
let car2 = "Mercedes";
let car3= "Jaguar";
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
MyArray[2]="Toyota ";
document.write(MyArray[0]);
document.write("<br>");
document.write(MyArray[1]);
document.write("<br>");
document.write(MyArray[2]);
document.write("<br>");
</script>
</body>
</html> 
النتيجة:

الوصول الى المصفوفة كاملة Access the Full Array
يمكن الوصول الى المصفوفة كاملة بالشكل التالي:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array </h3>
<p id="Date"></p>
<script>
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
document.write(MyArray);
document.write("<br>");
</script>
</body>
</html> 
النتيجة: 


المصفوفات و الكائنات Arrays are Objects
المصفوفات هي أنواع خاصة من الكائنات Arrays are special kinds of objects، بناء عليه يمكن ان يكون دخل المصفوفة أنواع مختلفة من المتغيرات والقيم. وبالتالي يمكن ان تحتوي المصفوفة على: 
  • Objects 
  • Functions 
  • Arrays in an Array  
يمكن تعريف المصفوفات على شكل Object وبالتالي يمكن الوصول الى العناصر داخلها باستخدام names 
مثال:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array </h3>
<p id="Date"></p>
<script>
let MyArray = {Name:"BMW",Color:"Red",Model:"2022"};
document.write(MyArray.Name);
document.write("<br>");
document.write(MyArray.Color);
document.write("<br>");
document.write(MyArray.Model);
document.write("<br>");
</script>
</body>
</html> 
النتيجة:
 
لتعريف المصفوفة على شكل object يجب استخدام الاقواس {}

الخصائص والطرق في المصفوفات Array Properties and Methods
حقيقتا ما يميز المصفوفات JavaScript هي الخصائص والطرق المضمنة داخلها الامر الذي يجعل التعامل معاها أكثر سهولة ومرونة:

نشوف الان كيف نتعرف على طول (حجم المصفوفة).
لمعرفة حجم او طول المصفوفة بنستخدم الامر length
مثال:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
document.write(MyArray.length);
document.write("<br>");
</script>
</body>
</html> 

النتيجة:

طول المصفوفة يبدا من 1 بينما index يبدأ من 0 (يعني الطول دائما اكبر بواحد من اكبر index موجود في المصفوفة).

الإضافة والحذف الى Array Add – Delete 
الإضافة في اخر المصفوفة: 
يستخدم الامر ()push 
 مثال:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
document.write(MyArray);
document.write("<br>");
MyArray.push("Toyota")
document.write(MyArray);
</script>
</body>
</html> 
النتيجة:

يمكن الإضافة بتعيين قيمة الى اخر index في المصفوفة:
مثال :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
document.write(MyArray);
document.write("<br>");
MyArray[5]="Toyota"
document.write(MyArray);
</script>
</body>
</html> 
النتيجة : 

لان اخر index في المصفوفة يساوي 5 ممكن إضافة عنصر بعدو .

ملاحظة : عند محاولة استخدام index اكبر من حجم المصفوفة بتم إضافة قيم فارغة في الأماكن الفارغة.
مثال 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
document.write(MyArray);
document.write("<br>");
MyArray[8]="Toyota"
document.write(MyArray);
</script>
</body>
</html> 
النتيجة:



الإضافة الي بداية المصفوفة :
بنستخدم الامر ()unshift
مثال:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
document.write(MyArray);
document.write("<br>");
MyArray.unshift("Toyota")
document.write(MyArray);
</script>
</body>
</html> 
النتيجة:

الحذف
لحذف عنصر من أخر المصفوفة بنستخدم الامر ()pop : 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
document.write(MyArray);
document.write("<br>");
MyArray.pop();
document.write(MyArray);
</script>
</body>
</html> 
النتيجة:


لحذف عنصر من اول المصفوفة بنستخدم الامر ()shift  : 
مثال
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
document.write(MyArray);
document.write("<br>");
MyArray.shift();
document.write(MyArray);
</script>
</body>
</html> 
النتيجة:



التكرار على العناصر Looping Array Elements
يمكن الوصول الى جميع العناصر الموجودة في المصفوفة باستخدام أوامر التكرار.
مثال لطباعة عناصر المصفوفة باستخدام Loop for
مثال:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
let text = "<ul>";
for (let i = 0; i < MyArray.length; i++) {
  text += "<li>" + MyArray[i] + "</li>";
}
text += "</ul>";
document.write(text);
document.write("<br>");
</script>
</body>
</html> 
النتيجة:


استخدمنا الامر for لقراءة القيم من المصفوفة وعرفنا متغير باسم i لبدء القراءة وبدأنا من الرقم 0 لان اول عنصر في المصفوفة يساوي 0، بعد هيك اضفنا شرط لمدة القراءة وهو حتي يصير i يساوي طول المصفوفة، واضفنا ++i الي بيعني ان كل مرة بزيد قيمة 1. بعد هيك اضفنا قيمة العنصر من المصفوفة الى المتغير text بهدف طباعة العناصر على شكل list 
التكرار باستخدام forEach 
طريقة ثانية لقراءة قيم المصفوفة باستخدام forEach 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
let text = "<ul>";
    MyArray.forEach(myFunction);
  text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
} 
document.write(text);
document.write("<br>");
</script>
</body>
</html> 
النتيجة:



الفرق بين المصفوفات والكائنات The Difference Between Arrays and Objects
الفرق بين المصفوفات والكائنات هي في طريقة الوصول، في المصفوفات يتم الوصول باستخدام  numbered indexes بينما في object يتم الوصول باستخدام named indexes 
المصفوفات هي نوع خاص من الكائنات، مع numbered indexes

كيفية التعرف على المصفوفة How to Recognize an Array
للتعرف على نوع المتغير اذا كان مصفوفه او لا يوجد طريتين 
الطريقة الأولى استخدام الامر 
 Array.isArray()
مثال :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
document.write(Array.isArray(MyArray));
document.write("<br>");
</script>
</body>
</html> 
النتيجة:

الطريقة الثانية استخدام الامر  instanceof 
مثال
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
document.write(MyArray instanceof Array);
document.write("<br>");
</script>
</body>
</html> 
النتيجة: