Array.prototype.slice()
slice()
メソッドは、start
と end
が配列の中の項目のインデックスを表している場合、start
から end
まで (end
は含まれない) で選択された配列の一部の浅いコピーを新しい配列オブジェクトに作成して返します。元の配列は変更されません。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
構文
arr.slice([start[, end]])
引数
start
省略可- 取り出しの開始位置を示す 0 から始まるインデックスです。
- 負のインデックスを使って、列の終わりからのオフセットを指定することができます。
slice(-2)
は列の最後の 2 つの要素を取り出します。 start
が指定されなかった場合、slice
はインデックス0
から開始します。start
が列のインデックスの範囲よりも大きい場合は、空の配列が返されます。end
省略可- 取り出しを終える直前の位置を示す 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
は値を新しい配列にコピーします。一方の配列の文字列や数値に変更を加えても、他の配列に影響はしません。
一方の配列に新しい要素が追加されても、他方の配列に影響はしません。
例
既存の配列の一部を返す
let 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 を生成する。
let myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }
let myCar = [myHonda, 2, 'cherry condition', 'purchased 1997']
let 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
メソッドを呼び出すことで、配列状オブジェクトやコレクションを新しい配列に変換することができます。メソッドをオブジェクトに bind
するだけです。配列状オブジェクトの一例として、arguments
が挙げられます。以下に例を示します。
function list() {
return Array.prototype.slice.call(arguments)
}
let list1 = list(1, 2, 3) // [1, 2, 3]
結合は Function.prototype
の call()
メソッドを用いて行うことができますし、[].slice.call(arguments)
を Array.prototype.slice.call
の代わりに使って減らすこともできます。
いずれにせよ、bind
を使用することで簡略化することができます。
let unboundSlice = Array.prototype.slice
let slice = Function.prototype.call.bind(unboundSlice)
function list() {
return slice(arguments)
}
let list1 = list(1, 2, 3) // [1, 2, 3]
仕様
ブラウザーの互換性
BCD tables only load in the browser