Array.prototype.slice()

El mètode slice() retorna una còpia feble d'una porció d'un array en forma d'un nou objecte array.

Sintaxi

arr.slice([inici[, fi]])

Paràmetres

inici

La posició (tenint en compte que zero correspon a la primera posició) a partir de la qual començarà l'extracció.

Si inici és negatiu, la posició correspondrà la posicó final de la seqüència menys el valor proporcionat. slice(-2) extreu els últims dos elements de la seqüència.

Si inici és undefined, slice començarà a la posició 0.

fi

La posició (contant des de zero) a la qual finalitzarà l'extracció. slice extraurà fins a aquesta posicó, sense incloure-la.

slice(1,4) extrau des del segon element fins al quart element (és a dir, els elements pertanyents a les posicions 1, 2 i 3).

Si fi és negatiu, la posició correspondrà la posicó final de la seqüència menys el valor proporcionat. slice(2,-1) extrau des del tercer elements fins al penúltim element de la seqüència.

Si s'omet el paràmetre fi, slice extreurà fins al final de la seqüència (arr.length).

Descripció

slice no altera l'array original. Retorna una copia feble dels elements de l'array original. Els elements de l'array original són copiats a l'array resultat de la forma següent:

• Per a referències a objectes (no l'objecte en si), slice copia la referència dins el nou array. Tant l'array original com el resultat referenciaran el mateix objecte. Si l'objecte referenciat canvia, aquests canvis seran visibles a ambdos arrays.
• Per a strings i nombres (no els objectes String i Number), slice copia els strings i nombres a l'array resultant. Els canvis al string o nombre en un dels arrays no afectaran a l'altre array.

Si s'afegeix un onu element a un dels dos arrays, l'altre array no es veu afectat.

Exemples

Retornar una part d'un array existent

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

// citrus conté ['Orange','Lemon']

Utilitzar slice

A l'exemple següent slice crea un ou array newCar, a partir de myCar. Ambdos inclouen una referència a l'objecte myHonda. Quan el color de myHonda canvia a lila, ambdos arrays reflecteixen aquest canvi.

// Ús de slice, creem newCar a partir de 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);

// Mostrem els valors de myCar, newCar, i el color de myHonda
//  referenciat a ambdos 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);

// Canviem el color de myHonda.
myHonda.color = 'purple';
console.log('The new color of my Honda is ' + myHonda.color);

// Mostrem el color de myHonda referenciat a ambdos arrays.
console.log('myCar[0].color = ' + myCar[0].color);
console.log('newCar[0].color = ' + newCar[0].color);

Aquest script mostra:

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

Objectes compatibles amb arrays

El mètode slice també es pot utilitzar per a convertir objectes compatibles amb arrays / col·leccions a un nou Array. Simplement hem de vincular el mètode a l'objecte. L'objecte arguments dins una funció és un exemple d'objecte 'compatible amb arrays'.

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

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

Podem vincular el mètode a l'objecte mitjançant la funció .call proporcionada per Function.prototype, també podem reduir-la a [].slice.call(arguments) en comptes de Array.prototype.slice.call. També podem simplificar-ho utilitzant la funció 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]

Oferint un comportament similar entre navegadors

Tot i que segons la especificació els objectes de l'hoste (com ara els objectes DOM) no requereixen seguir el comportament de Mozilla al ser convertits mitjançant Array.prototype.slice i, de fet les versions de Internet Explorer anteriors a la 9 no ho fan, les versions a partir de la 9 si que suporten l'ús d'aquesta funció de compatibilitat, permetent un comportament fiable entre navegadors. Mentre els altres navegadors moderns continuin oferint aquesta habilitat, tal i com ara fan IE, Mozilla, Chrome, Safari i Opera, els desenvolupadors que llegeixin codi sobre slice (suportat pel DOM) que es recolzi en aquesta funció de compatibilitat no tenen que patir per la semàntica; poden fiar-se de la semàntica descrita per a proporcionar el comportament que ara sembla standard de facto (La funció de compatibilitat també permet que el IE funcioni quan es passa com a segon argument de slice() un valor explícit de null/undefined ja que versions anteriors de IE no ho permetien però tots els nous navegadors, incloent IE >= 9, si que ho permeten.)

/**
 * 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;
    };
  }
}());

Especificacions

Compatibilitat amb navegadors

Vegeu també

• Function.prototype.call()
• Function.prototype.bind()