MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Array.prototype.slice()


The slice() method geeft een oppervlakkige kopie van een gedeelte van een array terug in een nieuwe array.

Syntax

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

Parameters

begin
Bij nul beginnende index (zero-based), van waaruit de extractie begint.
Bij een negatieve index, geeft begin het aantal plaatsen (offset) tot aan het einde van de reeks. slice(-2) extraheert de laatste twee elementen van de sequentie.
Indien begin niet gedefinieerd is, of gelijkwaardig is aan undefined, dan begint slice bij index 0.
end
Bij nul beginnende index waarop de extractie gestopt wordt. slice extraheert tot aan, maar exclusief end.
slice(1,4) extraheert het tweede element tot het vierde element (elementen met index 1, 2, en 3).
Als negatieve index, geeft end een afstand (offset) aan tot het einde van de reeks. slice(2,-1) extraheert het derde element tot het op twee na laatse element in de sequentie.
Indien end wordt weggelaten, dan zal slice tot het einde van de reeks toe extraheren (arr.length).

Beschrijving

slice verandert niet. Het retourneert een oppervlakkige kopie van elementen, ten opzichte van de oorspronkelijke array. Elementen van het origineel, worden als volgt gekopieerd en geretourneerd:

  • Voor object referenties (en dus niet het eigenlijke object), kopieert slice object referenties naar een nieuwe array. Zowel het origineel als ook de nieuwe array verwijzen naar hetzelfde object. Indien een object, waarnaar verwezen wordt, verandert, dan zullen de wijzigingen zowel in de nieuwe als bestaande array zichtbaar worden.
  • Voor strings en getallen (geen String en Number objects), kopieert slice strings en getallen naar de nieuwe array. Veranderingen aan een  string of getal in de ene array zal de andere array niet beinvloeden.

Indien een nieuw element aan de ene array wordt toegevoegd, dan blijft de andere array onaangeroerd.

Voorbeelden

Geeft een gedeelte van een bestaande array

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

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

Gebruik slice

In het volgende voorbeeld, maakt slice een nieuwe array aan, newCar, uit myCar. Beide hebben een referentie aan het object myHonda. Wanneer de kleur van myHonda wordt gewijzigd, dan hebben beide arrays deze wisseling ondergaan.

// Using slice, create newCar from myCar.
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);

// Display the values of myCar, newCar, and the color of myHonda
//  referenced from both arrays.
console.log('myCar = ' + myCar.toSource());
console.log('newCar = ' + newCar.toSource());
console.log('myCar[0].color = ' + myCar[0].color);
console.log('newCar[0].color = ' + newCar[0].color);

// Change the color of myHonda.
myHonda.color = 'purple';
console.log('The new color of my Honda is ' + myHonda.color);

// Display the color of myHonda referenced from both arrays.
console.log('myCar[0].color = ' + myCar[0].color);
console.log('newCar[0].color = ' + newCar[0].color);

Het script verwerkt dit als volgt:

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

Array-achtige objecten

De slice method kan ook gebruikt worden om Array-like objects / collections om te zetten in een nieuwe Array. Je hoeft dan alleen de methode op zich aan het object te binden. De arguments binnen een functie is een voorbeeld van een 'array-like object'.

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

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

Binding kan worden verkregen met de  .call functie of Function.prototype en dit kan ook via reductie door gebruik te maken van [].slice.call(arguments) in plaats van de  Array.prototype.slice.call. Hoe dan ook, het kan worden vereenvoudigd met  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]

Cross-browser gedrag in de hand werken

Host objecten zoals DOM-objecten, zijn volgens de spec niet verplicht zich te gedragen zoals in een Mozilla browser, wanneer een omzetting plaatsvindt volgens de Array.prototype.slice methode. IE browsers voor versie 9 doen dit bijvoorbeeld niet. De huidige browser versies van IE, Mozilla, Chrome, Safari en Opera ondersteunen het eerder beschreven oppervlakkige kopie ('shallow copy') gedrag en het is daarmee de-facto het standaard gedrag.
Door onderstaande code vooraf te laten gaan aan de eigen code, kun je het toch mogelijk maken dat een browser zich zoals je zou verwachten gaat gedragen en er verder geen afwijkende browser specifieke code gebruikt hoeft te worden.

/**
 * Shim for "fixing" IE's lack of support (IE < 9) for applying slice
 * on host objects like NamedNodeMap, NodeList, and HTMLCollection
 * (technically, since host objects have been implementation-dependent,
 * at least before ES6, IE hasn't needed to work this way).
 * Also works on strings, fixes IE < 9 to allow an explicit undefined
 * for the 2nd argument (as in Firefox), and prevents errors when
 * called on other DOM objects.
 */
(function () {
  'use strict';
  var _slice = Array.prototype.slice;

  try {
    // Can't be used with DOM elements in IE < 9
    _slice.call(document.documentElement);
  } catch (e) { // Fails in IE < 9
    // This will work for genuine arrays, array-like objects, 
    // NamedNodeMap (attributes, entities, notations),
    // NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes),
    // and will not fail on other DOM objects (as do DOM elements in IE < 9)
    Array.prototype.slice = function(begin, end) {
      // IE < 9 gets unhappy with an undefined end argument
      end = (typeof end !== 'undefined') ? end : this.length;

      // For native Array objects, we use the native slice function
      if (Object.prototype.toString.call(this) === '[object Array]'){
        return _slice.call(this, begin, end); 
      }

      // For array like object we handle it ourselves.
      var i, cloned = [],
        size, len = this.length;

      // Handle negative value for "begin"
      var start = begin || 0;
      start = (start >= 0) ? start : Math.max(0, len + start);

      // Handle negative value for "end"
      var upTo = (typeof end == 'number') ? Math.min(end, len) : len;
      if (end < 0) {
        upTo = len + end;
      }

      // Actual expected size of the slice
      size = upTo - start;

      if (size > 0) {
        cloned = new Array(size);
        if (this.charAt) {
          for (i = 0; i < size; i++) {
            cloned[i] = this.charAt(start + i);
          }
        } else {
          for (i = 0; i < size; i++) {
            cloned[i] = this[start + i];
          }
        }
      }

      return cloned;
    };
  }
}());

Specifications

Specification Status Comment
ECMAScript 3rd Edition (ECMA-262) Standard Initial definition. Implemented in JavaScript 1.2.
ECMAScript 5.1 (ECMA-262)
The definition of 'Array.prototype.slice' in that specification.
Standard  
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Array.prototype.slice' in that specification.
Standard  
ECMAScript Latest Draft (ECMA-262)
The definition of 'Array.prototype.slice' in that specification.
Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

See also

 

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: JorritSchippers, pieterbeulque, RdV
 Laatst bijgewerkt door: JorritSchippers,