JavaScriptでよく見かけるsplice() メソッドですが、見かける度にリファレンスを確認していたので、一度きちんと理解しようと思いました。リファレンスだけだと分かりづらい、理解するのに時間がかかる方におすすめの記事です。
ちなみにslice() メソッドではなく、splice() メソッドです。名前が似ていて、はたらきも似ているので、ご注意ください。
slice() メソッドのことを知りたい方は、こちらの記事をご覧ください。
splice() メソッドは、配列の中身を切り取る
spliceの意味は、「重ね合わせて接合する」という意味のようです。くっつけるイメージなんでしょうか。日本語にしても少し分かりづらいですね。グーグル翻訳でも日本語は出てきませんでした。それでは始めに一番基本的な使い方を見ていきましょう。
let items1 = ['item0', 'item1', 'item2', 'item3', 'item4', ]
let removedItems1 = items1.splice(2)
console.log(items1)
// 出力される配列 ['item0', 'item1']
console.log(removedItems1)
// 出力される配列 ['item2', 'item3', 'item4']上記のコードでitems1.splice(2)は、始めの要素を0番目として、2番目から最後までを切り取るという意味になります。
その結果配列items1は、[‘item0’, ‘item1’]に変化します。
また、ここで注目してほしいのは、返値として切り取られた配列removedItems1が生まれることです。もちろん必要に応じて使えばよいのですが、知っていると何かに使えそうです。
引数に0を与えると、元の配列は空になる
let items2 = ['item0', 'item1', 'item2', 'item3', 'item4']
let removedItems2 = items2.splice(0)
console.log(items2)
// 出力される配列 []
console.log(removedItems2)
// 出力される配列 ['item0', 'item1', 'item2', 'item3', 'item4']引数に0を与えると、上記のitems2は空の配列[]になります。0番目から最後の要素を切り取るからですね。
こういった使い方はあまりしないと思うのですが、items2がundifinedとかではなく空の配列になることが分かります。
引数に負の値を指定できる
let items3 = ['item0', 'item1', 'item2', 'item3', 'item4']
let removedItems3 = items3.splice(-2)
console.log(items3)
// 出力される配列 ['item0', 'item1', 'item2']
console.log(removedItems3)
// 出力される配列 ['item3', 'item4']引数に負の値を指定すると、切り取る要素の位置を最後から数えることができます。items3.splice(-2)の場合は、最後から2番目の要素（’item3’）から最後の要素（’item4’）を切り取るという意味になります。
2つ目の引数を指定すると、切り取る要素の個数を指定できる
次に2つ目の引数を指定する使い方をご紹介します。今までの例では、引数で指定した要素から最後までを切り取っていました。2つ目の引数を指定すると、切り取る要素の個数を指定できます。実際のコードを見ていきましょう。
let items4 = ['item0', 'item1', 'item2', 'item3', 'item4']
let removedItems4 = items4.splice(2, 2)
console.log(items4)
// 出力される配列 ['item0', 'item1', 'item4']
console.log(removedItems4)
// 出力される配列 ['item2', 'item3']items4.splice(2, 2)で、1つ目の引数2は、2番目の要素から切り取ることを意味しています。そして2つ目の引数2が、2個の要素を切り取ることを意味しています。2番目の要素から2個を切り取るわけですから、配列items4は[‘item0’, ‘item1’, ‘item4’]に変わります。また、切り取られた配列removedItemsは、[‘item2’, ‘item3’]となります。少し複雑になりますが、便利ですね。
3つ目の引数を指定すると、要素を追加できる
さらに別の機能もあります。3つ目の引数を指定すると、要素の追加もできるようになります。コードを見ていきましょう。
let items6 = ['item0', 'item1', 'item2', 'item3', 'item4']
let removedItems6 = items6.splice(2, 2, 'itemX')
console.log(items6)
// 出力される配列 ['item0', 'item1', 'itemX', 'item4']
console.log(removedItems6)
// 出力される配列 ['item2', 'item3']items6.splice(2, 2, ‘itemX’)、1つ目と2つ目の引数は前の例と同じなので、2番目の要素から2つを削除するという意味です。
さらに3つ目の引数に’itemX’を指定していますので、削除した2番目の要素に’itemX’を挿入するという意味になります。
結果としては配列items6は[‘item0’, ‘item1’, ‘itemX’, ‘item4’]になり、削除された配列removedItems6は前の例と同じ[‘item2’, ‘item3’]となります。
かなり複雑になってきますが、前の例と比較してみると分かりやすいかもしれません。
4つ目以降の引数を指定すると、複数の要素を追加できる
ここまでの機能を使うことはあまりないかもしれませんが、せっかくなのでご紹介します。前の例が理解できていれば、簡単です。
let items7 = ['item0', 'item1', 'item2', 'item3', 'item4']
let removedItems7 = items7.splice(2, 2, 'itemX', 'itemY')
console.log(items7)
// 出力される配列 ['item0', 'item1', 'itemX', 'itemY', 'item4']
console.log(removedItems7)
// 出力される配列 ['item2', 'item3']
let items8 = ['item0', 'item1', 'item2', 'item3', 'item4']
let removedItems8 = items8.splice(2, 0, 'itemX', 'itemY')
console.log(items8)
// 出力される配列 ['item0', 'item1', 'itemX', 'itemY', 'item2', 'item3', 'item4']
console.log(removedItems8)
// 出力される配列 []items7.splice(2, 2, ‘itemX’, ‘itemY’)、4つ目の引数に’itemY’を追加することで、配列items7は[‘item0’, ‘item1’, ‘itemX’, ‘itemY’, ‘item4’]に変化します。追加される要素が2つになること以外は、前の例と同じです。ちなみに、5つ目以降の引数を追加してさらに多くの要素を一度に追加することもできます。
また2つ目の引数を0に指定すると、削除する要素が0個になり、要素を追加するだけのメソッドにもなります。
いかがでしたか？splice() メソッドは機能が多く、他の人が書いたコードで見かけると大変な印象があります。
自分が使う場面以外でも、レビューの場面でお役に立てると幸いです。
最後まで読んでいただきありがとうございました。さらに詳しく、正確に情報を把握されたい方は、公式のリファレンスを確認してください。
コメント