JSで配列の途中に単一の値や配列など複数の値を挿入する

JavaScriptで配列の途中に単一の値や複数の値を挿入したいときにどのようにすればよいか紹介します。

配列の途中に値を挿入


function insert(array, index, value) {
  array.splice(index, 0, value);
}

.splice() を使うことで任意の場所に挿入できます。


var array = ['foo', 'bar', 'baz'];
insert(array, 1, 'qux');
// => array: ['foo', 'qux', 'bar', 'baz']

これで任意の場所に挿入できますが、 array を変更してしまいます。もともとある array を変更したくない場合は以下のように配列をコピーすれば回避することができます。


function insert(array, index, value) {
  var _array = array.slice();
  _array.splice(index, 0, value);
  return _array;
}

var array = ['foo', 'bar', 'baz'];
var output = insert(array, 1, 'qux');
// => array: ['foo', 'bar', 'baz']
// => output: ['foo', 'qux', 'bar', 'baz']

配列の途中に配列を挿入


function insert(array, index, value) {
  var _array = [index, 0];
  [].push.apply(_array, value);
  [].splice.apply(array, _array);
}

var array = ['foo', 'bar', 'baz'];
insert(array, 1, ['qux', 'quux']);
// => array: ['foo', 'qux', 'quux', 'bar', 'baz']

.apply を使うと引数に値を 配列形式 で渡すことができます。また、 .splice() の第3引数にはカンマ区切りで複数の値を指定でき、いくつでも値を追加することができるのでそれを利用しています。