配列の一番後ろに追加する
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);
// 結果: 6push() とは
配列の末尾に要素を追加するメソッド。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);
// 結果: 6unshift()とは
配列の先頭に要素を追加するメソッド。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: 配列を変更する開始位置のindexdeleteCount: 第1引数で指定したstartの場所から取り除く要素の数
0かマイナスの場合はどの要素も取り除かれない。item1, item2, item3, ...: 追加したい要素。指定した分だけ配列に追加される
何も指定しない場合は追加はされず、要素が取り除かれるだけ
今回は取り除くのではなく、間に追加するので下記引数になっているcolors.splice(2, 0, 'orange');
\ 案件のご依頼・ご相談はこちらから /
JavaScriptで配列の先頭・最後尾・途中 (index指定) に要素を追加するメモ