Array.prototype.splice() – JavaScript ｜ MDN
splice()メソッドは、in place で既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。
splice メソッドは配列の内容を変更するメソッドです。中々便利な点な機能を持ちながらもこのメソッドを使い難くしているのが既存の配列を破壊する点です。
/** 素朴な書き方.js */ const a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; const b = ['d', 'e', 'f']; a.splice(3, b.length, b[0], b[1], b[2]);// [0,1,2,"d","e","f",6,7,8,9] /** スプレッド演算子による引数への展開.js */ const a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; const b = ['d', 'e', 'f']; // 引数中でスプレッド演算子で展開すると複数の引数と化します a.splice(3, b.length, ...b);// [0,1,2,"d","e","f",6,7,8,9]
この様に splice 元の配列の内容を変更します。このため迂闊に関数やメソッドの中で使うと呼び出した開発者の意図と異なる副作用が発生してしまいます。
これは次の様にスプレッド演算子で配列を展開することで解決できます。
/** スプレッド演算子を使った非破壊挿入方法.js */ const a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; const b = ['d', 'e', 'f']; // [...配列]とすることで配列をクローンできます（配列中の要素までクローンするディープクローンでないことに注意）。 (c = [...a]).splice(3, b.length, ...b); // a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; // c = [0,1,2,"d","e","f",6,7,8,9]
上記コードでのデモが次です。
各マスが状態を持って範囲指定で各マスが状態遷移を始める、といったロジックを実装する時、こういった置き換えができると速度面でもコードの読みやすさの面でも便利です。
