كيفية استخدام وظائف المصفوفات في الجافا سكريبت – توابع التعديل

تُعدّ المصفوفات (Arrays) أحد أهم هياكل البيانات في لغة جافا سكريبت (JavaScript)، وتُستخدم بشكل واسع في التعامل مع مجموعات من البيانات المرتبة. تعتبر توابع المصفوفات المخصصة للتعديل من الأدوات الأساسية في تطوير البرمجيات الحديثة، وخاصة في تطبيقات الويب والواجهات التفاعلية. وتشمل توابع التعديل مجموعة من الدوال التي تمكّن المطوّر من إضافة، حذف، تعديل، أو إعادة ترتيب عناصر المصفوفة بطريقة فعالة ومباشرة دون الحاجة إلى كتابة كود يدوي معقد.

تتميز توابع التعديل بأنها تؤثر بشكل مباشر على المصفوفة الأصلية، على عكس توابع أخرى في جافا سكريبت قد تُعيد نسخة جديدة من المصفوفة دون تعديل الأصل. من خلال هذا المقال المفصل، سيتم تناول أهم توابع التعديل على المصفوفات في جافا سكريبت، مع شرح مفصل لكل واحدة منها، مدعومًا بأمثلة عملية وملاحظات تقنية دقيقة تساعد المطورين على استخدامها بطريقة احترافية.

المفهوم الأساسي لتوابع التعديل

توابع تعديل المصفوفات (Mutator Methods) هي دوال تُستخدم لتعديل محتوى المصفوفة الأصلية بشكل مباشر. وتُعدّ هذه الدوال أدوات جوهرية في عملية المعالجة الديناميكية للبيانات، مثل التفاعل مع المستخدم أو التحديثات اللحظية لواجهات المستخدم (UI).

أهم توابع التعديل في جافا سكريبت تشمل:

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

• copyWithin()

• fill()

سيتم شرح كل تابع على حدة في الفقرات التالية.

تابع push()

يُستخدم push() لإضافة عنصر أو أكثر إلى نهاية المصفوفة.

الصيغة:

javascript
CopyEdit
array.push(element1, element2, ..., elementN);

مثال عملي:

javascript
CopyEdit
let fruits = ['apple', 'banana'];
fruits.push('orange', 'grape');
console.log(fruits); // ['apple', 'banana', 'orange', 'grape']

ملاحظات تقنية:

• يُعيد push() الطول الجديد للمصفوفة بعد الإضافة.

• يمكن استخدامه في سياقات عديدة مثل إضافة عناصر بناءً على إدخال المستخدم.

تابع pop()

يُستخدم pop() لإزالة آخر عنصر من المصفوفة وإرجاعه.

الصيغة:

javascript
CopyEdit
let removedElement = array.pop();

مثال:

javascript
CopyEdit
let colors = ['red', 'blue', 'green'];
let lastColor = colors.pop();
console.log(colors); // ['red', 'blue']
console.log(lastColor); // 'green'

ملاحظات:

• هذا التابع يعد مثاليًا لتطبيقات قائمة على مبدأ “LIFO” (Last In, First Out).

تابع shift()

يقوم shift() بحذف أول عنصر من المصفوفة وإرجاعه.

الصيغة:

javascript
CopyEdit
let removedItem = array.shift();

مثال:

javascript
CopyEdit
let queue = [1, 2, 3];
let firstItem = queue.shift();
console.log(queue); // [2, 3]
console.log(firstItem); // 1

ملاحظات:

• يُعتبر مثاليًا في تطبيقات قائمة الانتظار أو تنفيذ المهام المتسلسلة (FIFO).

تابع unshift()

يُستخدم unshift() لإضافة عنصر أو أكثر إلى بداية المصفوفة.

الصيغة:

javascript
CopyEdit
array.unshift(element1, element2, ..., elementN);

مثال:

javascript
CopyEdit
let tasks = ['task2', 'task3'];
tasks.unshift('task1');
console.log(tasks); // ['task1', 'task2', 'task3']

ملاحظات:

• يُعيد عدد العناصر الجديد في المصفوفة.

• الأداء قد يتأثر في المصفوفات الكبيرة لأنه يتطلب إعادة ترتيب كل العناصر.

تابع splice()

يُعد من أقوى توابع التعديل، حيث يُستخدم لإضافة أو إزالة أو استبدال عناصر في أي مكان من المصفوفة.

الصيغة:

javascript
CopyEdit
array.splice(start, deleteCount, item1, item2, ...);

