JavaScript 配列のslice()関数：配列を指定したインデックス範囲で切り取る

定義と使用方

配列のslice()関数は与えられた配列から指定したインデックス範囲を切り出して（slice）新しい配列を返します。
このとき元の配列は変更されません。

この関数を使用すると配列で望む範囲にある要素を簡単に抽出できます。

特徴

インデックス範囲は、引数で指定した開始点から終了点まで（終了点を含みません）です。
インデックス範囲で切り取った要素を新しい配列として返します。
このような動作により、元の配列は変更されずそのまま保持されます。

配列でのインデックスは0から始まります。

基本の例

JavaScript

/*
 * 注意してください！
 * 配列でのインデックスは0から始まります。
 * 最初の要素のインデックスは0で、2番目の要素のインデックスは1です。
 */

// 配列を作成します。
const colors = ["red", "green", "blue", "orange", "yellow"];

// 配列の特定範囲の要素を抽出して新しい配列を返します
const slicedColors = colors.slice(1, 3); // 1番目のインデックスから3番目のインデックスの直前まで

// 結果を出力します。
console.log(slicedColors); // 出力: ['green', 'blue']

// このとき元の配列は変わりません。
console.log(colors); // 出力: ['red', 'green', 'blue', 'orange', 'yellow']

構文

arrはslice()関数を適用する元の配列です。

パラメーター

slice()関数の引数の説明
`start`	オプション。抽出を開始する`0`から始まるインデックスを指定します。省略するとデフォルトで`0`が使用されます。負の値を使用することもでき、その場合は配列の末尾から逆にカウントされます。抽出する配列の長さ（`arr.length`）以上の場合は何も抽出されません。
`end`	オプション。抽出を終了するインデックスを指定します。 `slice()`は指定した`end`インデックスを除いて抽出します。省略すると配列の末尾まで抽出します。負の値を使用することもでき、その場合は配列の末尾から逆にカウントされます。抽出する配列の長さ（`arr.length`）以上の場合は配列の末尾まで抽出します。

戻り値

slice()関数は、指定されたインデックス範囲にある元の配列の要素を抽出して新しい配列を返します。
返されるこの新しい配列は元の配列の一部の要素をコピーしたものであるため、元の配列は変わりません。

パラメーターと返り値の例

JavaScript

const numbers = [1, 2, 3, 4, 5];

// 配列の最初の3つの要素を抽出します。
const firstThree = numbers.slice(0, 3);

console.log(firstThree); // 出力: [1, 2, 3]

// 配列の最後の2つの要素を抽出します。
const lastTwo = numbers.slice(-2);

console.log(lastTwo); // 出力: [4, 5]

例

例を通してslice()関数の使い方を確認してみてください。

開始インデックスと終了インデックスの指定

JavaScript

const fruits = ["apple", "banana", "cherry", "date", "elderberry"];

console.log(fruits.slice(2, 4)); // ['cherry', 'date']
// インデックス2("cherry")からインデックス4の直前("date")まで抽出し、インデックス4の要素は除外されます。

開始インデックスのみを指定

JavaScript

const fruits2 = ["apple", "banana", "cherry", "date", "elderberry"];

console.log(fruits2.slice(2)); // ['cherry', 'date', 'elderberry']
// インデックス2("cherry")から配列の末尾まで抽出します。

負のインデックスを使用

JavaScript

const fruits3 = ["apple", "banana", "cherry", "date", "elderberry"];

console.log(fruits3.slice(-2)); // ['date', 'elderberry']
// 配列の末尾から2番目の要素から末尾まで抽出します。

元の配列の不変性の確認

JavaScript

const fruits4 = ["apple", "banana", "cherry", "date", "elderberry"];

console.log(fruits4.slice(2, 4)); // ['cherry', 'date']

// 元の配列はそのまま保持されます。
console.log(fruits4); // ['apple', 'banana', 'cherry', 'date', 'elderberry']