toSorted() / toReversed() / toSpliced() / with()

نسخ آمنة لا تعدّل المصفوفة الأصلية toSorted() / toReversed() / toSpliced() / with()

أربع دوال حديثة (ES2023) توأم لـ sort/reverse/splice وتعديل عنصر بفهرس، لكنها تُرجع مصفوفة جديدة دون لمس الأصل إطلاقًا.

منذ زمن، sort() وreverse() وsplice() تُعدّل المصفوفة الأصلية بمكانها — سلوك يسبب أخطاءً دقيقة حين لا يتوقعه المبرمج (انظر ملاحظة "الأخطاء الشائعة" بدالة sort()). النسخة الجديدة من كل دالة (باسم يبدأ بـ to أو with) تحل المشكلة جذريًا: تُرجع نسخة جديدة مُعدَّلة وتترك الأصل سليمًا تمامًا، بلا حاجة لـ [...array] يدويًا قبل الاستدعاء.

الصياغة

const sorted = array.toSorted(compareFn);
const reversed = array.toReversed();
const spliced = array.toSpliced(start, deleteCount, ...items);
const updated = array.with(index, newValue);

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

⚡ محرّر تفاعلي

const original = [3, 1, 2];
const sorted = original.toSorted((a, b) => a - b);
console.log(sorted);   // [1, 2, 3]
console.log(original); // [3, 1, 2] — لم يتغيّر إطلاقًا

const updated = original.with(0, 99);
console.log(updated);  // [99, 1, 2]
console.log(original); // [3, 1, 2]

وحدة التحكّم

اضغط «تشغيل» لرؤية النتيجة هنا.

أهم المعاملات

المعامل	الوظيفة
compareFn	دالة مقارنة اختيارية بـ toSorted، تمامًا مثل sort()
index / newValue	بدالة with(): الفهرس المراد تغييره والقيمة الجديدة

💡 نصائح عملية

فضّل هذه الدوال دائمًا بكود يعتمد على immutability (مثل React state) بدل [...array].sort() اليدوية
with(index, value) بديل نظيف لـ array[index] = value حين تريد الاحتفاظ بالأصل

⚠️ أخطاء شائعة

الخلط بينها وبين النسخ القديمة الأصلية (sort/reverse/splice) التي تبقى تُعدّل المكان مباشرة — الاسم فقط هو الفرق

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار JAVASCRIPT الكامل بالعربي.