1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Javascript Array.splice()の使い方

Posted at

#splice()の引数による挙動の違いについて解説
今回は1〜3までの引数を持つときの動きを記述
最終的にコンソール結果はこの通り
スクリーンショット 2020-07-24 13.14.51.png

##1個の時


//引数が1つの場合
let array = ['1番目', '2番目', '3番目', '4番目', '5番目','6番目','7番目'];
console.log(array);

let arr = array.splice(2);//結果:['3番目', '4番目', '5番目']←引数が1つだと配列の○番目のインデックス未満のインデックスを削除
                          //ここで注意なのは大元のarrayの3番目以降の要素が削除されること。つまりarrで表示される部分がarrayからarrに引越しした感じ
console.log(array);//結果: ["1番目", "2番目"]
console.log(arr);//結果:['3番目', '4番目', '5番目']

##2個の時

//引数が2つの場合
let array2 = ['1番目', '2番目', '3番目', '4番目', '5番目','6番目','7番目'];
console.log(array2)
let arr2 = array2.splice(2,2)//配列の○(第一引数)番目から△(第二引数)個のインデックスを抜き取る。
console.log(array2);//結果:["1番目", "2番目", "5番目", "6番目", "7番目"]
console.log(arr2);//結果:["3番目", "4番目"]

##3個の時

//引数が3つの場合
let array3 = ['1番目', '2番目', '3番目', '4番目', '5番目','6番目','7番目'];
console.log(array3)//3番目、4番目を抜き取り、その場所に新規値を追加(今回は'インデックスに追加'を追加)
let arr3 = array3.splice(2,2,'インデックスに追加')// ["1番目", "2番目", "インデックスに追加", "5番目", "6番目", "7番目"]
console.log(array3)//
console.log(arr3)//

#ポイント
####引数(n, l , o)
####1個だったら引数からn番目以降のインデックスを取り出す(元の配列から削除)
####2個だったら引数からn番目以降インデックスからl個のインデックスを取り出す(元の配列から削除)
####3個だったら引数からn番目以降インデックスからl個のインデックスを取り出し(元の配列から削除)、n番目の次にoの値を追加する(lが0であれば単純にoを追加するということになる)

###つまり
####引数が1 or 2 なら削除で使う
####引数が3 なら追加(削除も可能)

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?