عرض مصدر JavaScript/Array/slice

<noinclude>{{DISPLAYTITLE:<code>Array.prototype.slice()‎</code>}}</noinclude>
الدالة <code>Array.prototype.slice()‎</code> تنسخ جزءًا من المصفوفة نسخًا سطحيًا (shallow copy) إلى مصفوفة جديدًا بدءًا من الفهرس <code>begin</code> إلى <code>end</code> (دون تضمين العنصر الموجود في الفهرس <code>end</code>)؛ لاحظ أنَّ المصفوفة الأصلية لن تُغيّر.<syntaxhighlight lang="javascript">
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"]

</syntaxhighlight>

== البنية العامة ==
<syntaxhighlight lang="javascript">
arr.slice([begin[, end]])

</syntaxhighlight>

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

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

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

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

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

== الوصف ==
الدالة <code>slice</code> لا تُغيّر أيّة مصفوفات، وإنما ستنسخ العناصر التي فيها نسخًا سطحيًا، فهي ستنسخ:
* المرجعيات إلى الكائنات (وليس الكائنات نفسها): أي أنَّ المصفوفة الأصلية والمصفوفة الجديدة ستُشير إلى الكائن نفسه، أي لو عدّلنا ذلك الكائن فستنعكس التعديلات على المصفوفتين.
* أنواع البيانات الأوليّة مثل السلاسل النصية والأرقام والقيم المنطقية (لكن ليس الكائنات <code>[[JavaScript/String|String]]</code> و <code>[[JavaScript/Number|Number]]</code> و <code>[[JavaScript/Boolean|Boolean]]</code>).

== أمثلة ==

=== إعادة جزء من مصفوفة موجودة مسبقًا ===
<syntaxhighlight lang="javascript">
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);

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

</syntaxhighlight>

=== استخدام <code>slice</code> ===
في المثال الآتي، تُنشِئ الدالة <code>slice</code> مصفوفةً جديدةً <code>newCar</code> من المصفوفة <code>myCar</code>، وكلا المصفوفتين فيهما مرجعية إلى الكائن <code>MyHonda</code>، وعند تغيير إحدى خاصيات الكائن <code>myHonda</code> فسنجد أنَّ كلا المصفوفتين تتأثران بذلك:<syntaxhighlight lang="javascript">
// إنشاء مصفوفة من مصفوفة أخرى
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);

</syntaxhighlight>يُنتِج السكربت السابق المخرجات الآتية:<syntaxhighlight lang="javascript">
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

</syntaxhighlight>

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

سنوضِّح ذلك باستخدام الكائن الشبيه بالمصفوفات <code>[[JavaScript/arguments|arguments]]</code> المتاح داخل الدوال:<syntaxhighlight lang="javascript">
function list() {
  return Array.prototype.slice.call(arguments);
}

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

</syntaxhighlight>يمكنك استخدام الدالة <code>[[JavaScript/Function/call|Function.prototype.call]]</code> أيضًا، ويمكنك اختصار التعبير البرمجي إلى ‎<code>[].slice.call(arguments)</code>‎ بدلًا من <code>Array.prototype.slice.call</code>؛ لكن يمكنك تبسيط الأمر أكثر من ذلك باستخدام <code>[[JavaScript/Function/bind|bind]]</code>:<syntaxhighlight lang="javascript">
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]

</syntaxhighlight>

== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|نعم
|نعم
|نعم
|نعم
|نعم
|}
== مصادر ومواصفات ==
* مسودة المعيار [https://tc39.github.io/ecma262/#sec-array.prototype.slice ECMAScript Latest Draft].
* معيار [https://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.slice ECMAScript 2015 (6th Edition)]‎.
* معيار [https://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.10 ECMAScript 5.1].
* معيار [http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf ECMAScript 3rd Edition]. 
[[تصنيف:JavaScript|{{SUBPAGENAME}}]]
[[تصنيف:JavaScript Global Objects|{{SUBPAGENAME}}]]
[[تصنيف:JavaScript Array|{{SUBPAGENAME}}]]