Array.prototype.slice()

slice() メソッドは begin から end まで選択された配列の一部をシャローコピーして、新しい配列オブジェクトを返します (end は含まれません)。元の配列は変更されません。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

構文

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

引数

begin Optional

取り出しの開始位置を示す 0 から始まるインデックスです。

負のインデックスを使って、シーケンスの終わりからのオフセットを指定することができます。 slice(-2) はシーケンスの最後の2つの要素を取り出します。

begin が指定されなかった場合、 slice はインデックス 0 から開始します。

begin がシーケンスの長さよりも大きい場合は、空の配列が返されます。

end Optional

取り出しを終える直前の位置を示す 0 から始まるインデックスです。 slice は end 自体は含めず、その直前まで取り出します。

例えば、 slice(1,4) は 2 番目から 4 番目までの要素 (インデックスがそれぞれ 1, 2, 3 番目の要素) を取り出します。

負のインデックスを使って、シーケンスの終わりからのオフセットとして指定することができます。 slice(2,-1) はシーケンスの 3 番目から、最後から 2 番目までの要素を取り出します。

end が省略された場合、slice はシーケンスの最後 (arr.length) までを取り出します。

end がシーケンスの長さを超えた場合も、slice はシーケンスの最後 (arr.length) までを取り出します。

返値

取り出された要素を含む新しい配列です。

解説

slice は元の配列を変更せず、元の配列から要素をシャローコピー (1 段階の深さのコピー) した新しい配列を返します。元の配列の要素は以下のように返される配列にコピーされます。

• (実際のオブジェクトではない) オブジェクトの参照については、 slice はオブジェクトの参照を新しい配列にコピーします。元の配列も新しい配列も同じオブジェクトを参照します。参照されたオブジェクトが修正された場合、その変更は新しい配列と元の配列の両方に現れます。
• (String, Number, Boolean オブジェクトではなく) 文字列、数値、真偽値では、 slice は値を新しい配列にコピーします。一方の配列の文字列や数値に変更を加えても、他の配列に影響はしません。

一方の配列に新しい要素が追加されても、他方の配列に影響はしません。

例

既存の配列の一部を返す

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

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

slice の使用

以下の例で、 slice は新しい配列 newCar を myCar から生成します。両者ともオブジェクト myHonda への参照を含んでいます。 myHonda の色が purple に変更されると、両方の要素がその変更を反映します。

// slice を使って、myCar から newCar を生成する。
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);

// myCar, newCar と両方の要素から参照されている myHonda の color の
//  値を書きだす。
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 の色を変える。
myHonda.color = 'purple';
console.log('The new color of my Honda is ' + myHonda.color);

// 両方の要素から参照されている 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 メソッドを呼び出すことで、配列風オブジェクトやコレクションを新しい配列に変換することができます。メソッドをオブジェクトに繋げるだけです。配列風オブジェクトの一例として、 arguments が挙げられます。以下に例を示します。

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

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

結合 (Binding) は 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]

Streamlining cross-browser behavior

Although host objects (such as DOM objects) are not required by spec to follow the Mozilla behavior when converted by Array.prototype.slice and IE < 9 does not do so, versions of IE starting with version 9 do allow this. “Shimming” it can allow reliable cross-browser behavior. As long as other modern browsers continue to support this ability, as currently do IE, Mozilla, Chrome, Safari, and Opera, developers reading (DOM-supporting) slice code relying on this shim will not be misled by the semantics; they can safely rely on the semantics to provide the now apparently de facto standard behavior. (The shim also fixes IE to work with the second argument of slice() being an explicit null/undefined value as earlier versions of IE also did not allow but all modern browsers, including IE >= 9, now do.)

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

仕様書

ブラウザーの対応

関連情報

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