طرق التعامل مع المصفوفات -الجزء الثاني JavaScript Methods Arrays part 2

-

بنحكي في هذا الدرس طرق التعامل مع Arrays. وتتميز arrays بتوفيرها طرقا مختلفة للتحكم والوصول الى القيم او العناصر داخلها حيث ان كل قيمة او عنصر لها Index خاص بها يمكن من خلاله الوصول له والتعامل مه.

بنحكي في هذ الدرس عن الطرق التالية:

  • Merging (Concatenating) Arrays
  • ()splice
  • ()slice
  • ()Automatic toString

دمج اكثر من مصفوفه Merging (Concatenating) Arrays
يستخدم الامر ()concat لدمج اكثر من مصفوفة والنتيجة مصفوفة واحدة تحتوي جميع عناصر المصفوفات التي تم دمجها.
مثال:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let Cars1 = ["BMW","Mercedes","Jaguar"];
let Cars2 = ["Honda","Toyota","Mazada"];
document.write(Cars1.concat(Cars2));
document.write("<br>");
</script>
</body>
</html> 
النتيجة:

الامر ()concat  يعمل دمج فقط ولا يؤثر على المصفوفات

مثال دمج اكثر من 2 مصفوفه 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let Cars1 = ["BMW","Mercedes","Jaguar"];
let Cars2 = ["Honda","Toyota","Mazada"];
let Cars3 = ["Bentley","Ferrari","lamborghini"];
document.write(Cars1.concat(Cars2,Cars3));
document.write("<br>");
</script>
</body>
</html> 
النتيجة: 

استخدام ()concat لدمج قيمة الى المصفوفة
مثال:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let Cars1 = ["BMW","Mercedes","Jaguar"];
let Cars2 = ["Honda","Toyota","Mazada"];
let Cars3 = ["Bentley","Ferrari","lamborghini"];
document.write(Cars1.concat("nissan",Cars2,Cars3));
document.write("<br>");
</script>
</body>
</html> 
النتيجة:


دمجنا كلمة Nissan الى المصفوفة الأولى cars1 وبعد هيك دمجنا المصفوفة cars2 , cars3

الربط والتقطيع في المصفوفات Splicing and Slicing Arrays
يستخدم الامر ()splice لإضافة او حذف عنصر الى المصفوفة
يستخدم الامر ()slice لقطع قطه من المصفوفة. 
تمام نفهم هذا الحكي.

الإضافة في الامر ()splice
طريقة الكتابة 
ArrayName.splice(parameter1, parameter2,NewItem)
نفهم شو يعني هذا الحكي. 
  • Parameter1 يحدد الموضع position الذي يجب إضافة عناصر جديدة إليه
  • Parameter2 عدد العناصر التي يجب حذفها.
  • NewItem     العناصر الجديدة المراد إضافتها
مثال : 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let Cars1 = ["BMW","Mercedes","Jaguar"];
Cars1.splice(2, 0,"Honda")
document.write(Cars1);
document.write("<br>");
</script>
</body>
</html> 
النتيجة:

الكود السابق يعني : في المكان رقم 2 اضف عنصر جديد باسم Honda، لاحظ ان عدد العناصر المطلوب حذفها في parameter2 يساوي 0 يعني لن يتم حذف شيء. 
مثال 2 :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let Cars1 = ["BMW","Mercedes","Jaguar"];
let Cars2 = ["Honda","Toyota","Mazada"];
let Cars3 = ["Bentley","Ferrari","lamborghini"];
Cars1.splice(2, 1,"Honda")
document.write(Cars1);
document.write("<br>");
</script>
</body>
</html> 
النتيجة :

الكود السابق يعني : في المكان رقم 2 اضف عنصر جديد باسم Honda، لاحظ ان عدد العناصر المطلوب حذفها في parameter2 يساوي 1 يعني سيتم حذف عنصر واحد بعد index رقم 2 واضافة العنصر الجديد مكانه. 
 
تستخدم الامر ()splice أيضا للحصول على العناصر المحذوفة
مثال : 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let Cars1 = ["BMW","Mercedes","Jaguar"];
let Cars2 = ["Honda","Toyota","Mazada"];
let Cars3 = ["Bentley","Ferrari","lamborghini"];
document.write(Cars1.splice(2, 2,"Honda"));
document.write("<br>");
document.write(Cars1);
document.write("<br>");
</script>
</body>
</html> 
النتيجة:

لاحظ ان تم طباعة كلمة Jaguar باستخدام الامر 
Cars1.splice(2, 2,"Honda"));
وهي الكلمة لمحذوفة من المصفوفة 

استخدام ()splice للحذف 
لتطبيق هذا الحكي بنطبق نفس الطريقة السابقة لكن بدون ارسال عنصر جديد للاضافة
 طبق المثال التالي :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let Cars1 = ["BMW","Mercedes","Jaguar"];
let Cars2 = ["Honda","Toyota","Mazada"];
let Cars3 = ["Bentley","Ferrari","lamborghini"];
Cars1.splice(2, 2)
document.write(Cars1);
document.write("<br>");
</script>
</body>
</html> 
النتيجة:

حذفنا العنصر رقم 2 ( parameter1 مكان بداية الحذف ، parameter2 عدد العناصر المطلوب حذفها)

في المثال السابق لو مثلا مطلوب نحذف اخر 2 عنصر من المصفوفة:
الكود:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let Cars1 = ["BMW","Mercedes","Jaguar"];
let Cars2 = ["Honda","Toyota","Mazada"];
let Cars3 = ["Bentley","Ferrari","lamborghini"];
Cars1.splice(1, 2)
document.write(Cars1);
document.write("<br>");
</script>
</body>
</html> 
النتيجة:

الكود السابق يعني :من الموضع رقم 1 احذف بمقدار 2 عنصر 

الامر ()slice
يستخدم هذا الامر لقطع جزء من المصفوفة وتحويلها الى مصفوفة جديده
طريقة الكتابة 
ArrayName.slice(parameter1, parameter2)
  • parameter1 : يحدد مكان القطع في المصفوفة وبداية المصفوفة الجديدة. 
  • parameter2:  يحدد مكان نهاية القطع في المصفوفة (لا يتم ادراجه في المصفوفة الجديده، اختياري، في حال عدم اضافته بكون الافتراضي كامل المصفوفة)
مثال :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let Cars1 = ["BMW","Mercedes","Jaguar","Honda","Toyota","Mazada","Bentley","Ferrari","lamborghini"];
let Cars2 =Cars1.slice(4)
document.write(Cars1);
document.write("<br>");
document.write(Cars2);
document.write("<br>");
</script>
</body>
</html> 

النتيجة:

تم قطع المصفوفة رقم 1 بداية من index رقم 4 وتم انشاء مصفوفة جديدة من index رقم 4 
مثال :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let Cars1 = ["BMW","Mercedes","Jaguar","Honda","Toyota","Mazada","Bentley","Ferrari","lamborghini"];
let Cars2 =Cars1.slice(4,8)
document.write(Cars1);
document.write("<br>");
document.write(Cars2);
document.write("<br>");
</script>
</body>
</html> 
النتيجة :

تم قطع المصفوفة 1 بداية من index رقم 4 وحتي index رقم 8 (رقم 8 لن يتم ادراجه في المصفوفة الجديده).
 
()Automatic toString
يحول JavaScript تلقائيًا المصفوفة إلى string مفصولة بفاصلة comma separated عندما يُتوقع وجود قيمة أولية.