【JavaScript / Array】配列に要素を追加する

めだま

JavaScriptで配列の先頭・最後尾・途中 (index指定) に要素を追加するメモ

配列の一番後ろに追加する

push()メソッドを使う

const colors = ['red', 'yellow', 'green']

// ⭐️ 1つだけ追加する
colors.push('orange')
console.log(colors)
// 結果:  ['red', 'yellow', 'green', 'orange']

// ⭐️ 複数追加する & 戻り値で要素数を受け取る
const count = colors.push('white', 'black');
console.log(colors)
// 結果:  ['red', 'yellow', 'green', 'orange', 'white', 'black']
console.log(count);
// 結果: 6
push() とは

配列の末尾に要素を追加するメソッド。1つでも複数でも可能
複数の場合は引数を増やしていけばOK
戻り値は新しい配列の要素数

配列の一番最初に追加する

unshift()メソッドを使う

const colors = ['red', 'yellow', 'green']

// ⭐️ 1つだけ追加する
colors.unshift('orange')
console.log(colors)
// 結果:  ['orange', 'red', 'yellow', 'green']

// ⭐️ 複数追加する & 戻り値で要素数を受け取る
const count = colors.unshift('white', 'black');
console.log(colors)
// 結果:  ['white', 'black', 'orange', 'red', 'yellow', 'green']
console.log(count);
// 結果: 6
unshift()とは

配列の先頭に要素を追加するメソッド。1つでも複数でも可能。
複数の場合は引数を増やしていけばOK
戻り値は新しい配列の要素数

indexを指定して要素を追加する

splice()メソッドを使う

const colors = ['red', 'yellow', 'green']

// ⭐️ indexが2の場所に追加する
colors.splice(2, 0, 'orange');
console.log(colors)
// 結果:  ['red', 'yellow', 'orange', 'green']
splice() とは

配列の既存要素を置き換えたり、新しい要素を追加したり、
既存要素を取り除いたりできる汎用的なメソッド

戻り値は取り除かれた配列
何も削除されなかった場合は空配列が返ってくる。

splice (start, deleteCount, item1, item2, item3,...)

(引数に関して)
start: 配列を変更する開始位置のindex
deleteCount: 第1引数で指定したstartの場所から取り除く要素の数
0マイナスの場合はどの要素も取り除かれない。
item1, item2, item3, ...: 追加したい要素。指定した分だけ配列に追加される
何も指定しない場合は追加はされず、要素が取り除かれるだけ

今回は取り除くのではなく、間に追加するので下記引数になっている
colors.splice(2, 0, 'orange');