Help us understand the problem. What is going on with this article?

spliceは切り取るだけのメソッドではなかった

More than 1 year has passed since last update.

恥ずかしながらJavaScriptのArray.prototype.spliceメソッドについて勘違いしていたのでちゃんと使い方を理解しておく。

勘違いしていたこと

spliceの語感がslicesplitと似ているし、こういう使い方↓をするので"切り取る"ためのメソッドだと思っていた。

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2);    // [1, 4, 5]

しかしspliceはそれ以上の使い方ができるメソッドだし、調べてみるとそもそもspliceという言葉は"切り取る"とはまるで逆の意味を持っていた。この意味を知っていたらこんな勘違いをすることもなかった気がする。

splice

解いて組み継ぎする、より継ぎする、継ぎ合わせる
https://ejje.weblio.jp/content/splice

要素を削除してつなぎ合わせる

まずは基本的な使い方。インデックスと個数を指定して配列から要素を切り取る。

let arr = ['a', 'b', 'c', 'd', 'e'];
arr.splice(
    1,    // インデックス1('b')からスタートして
    2     // 2個の要素を切り取る('b', 'c')
);
console.log(arr);    // ['a', 'd', 'e']

ちなみにspliceの戻り値で切り取った要素を受け取ることができる。

let cut = arr.splice(1, 2);  // ['b', 'c']

要素を差し込んでつなぎ合わせる

配列の指定した位置に要素を差し込むことができる。

let arr = ['a', 'b', 'c'];
arr.splice(
    1,    // インデックス1に
    0,    // 切り取る数は0で
    'x'   // 'x'を差し込む
);
console.log(arr);    // ['a', 'x', 'b', 'c']

spliceの言葉の意味を汲むと、

  • 配列arrをインデックス1で切り離して、  ['a'] ['b', 'c']
  • 'x' を接ぎにして ['a'] 'x' ['b', 'c']
  • つなぎ合わせる ['a', 'x', 'b', 'c']

といったほうがあっているかもしれない。

差し込む要素は複数あってもいい。

let arr = ['a', 'b', 'c'];
let cut = arr.splice(1, 0, 'x', 'y', 'z');  // ['a', 'x', 'y', 'z', 'b', 'c']

ES6のスプレッド演算子を使うとスマートな感じになる。

let arr = ['a', 'b', 'c'];
let cut = arr.splice(1, 0, ...['x', 'y', 'z']);

要素を入れ替える

ということで以上2つを組み合わせて要素を入れ替えることができる。

let arr = ['a', 'b', 'c', 'd', 'e'];
arr.splice(1, 3, ...['x', 'y', 'z']);    // ['a', 'x', 'y', 'z', 'e']

配列を分割する

第2引数がなければ指定したインデックスで配列を分割する操作になる。

let arr = ['a', 'b', 'c', 'd', 'e'];
let arr2 = arr.splice(2);
console.log(arr);    // ['a', 'b']
console.log(arr2);   // ['c', 'd', 'e']
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away