ديفكوم- طرق التعامل مع المصفوفات -الجزء الأول JavaScript Methods Arrays part 1 التفاصيل

المقالات

طرق التعامل مع المصفوفات -الجزء الأول JavaScript Methods Arrays part 1

-

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

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

()toString
()join
()shift
()unshift
()Array length
()delete

طريقة ()toString

في هذ الطريقة يتم تحويل القيم في Array الى string بينها فواصل (comma separated)

مثال:

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
document.write(MyArray.toString());
document.write("<br>");
</script>
</body>
</html>

النتيجة

طريقة ()join

تشبه هذه الطريقة طريقة ()toString لكن الفرق ان في هذه الطريقة يمكن تحديد الفاصل separator بين عناصر المصفوفة.

مثال: اذا كان المطلوب إضافة العلامة $ الى عناصر المصفوفة وطباعة نتائجا.

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
document.write(MyArray.join("$"));
document.write("<br>");
</script>
</body>
</html>

النتيجة:

طرق الإضافة والحذف Popping and Pushing

الإضافة في اخر المصفوفة:

يستخدم الامر ()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>

النتيجة:

يستخدم الامر ()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>");
document.write(MyArray.push("Toyota"));
document.write("<br>");
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>

النتيجة:

يستخدم الامر ()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>");
document.write(MyArray.unshift("Toyota"));
document.write("<br>");
document.write(MyArray);
</script>
</body>
</html>

النتيجة:

إضافة عنصر باستخدام length

يمكن استخدام طول المصفوفة للوصول الى اخر مكان في المصفوفة وبعدها إضافة عنصر جديد (الإضافة بتكون في اخر array)

مثال :

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
MyArray[1]="Honda";
MyArray[MyArray.length]="Mazada";
document.write(MyArray);
document.write("<br>");
</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>

النتيجة:

يستخدم الامر ()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>");
document.write(MyArray.pop());
document.write("<br>");
document.write(MyArray);
</script>
</body>
</html>

النتيجة:

تم حذف كلمة Jaguar وطبعناها

لحذف عنصر من اول المصفوفة بنستخدم الامر ()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>

النتيجة:

يستخدم الامر ()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>");
document.write(MyArray.shift());
document.write("<br>");
document.write(MyArray);
</script>
</body>
</html>

النتيجة:

تم حذف اول كلمة وهي BMW ومن ثم طبعناها

الحذف باستخدام delete

يمكن استخدام الامر delete لحذف العناصر من المصفوفة لكن يجب الانتباه الى ان هذا الامر لا يعمل تحريك لبقية عناصر المصفوفة (بمعنى اخر يبقى مكان العنصر الذي تم حذفه فارغ وتكون قيمته تساوي فارغة)

مثال

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
delete MyArray[1]
document.write(MyArray);
document.write("<br>");
</script>
</body>
</html>

النتيجة :

حذف العنصر رقم 1 وقيمتة تساوي 5 وعند الطباعة المكان محجوز لكن بدون قيمة.

تعديل وتغيير العناصر Changing Elements

يمكن تغير قيمة أي عنصر داخل المصفوفة من خلال الوصول له عن طريق index

مثال:

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="Date"></p>
<script>
let MyArray = ["BMW",5,"True","Mercedes","Jaguar"];
MyArray[1]="Honda";
document.write(MyArray);
document.write("<br>");
</script>
</body>
</html>

النتيجة:

غيرنا القيمة 5 في المصفوفة الى Honda وطبعنا النتيجة

اترك تعليقك

الاسم الكامل

البريد الإلكتروني

اضافة تعليق

حفظ