Array.prototype.slice()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

slice()Array インスタンスのメソッドで、配列の一部を start から endend は含まれない)までの範囲で、選択した新しい配列オブジェクトにシャローコピーして返します。 ここで startend はその配列に含まれる項目のインデックスを表します。元の配列は変更されません。

試してみましょう

構文

js
slice()
slice(start)
slice(start, end)

引数

start 省略可

抽出を始める位置のゼロから始まるインデックスで、整数に変換されます

  • インデックスが負の場合、配列の末尾からさかのぼって数えます。 start < 0 の場合、 start + array.length が使用されます。
  • start < -array.length または start が省略された場合は 0 が使用されます。
  • start >= array.length の場合、何も抽出されません。
end 省略可

抽出し終える位置のゼロから始まるインデックスで、整数に変換されますslice()end を含まず、その直前までを抽出します。

  • インデックスが負の場合、配列の末尾からさかのぼって数えます。 end < 0 の場合、 end + array.length が使用されます。
  • end < -array.length の場合は 0 が使用されます。
  • end >= array.length または end が省略された場合は array.length が使用され、最後まですべての要素が抽出されます。
  • 正規化後に endstart より前か同じ位置になった場合、何も抽出されません。

返値

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

解説

slice() メソッドはコピーメソッドです。これは this を変更するのではなく、元の配列と同じ要素を格納したシャローコピーを返します。

slice() メソッドは空のスロットを保持します。スライスされた部分が疎配列の場合、返す配列も疎配列になります。

slice() メソッドは汎用的です。これは this 値に length プロパティと整数キーのプロパティがあることだけを期待します。

既存の配列の一部を返す

js
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);

// fruits には ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] が含まれる
// citrus には ['Orange','Lemon'] が含まれる

slice の使用

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

js
// slice を使って、myCar から newCar を生成する。
const myHonda = {
  color: "red",
  wheels: 4,
  engine: { cylinders: 4, size: 2.2 },
};
const myCar = [myHonda, 2, "cherry condition", "purchased 1997"];
const newCar = myCar.slice(0, 2);

console.log("myCar =", myCar);
console.log("newCar =", 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);

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() の呼び出し

slice() メソッドは thislength プロパティを読み込みます。そして、 start から end までの整数キーのプロパティを読み込み、新しく作成した配列に定義します。

js
const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 33, // length が 3 であるので slice() から無視される
};
console.log(Array.prototype.slice.call(arrayLike, 1, 3));
// [ 3, 4 ]

slice() を用いて配列風オブジェクトを配列に変換

slice() メソッドは bind()call() と共に、配列風オブジェクトを配列に変換するユーティリティメソッドを作成するためによく使われます。

js
// slice() は第 1 引数として `this` が渡されて呼び出される
const slice = Function.prototype.call.bind(Array.prototype.slice);

function list() {
  return slice(arguments);
}

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

疎配列に対する slice() の使用

slice() から返される配列は、元の配列が疎配列であれば疎配列になります。

js
console.log([1, 2, , 4, 5].slice(1, 4)); // [2, empty, 4]

仕様書

Specification
ECMAScript Language Specification
# sec-array.prototype.slice

ブラウザーの互換性

BCD tables only load in the browser

関連情報