Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Array.prototype.slice()

概要

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

構文

Array.slice(begin[,
end]) 

引数

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

説明

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

  • オブジェクトの参照 (実際のオブジェクトではなく) については、slice はオブジェクトの参照を新しい配列にコピーします。元の配列も新しい配列も同じオブジェクトを参照します。もし参照されたオブジェクトが修正されたら、その変更は新しい配列と元の配列の両方に現れます。
  • 文字列や数値 (String オブジェクトや Number オブジェクトではなく) については、slice は文字列や数値を新しい配列にコピーします。一方の配列の文字列や数値に変更を加えても、他方の配列に影響はしません。

一方の配列に新しい要素が追加されても、他方の配列に影響はしません。

例:既存の配列の一部を返す

// Our good friend the citrus from fruits example
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

// puts --> ["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 の
//  値を書きだす。
printf( "myCar = " + myCar.toSource() );
printf( "newCar = " + newCar.toSource() );
printf( "myCar[0].color = " + myCar[0].color );
printf( "newCar[0].color = " + newCar[0].color );

// myHonda の色を変える。
myHonda.color = "purple";
printf( "The new color of my Honda is " + myHonda.color );

// 両方の要素から参照されている myHonda の color を書き出す。
printf( "myCar[0].color = " + myCar[0].color );
printf( "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]

関連情報

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

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