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 から end （end は含まれない）までの範囲で、選択した新しい配列オブジェクトにシャローコピーして返します。 ここで start と end はその配列に含まれる項目のインデックスを表します。元の配列は変更されません。

試してみましょう

構文

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 が使用され、最後まですべての要素が抽出されます。
  • 正規化後に end が start より前か同じ位置になった場合、何も抽出されません。

返値

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

解説

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 は新しい配列 newCar を myCar から生成します。両者ともオブジェクト 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() メソッドは this の length プロパティを読み込みます。そして、 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

関連情報