HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
View in English Always switch to English
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
slice() は Array インスタンスのメソッドで、配列の一部を start から end （end は含まれない）までの範囲で、選択した新しい配列オブジェクトにシャローコピーして返します。 ここで start と end はその配列に含まれる項目のインデックスを表します。元の配列は変更されません。
slice()
Array
start
end
const animals = ["ant", "bison", "camel", "duck", "elephant"]; console.log(animals.slice(2)); // 予想される結果: Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // 予想される結果: Array ["camel", "duck"] console.log(animals.slice(1, 5)); // 予想される結果: Array ["bison", "camel", "duck", "elephant"] console.log(animals.slice(-2)); // 予想される結果: Array ["duck", "elephant"] console.log(animals.slice(2, -1)); // 予想される結果: Array ["camel", "duck"] console.log(animals.slice()); // 予想される結果: Array ["ant", "bison", "camel", "duck", "elephant"]
slice() slice(start) slice(start, end)
抽出を始める位置のゼロから始まるインデックスで、整数に変換されます。
-array.length <= start < 0
start + array.length
start < -array.length
0
start >= array.length
抽出し終える位置のゼロから始まるインデックスで、整数に変換されます。 slice() は end を含まず、その直前までを抽出します。
-array.length <= end < 0
end + array.length
end < -array.length
end >= array.length
array.length
取り出された要素を含む新しい配列です。
slice() メソッドはコピーメソッドです。これは this を変更するのではなく、元の配列と同じ要素を格納したシャローコピーを返します。
this
slice() メソッドは空のスロットを保持します。スライスされた部分が疎配列の場合、返す配列も疎配列になります。
slice() メソッドは汎用的です。これは this 値に length プロパティと整数キーのプロパティがあることだけを期待します。
length
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; const citrus = fruits.slice(1, 3); // fruits には ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] が含まれる // citrus には ['Orange','Lemon'] が含まれる
この例では、slice(1, 3) は、インデックス 1 からインデックス 3 まで（ただし 3 自体は含まない）の要素を抽出して、新しい配列 ['Orange', 'Lemon'] を作成します。
slice(1, 3)
1
3
['Orange', 'Lemon']
const fruits = ["Apple", "Banana", "Orange", "Mango", "Pineapple"]; const tropical = fruits.slice(2); console.log(tropical); // ['Orange', 'Mango', 'Pineapple']
この例では、slice(2) は、インデックス 2 から配列の末尾までの要素を抽出します。
slice(2)
2
const fruits = ["Apple", "Banana", "Orange", "Mango", "Pineapple"]; const lastTwo = fruits.slice(-2); console.log(lastTwo); // ['Mango', 'Pineapple']
この例では、slice(-2) は配列の最後の 2 つの要素を抽出します。slice メソッドで負のインデックスを使用する場合、負のインデックスは配列の末尾からカウントされ、最後の要素は -1、2 つ目の要素は -2 というように続きます。負のインデックス -2 自体は、抽出の開始点であるため、含まれます。
slice(-2)
slice
-1
-2
| | | | | | | S | L | I | C | E | | | | | | | -5 -4 -3 -2 -1 <--- 逆方向に読む
const fruits = ["Apple", "Banana", "Orange", "Mango", "Pineapple"]; // 正の開始インデックスと負の終了インデックスを使用する const sliceExample = fruits.slice(1, -1); console.log(sliceExample); // ['Banana', 'Orange', 'Mango']
この例では、slice(1, -1) は、インデックス 1 から抽出し、インデックス -1 (最後の要素) まで抽出しますが、この要素は含まれません。その結果、 ['Banana', 'Orange', 'Mango'] という新しい配列が作成されます。 slice メソッドは、指定した最後のインデックスの要素が正の値であるか負の値であるかを問わず、常にその要素を除外します。
slice(1, -1)
['Banana', 'Orange', 'Mango']
先頭から読む ---> 0 1 2 3 4 | | | | | | | S | L | I | C | E | | | | | | | -5 -4 -3 -2 -1 <--- 逆方向に読む
以下の例で、slice は新しい配列 newCar を myCar から生成します。両者ともオブジェクト myHonda への参照を含んでいます。myHonda の色が purple に変更されると、両方の要素がその変更を反映します。
newCar
myCar
myHonda
// 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() メソッドは this の length プロパティを読み込みます。そして、 start から end までの整数キーのプロパティを読み込み、新しく作成した配列に定義します。
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() メソッドは bind() や call() と共に、配列風オブジェクトを配列に変換するユーティリティメソッドを作成するためによく使われます。
bind()
call()
// slice() は第 1 引数として `this` が渡されて呼び出される const slice = Function.prototype.call.bind(Array.prototype.slice); function list() { return slice(arguments); } const listResult = list(1, 2, 3); // [1, 2, 3]
slice() から返される配列は、元の配列が疎配列であれば疎配列になります。
console.log([1, 2, , 4, 5].slice(1, 4)); // [2, empty, 4]
Enable JavaScript to view this browser compatibility table.
Array.prototype.slice
core-js
Array.prototype.pop()
Array.prototype.shift()
Array.prototype.concat()
Array.prototype.splice()
TypedArray.prototype.slice()
String.prototype.slice()