JavaScript slice() メソッドの基本を分かりやすく解説

JavaScriptでよく見かけるslice() メソッドですが、見かける度にリファレンスを確認していたので、一度きちんと理解しようと思いました。リファレンスだけだと分かりづらい、理解するのに時間がかかる方におすすめの記事です。
ちなみにsplice() メソッドではなく、slice() メソッドです。名前が似ていて、はたらきも似ているので、ご注意ください。
splice() メソッドのことを知りたい方は、こちらの記事をご覧ください。

slice() メソッドは、配列の一部を切り取って、新しい配列を作る

sliceは、切る、一切れといった意味です。JavaScriptのメソッドとして使う場合、「配列の一部を切り取って、新しい配列を作る」はたらきをします。それでは、一番基本的な使い方から見ていきましょう。

const items = [
    'item0',
    'item1',
    'item2',
    'item3',
    'item4',
    'item5',
    'item6',
    'item7',
    'item8',
    'item9',
  ]
  const slicedItems = items.slice(2)
  console.log(slicedItems)
  ['item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9']

上記コードでは、引数が2なので、始めの要素を0として２番目から最後までを切り取っています。

第2引数を指定することで、終わりの要素を指定できる

前の例では、指定した要素から最後まで切り取りましたが、最後ではなく終わりの要素を指定することができます。

  const items = [
    'item0',
    'item1',
    'item2',
    'item3',
    'item4',
    'item5',
    'item6',
    'item7',
    'item8',
    'item9',
  ]
  const slicedItems = items.slice(2, 7)
  console.log(slicedItems)
  ['item2', 'item3', 'item4', 'item5', 'item6']

上記コードのように、第2引数に7を指定します。ここで注意しなければいけないのが、7番目の要素は新しい配列には含まれません。items.slice(2, 7)では、2番目の要素から6番目（7の1つ手前）の要素が新しい配列になります。

引数が負の値だと、後ろから数えた要素の位置を指定できる

今までは引数は正の値で、配列の前から要素の位置を指定していました。引数に負の数値を渡すと、配列の後ろから数えて要素の位置を指定できます。

  const items = [
    'item0',
    'item1',
    'item2',
    'item3',
    'item4',
    'item5',
    'item6',
    'item7',
    'item8',
    'item9',
  ]

  const slicedItems1 = items.slice(-1)
  console.log(slicedItems1)
  ['item9']

  const slicedItems4 = items.slice(-4)
  console.log(slicedItems4)
  ['item6', 'item7', 'item8', 'item9']

上記コードで、items.slice(-1)と記述すると1番最後の要素から最後まで、つまり一番最後の要素だけを切り取った新しい配列ができます。items.slice(-4)と記述した場合は、最後から数えて4番目から最後までとなります。

最後まで読んでいただきありがとうございました。さらに詳しく、正確に情報を把握されたい方は、公式のリファレンスを確認してください。