مثال 1 – حذف عناصر:

javascript
CopyEdit
let items = ['a', 'b', 'c', 'd'];
items.splice(1, 2); // تحذف 'b' و 'c'
console.log(items); // ['a', 'd']

مثال 2 – إضافة عناصر:

javascript
CopyEdit
let numbers = [1, 4, 5];
numbers.splice(1, 0, 2, 3); // تُضيف 2 و 3 في الموضع 1
console.log(numbers); // [1, 2, 3, 4, 5]

ملاحظات:

• تابع متعدد الاستخدامات وقوي جدًا في التلاعب بالمصفوفات.

• التعديل يتم مباشرة على المصفوفة.

تابع sort()

يُستخدم لترتيب عناصر المصفوفة حسب الترتيب الأبجدي أو باستخدام دالة مقارنة مخصصة.

الصيغة:

javascript
CopyEdit
array.sort([compareFunction]);

مثال:

javascript
CopyEdit
let names = ['Zoe', 'Alice', 'John'];
names.sort();
console.log(names); // ['Alice', 'John', 'Zoe']

مثال مع دالة مقارنة:

javascript
CopyEdit
let numbers = [10, 1, 20];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 10, 20]

ملاحظات:

• لا يُعتبر مناسبًا للترتيب العددي بدون استخدام دالة مقارنة.

• التابع يُعدّل المصفوفة الأصلية مباشرة.

تابع reverse()

يُستخدم لعكس ترتيب عناصر المصفوفة.

الصيغة:

javascript
CopyEdit
array.reverse();

مثال:

javascript
CopyEdit
let letters = ['a', 'b', 'c'];
letters.reverse();
console.log(letters); // ['c', 'b', 'a']

تابع copyWithin()

ينسخ مجموعة من عناصر المصفوفة إلى موقع آخر داخل نفس المصفوفة.

الصيغة:

javascript
CopyEdit
array.copyWithin(target, start, end);

مثال:

javascript
CopyEdit
let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // نسخ من الموضع 3 إلى البداية
console.log(arr); // [4, 5, 3, 4, 5]

تابع fill()

يملأ كل عناصر المصفوفة بقيمة معينة، أو جزء محدد منها.

الصيغة:

javascript
CopyEdit
array.fill(value, start, end);

مثال:

javascript
CopyEdit
let scores = [1, 2, 3, 4];
scores.fill(0, 1, 3);
console.log(scores); // [1, 0, 0, 4]

جدول يلخّص خصائص توابع التعديل

أهمية الفهم العميق لتوابع التعديل

الاعتماد العشوائي على توابع التعديل قد يُسبب نتائج غير متوقعة، خصوصًا في التطبيقات التي تعتمد على البيانات بشكل دقيق أو في البيئات الحساسة مثل الخوادم أو الواجهات المالية. الفهم الجيد لهذه التوابع يضمن كتابة أكواد أكثر نظافة وقابلية للصيانة. كما يساعد على تحسين الأداء، حيث إن بعض التوابع مثل splice() أو unshift() قد تكون مكلفة من ناحية الأداء في المصفوفات الكبيرة.

الاستخدام الأمثل في البرمجة الوظيفية

على الرغم من أن توابع التعديل تؤثر على المصفوفة الأصلية، إلا أن فلسفة البرمجة الوظيفية (Functional Programming) تُشجع على تجنّب التعديلات المباشرة. لهذا يُفضّل استخدام التوابع غير المعدّلة مثل map(), filter(), slice() في كثير من الأحيان. لكن في بعض الحالات، لا مفر من التعديل المباشر، وخاصة عند التعامل مع كميات بيانات كبيرة تحتاج إلى تحسينات في الأداء أو عندما يتطلب السياق تحديثًا فوريًا على نفس الكائن في الذاكرة.

الخاتمة

توابع التعديل في جافا سكريبت تُمثّل أحد الركائز الأساسية لإدارة البيانات في المصفوفات بطريقة مرنة وقوية. القدرة على استخدامها بكفاءة تُعد مهارة ضرورية لكل مطور يعمل بلغة JavaScript سواء في الواجهات الأمامية أو الخلفية. من خلال الإلمام الجيد بتوابع مثل push(), pop(), splice()، وغيرها، يصبح بالإمكان تصميم خوارزميات أكثر كفاءة وتحكمًا.

المراجع:

• MDN Web Docs – Array documentation
  
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

• JavaScript: The Definitive Guide, 7th Edition – David Flanagan