2018.01.06

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引数にはカンマ区切りで複数の値を指定でき、いくつでも値を追加することができるのでそれを利用しています。

CSS本執筆しました！！！

CSS本出します！1/29発売予定
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs
— たかもそ＠CSS本1/29発売!! (@takamosoo) 2018年12月31日