JavaScriptのsliceの使い方！【配列】

JavaScriptで配列の一部を抽出するsliceメソッドについて書いています。

sliceメソッドを使うと、配列の指定した範囲の要素を新しい配列として取り出すことができます。
元の配列を変更せずに、部分的な配列を取得したい場合に便利です。

実際に動くサンプルを使って、以下の操作を解説します。

sliceメソッドの基本的な使い方

sliceメソッドは、配列の一部を新しい配列として返します。

元の配列は変更されません。
基本的な構文は以下のとおりです。

array.slice(begin, end)

• begin: 抽出を開始するインデックス（省略可能）。
• end: 抽出を終了するインデックス（省略可能）。

配列の一部を抽出する

配列から一部を取り出すサンプルコードです。

const fruits = ['apple', 'banana', 'orange', 'grape'];
const slicedFruits = fruits.slice(1, 3);

console.log(slicedFruits); // 結果：['banana', 'orange']
console.log(fruits); // 結果：['apple', 'banana', 'orange', 'grape'] (元の配列は変わらない)

fruits配列を作成した後に、次の行でsliceメソッドを呼び出しています。

インデックス「1」から「2」までの要素（’banana’と’orange’）がsliceメソッドによって抽出され、slicedFruits配列に格納されています。
また、元のfruits配列が変わってないことが確認できます。

引数を省略した場合

beginを省略した場合は、配列の最初から抽出が開始されます。
endを省略した場合は、配列の最後まで抽出されます。

const fruits = ['apple', 'banana', 'orange', 'grape'];

let sliced1 = fruits.slice(2); // 終了を省略
console.log(sliced1); // 結果：['orange', 'grape']

let sliced2 = fruits.slice(null, 2); // 開始をnullで終了を指定
console.log(sliced2); // 結果：['apple', 'banana']

let sliced3 = fruits.slice();　// 開始と終了を省略
console.log(sliced3); // 結果：['apple', 'banana', 'orange', 'grape']

最初は終了を省略しているので、配列の「2」番目からすべての配列が返って「['orange', 'grape']」となっています。
次は開始をnullで指定せずに、最後のみ指定しているので「['apple', 'banana']」となりました。
最後に、両方とも指定しないで使うと、配列要素がそのまま返ってきました。

sliceメソッドの引数の終了に注意

sliceメソッドの引数beginとendについて確認してきましたが、終了するインデックス指定に注意してください。

• begin: 抽出を開始するインデックス。
  • 指定されたインデックスの要素を含みます。
  • 負の値を指定すると、配列の末尾からのインデックスとして扱われます。
• end: 抽出を終了するインデックス。
  • 指定されたインデックスの要素を含みません。
  • 負の値を指定すると、配列の末尾からのインデックスとして扱われます。

終了位置(end)は、指定されたインデックスの要素を含まない点に注意が必要です。

後ろから配列の一部を切り取るには？

配列の末尾から要素を切り取るには、sliceメソッドの開始位置に負の値を指定します。
例えば、末尾から2つの要素を切り取るには、以下のように記述します。

const fruits = ['apple', 'banana', 'orange', 'grape'];
const slicedFromEnd = fruits.slice(-2);

console.log(slicedFromEnd); // 結果：['orange', 'grape']

開始するインデックスに「-2」を指定することで、末尾から2つの要素を切り取っています。

sliceとspliceの違いは？

sliceとsplice()は、どちらも配列の一部を操作するメソッドですが、以下の点で違いがあります。

• slice: 元の配列を変更せずに、指定範囲の要素を新しい配列として取り出す。
• splice(): 元の配列を変更し、指定範囲の要素を削除または置換する。

const fruits = ['apple', 'banana', 'orange', 'grape'];

const sliced = fruits.slice(1, 3);
console.log(sliced); // 結果：['banana', 'orange']
console.log(fruits); // 結果：['apple', 'banana', 'orange', 'grape'] (元の配列は変わらない)

const spliced = fruits.splice(1, 2);
console.log(spliced); // 結果：['banana', 'orange']
console.log(fruits); // 結果：['apple', 'grape'] (元の配列が変更された)

sliceメソッドを使うメリット

sliceメソッドを使う主なメリットは以下のとおりです。

• 元の配列を変更せずに部分的な配列を取得できる: 元の配列を変更せずに、指定した範囲の要素を新しい配列として取得できます。
• 柔軟な抽出範囲指定: beginとendの値を調整することで、様々な範囲の要素を抽出できます。

JavaScriptのsliceメソッドの使い方まとめ

今回はJavaScriptのsliceメソッドの使い方について解説しました。
記事の内容をまとめます。