JavaScript/Array/slice

الدالة Array.prototype.slice()‎ تنسخ جزءًا من المصفوفة نسخًا سطحيًا (shallow copy) إلى مصفوفة جديدًا بدءًا من الفهرس begin إلى end (دون تضمين العنصر الموجود في الفهرس end)؛ لاحظ أنَّ المصفوفة الأصلية لن تُغيّر.

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2)); // ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4)); // ["camel", "duck"]

console.log(animals.slice(1, 5)); // ["bison", "camel", "duck", "elephant"]

البنية العامة

arr.slice([begin[, end]])

begin

فهرس بداية الاستخراج، ويبدأ العد من الفهرس 0. القيمة السالبة تُشير إلى بدء الاستخراج من نهاية المصفوفة، فالدالة slice(-2)‎ ستستخرج آخر عنصرين في المصفوفة. إذا لم تُحدَّد قيمة الوسيط begin فستبدأ الدالة slice استخراجها من الفهرس 0.

end

فهرس نهاية الاستخراج، ويبدأ العد من الفهرس 0، وستستخرج الدالة slice العناصر من فهرس البداية حتى فهرس النهاية، لكن دون تضمين العنصر الموجود عند فهرس النهاية، أي مثلًا، الدالة slice(1, 4)‎ تستخرج العنصر الثاني والثالث والرابع (أي العناصر المرتبطة بالفهرس 1 و 2 و 3).

القيمة السالبة تُشير إلى أنَّ فهرس نهاية الاستخراج سيكون من نهاية المصفوفة، فالدالة slice(2, -1)‎ ستستخرج بدءًا من العنصر الثالث إلى العنصر قبل الأخير في المصفوفة. إذا لم تُحدَّد قيمة الوسيط end فستنتهي المصفوفة slice من استخراج العناصر عند الفهرس arr.length.

إذا كانت قيمة الوسيط end أكبر من طول المصفوفة، فستستخرج الدالة slice العناصر حتى نهاية المصفوفة (أي arr.length).

القيمة المعادة

مصفوفة جديدة تحتوي على العناصر المستخرجة.

الوصف

الدالة slice لا تُغيّر أيّة مصفوفات، وإنما ستنسخ العناصر التي فيها نسخًا سطحيًا، فهي ستنسخ:

• المرجعيات إلى الكائنات (وليس الكائنات نفسها): أي أنَّ المصفوفة الأصلية والمصفوفة الجديدة ستُشير إلى الكائن نفسه، أي لو عدّلنا ذلك الكائن فستنعكس التعديلات على المصفوفتين.
• أنواع البيانات الأوليّة مثل السلاسل النصية والأرقام والقيم المنطقية (لكن ليس الكائنات String و Number و Boolean).

أمثلة

إعادة جزء من مصفوفة موجودة مسبقًا

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);

// fruits: ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus: ['Orange','Lemon']

استخدام slice

في المثال الآتي، تُنشِئ الدالة slice مصفوفةً جديدةً newCar من المصفوفة myCar، وكلا المصفوفتين فيهما مرجعية إلى الكائن MyHonda، وعند تغيير إحدى خاصيات الكائن myHonda فسنجد أنَّ كلا المصفوفتين تتأثران بذلك:

// إنشاء مصفوفة من مصفوفة أخرى
var myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } };
var myCar = [myHonda, 2, 'cherry condition', 'purchased 1997'];
var newCar = myCar.slice(0, 2);

// عرض قيم المصفوفات
console.log('myCar = ' + JSON.stringify(myCar));
console.log('newCar = ' + JSON.stringify(newCar));
console.log('myCar[0].color = ' + myCar[0].color);
console.log('newCar[0].color = ' + newCar[0].color);

// تغيير قيمة إحدى خاصيات الكائن الموجود في كلا المصفوفتين
myHonda.color = 'purple';
console.log('The new color of my Honda is ' + myHonda.color);

// عرض قيمة الخاصية التي غيّرناها
console.log('myCar[0].color = ' + myCar[0].color);
console.log('newCar[0].color = ' + newCar[0].color);

يُنتِج السكربت السابق المخرجات الآتية:

myCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2,
         'cherry condition', 'purchased 1997']
newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2]
myCar[0].color = red 
newCar[0].color = red
The new color of my Honda is purple
myCar[0].color = purple
newCar[0].color = purple

الكائنات الشبيهة بالمصفوفات

يمكن أن تُستخدَم الدالة slice لتحويل الكائنات الشبيهة بالمصفوفات (Array-like objects) إلى مصفوفات حقيقية، وكل ما عليك فعله هو استدعاء هذه الدالة على الكائن.

سنوضِّح ذلك باستخدام الكائن الشبيه بالمصفوفات arguments المتاح داخل الدوال:

function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

يمكنك استخدام الدالة Function.prototype.call أيضًا، ويمكنك اختصار التعبير البرمجي إلى ‎[].slice.call(arguments)‎ بدلًا من Array.prototype.slice.call؛ لكن يمكنك تبسيط الأمر أكثر من ذلك باستخدام bind:

var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);

function list() {
  return slice(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	نعم	نعم	نعم	نعم	نعم

مصادر ومواصفات

• مسودة المعيار ECMAScript Latest Draft.
• معيار ECMAScript 2015 (6th Edition)‎.
• معيار ECMAScript 5.1.
• معيار ECMAScript 3rd Edition.