تعريف المصفوفات باستخدام JavaScript Array Const - Const

-

بنحكي في هذا الدرس عن تعريف المصفوفات Arrays باستخدام Const (ECMAScript 2015 (ES6)) وشو هي ميزات هذه الطريقة وليش نستخدمها.

اصبح استخدام Const مع المصفوفات امر شائع جدا. بسبب مجموعة من الميزات منها 

  • لا يمكن إعادة التعيين Cannot be reassigned
  • نطاق مغلق Block Scope
  • قيمة بدائية Primitive value.
  • يمكن تغيير القيم الموجودة داخل Const array، ويمكنها إضافة عناصر جديدة إليها، ولكن لا يمكن الإشارة إلى مصفوفة جديدة cannot reference to a new array.
  • يُسمح بإعادة تعريف Const variable داخل نطاق block scope.
  • انشاء reference للقراءة فقط read only للقيمة.

تمام نفهم شو يعني هذا الحكي بأمثلة. 

نطبق مثال بسيط:

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="demo"></p>
<script>
const Cars = ["BMW","Mercedes","Jaguar"];
document.write(Cars);
document.write("<br>");
</script>
</body>
</html> 

النتيجة:


ما عملنا شي جديد في هذه المثال غير تغيير طريقة تعريف المصفوفة الى Const ومن ثم طباعة المصفوفة

لا يمكن إعادة التعيين Cannot be reassigned

نطبق مثال حتى نفهم الفكرة:

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="demo"></p>
<script>
const Cars = ["BMW","Mercedes","Jaguar"];
Cars = ["Toyota","hyundai","Jaguar"];
document.write(Cars);
document.write("<br>");
</script>
</body>
</html> 

النتيجة:  


حاولنا في المثال السابق إعادة استخدام المصفوفة const وإعادة تعيين قيمة لها لكن كانت النتيجة خطأ 

Assignment to constant variable

السبب هو استخدام const وهذا هو المقصود ب لا يمكن إعادة التعيين Cannot be reassigned

لكن مع ذلك يمكن إعادة تعيين وتغير القيم داخل المصفوفة، بمعني اخر يمكن تغير القيمة حسب index داخل المصفوفة. ويمكن الإضافة والحذف من المصفوفة ( المنع بكون بكون على مستوى المصفوفة كامل)

مثال  (تغيير قيمة العنصر الأول في المصفوفة):

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="demo"></p>
<script>
const Cars = ["BMW","Mercedes","Jaguar"];
document.write(Cars);
document.write("<br>");
Cars[0]="Toyota";
document.write(Cars);
document.write("<br>");
</script>
</body>
</html> 

النتيجة : 


مثال إضافة عنصر الى المصفوفة باستخدام push 

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="demo"></p>
<script>
const Cars = ["BMW","Mercedes","Jaguar"];
document.write(Cars);
document.write("<br>");
Cars[0]="Toyota";
document.write(Cars);
document.write("<br>");
Cars.push("Audi");
document.write(Cars);
document.write("<br>");
</script>
</body>
</html> 

النتيجة : 


مثال حذف عنصر من المصفوفة باستخدام shift

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="demo"></p>
<script>
const Cars = ["BMW","Mercedes","Jaguar"];
document.write(Cars);
document.write("<br>");
Cars[0]="Toyota";
document.write(Cars);
document.write("<br>");
Cars.shift();
document.write(Cars);
document.write("<br>");
</script>
</body>
</html> 

النتيجة: 


ملاحظة : يجب تعيين القيم عند تعريف المصفوفة باستخدام const (بمعنى آخر اذا تم التعريف وبعدها تم تعيين القيم الى المصفوفة اكيد بتكون النتيجة خطأ).

مثال 

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="demo"></p>
<script>
const Cars ;
Cars = ["BMW","Mercedes","Jaguar"];
document.write(Cars);
document.write("<br>");
Cars[0]="Toyota";
document.write(Cars);
document.write("<br>");
Cars.shift();
document.write(Cars);
document.write("<br>");
</script>
</body>
</html> 

النتيجة: 


السبب في هذا الخطأ هو ان استخدام كلمة const يتطلب تعيين القيم مباشرة مع التعريف. ( يمكن تعيين القيم بعد التعريف عند استخدام var) 

مثال

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Array</h3>
<p id="demo"></p>
<script>
var Cars ;
Cars = ["BMW","Mercedes","Jaguar"];
document.write(Cars);
document.write("<br>");
Cars[0]="Toyota";
document.write(Cars);
document.write("<br>");
Cars.shift();
document.write(Cars);
document.write("<br>");
</script>
</body>
</html> 

النتيجة: 


نطاق مغلق Block Scope

أي تعريف في لغة JavaScript باستخدام const يكون له scope مغلق ، يمعنى ان التعريف يكون ضمن هذا scope فقط ولن يتم التعرف عليه في أي مكان آخر.