[JavaScript] 配列要素の追加方法

JavaScriptにおける配列要素の追加についてまとめておく。
今回サンプルとして使用する配列は以下としておく。

const color = ["red", "white", "blue", "green"]

ちなみにconstは再代入ができないが、今回紹介するpush()などのメソッド操作は行うことができる。また、今回紹介するpush()とunshift()は配列（今回では配列color）そのものへ要素を追加し、内容が変更されていまう破壊的メソッドであることに注意が必要である。

新しい要素の追加

配列の末尾に追加

配列の末尾に1つ以上の要素を追加する場合は、push()を使用する。返り値は、追加後の配列の要素数。

color.push("yellow","black");
console.log(color);    // [ 'red', 'white', 'blue', 'green', 'yellow', 'black' ]

配列の先頭に追加

配列の先頭に1つ以上の要素を追加する場合は、unshift()を使用する。返り値は、追加後の配列の要素数。

color.unshift("yellow","black");
console.log(color);    // [ 'yellow', 'black', 'red', 'white', 'blue', 'green' ]

配列の指定位置に追加

配列の指定位置に追加したい場合は、splice()を使用する。splice()の引数は以下となる。
第一引数：配列の追加・削除を行う位置（負の数で配列末尾から引いた位置も指定可）
第二引数：削除する要素数（今回は追加のため0を指定）
第三引数：追加する要素
返り値は、削除された要素の配列が返される。削除されない場合は空の配列が返される。

const result = color.splice(2,0,"yellow","black");
console.log(color);    // [ 'red', 'white', 'yellow', 'black', 'blue', 'green' ]
console.log(result)    // []

今回は要素の追加だけを取り上げたが、splice()は要素の置き換えや削除も行うことができる。