この翻訳は不完全です。英語から この記事を翻訳 してください。

配列の一部を取り出して新しい配列を返します。

slice() 関数は begin と end で選択された範囲の配列のコピーを返します。ただし、end は含まれません。また、元の配列は変更されません。

構文

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

引数

begin Optional
どこから取り出すかを示す 0 から始まる添字。
begin は負の値を使って、配列の終わりからのオフセットとして指定することもできます。slice(-2) は配列の最後から 2 番目の要素と最後の要素を取り出します。
begin を省略した場合は、0 番目の要素から開始します。
begin に要素数以上の値を指定した場合、空の配列が返されます。
end Optional
どこまで取り出すかを示す 0 から始まる添字。sliceend 自体は含めず、その直前まで取り出します。
slice(1, 4) は 2 番目の要素から 4 番目の要素まで (添字が 1, 2, 3 の要素) を取り出します。
end は負の値を使って、配列の終わりからのオフセットとして指定することもできます。slice(2, -1) は配列の 3 番目の要素から、最後から 2 番目の要素まで取り出します。
end が省略された場合、slice は配列の最後 (arr.length) までを取り出します。
end に要素数以上の値を指定した場合も、slice は配列の最後 (arr.length) までを取り出します。

戻り値

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

説明

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

  • オブジェクトの参照 (実際のオブジェクトではなく) については、slice はオブジェクトの参照を新しい配列にコピーします。元の配列も新しい配列も同じオブジェクトを参照します。もし参照されたオブジェクトが修正されたら、その変更は新しい配列と元の配列の両方に現れます。
  • 文字列や数値 (String オブジェクトや Number オブジェクトではなく) については、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 を使う

以下の例で、slicemyCar から新しい配列 newCar を生成します。両者ともオブジェクト 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 を用いて行う事もできます。また、Array.prototype.slice.call の代わりに [].slice.call(arguments) を用いる事もできます。何れを用いるとしても、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;
    };
  }
}());

Specifications

Specification Status Comment
ECMAScript 3rd Edition (ECMA-262) 標準 Initial definition. Implemented in JavaScript 1.2.
ECMAScript 5.1 (ECMA-262)
Array.prototype.slice の定義
標準  
ECMAScript 2015 (6th Edition, ECMA-262)
Array.prototype.slice の定義
標準  
ECMAScript Latest Draft (ECMA-262)
Array.prototype.slice の定義
ドラフト  

Browser compatibility

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung InternetNode.js
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 ありnodejs 完全対応 あり

凡例

完全対応  
完全対応

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: suige, woodmix, SphinxKnight, teoli, tatsuyaoiw, ethertank, Mgjbot, Yuichirou, Shimono
最終更新者: suige,