JavaScriptで配列に要素を追加する方法と削除する方法の簡単なまとめです。
配列に要素を追加する
インデックス指定：指定の場所に要素を追加
インデックスを指定することで配列の指定の場所に要素を追加できます。
下記は配列の最後に追加する例です。
let image = ['maru','shikaku','sankaku'];
image[3] = 'hosi';
console.log(image);
// ["maru","shikaku","sankaku","hosi"]配列の最後に追加する方法は、配列の要素数（length）を用いて次のようにも書けます。
let image = ['maru','shikaku','sankaku'];
image[image.length] = 'hosi';
console.log(image);
// ["maru","shikaku","sankaku","hosi"]配列の最後よりもっと後のインデックスを指定すると、その間のインデックスには空要素が追加されます。
.push()：最後に要素を追加
pushメソッドを使用して配列の最後に要素を追加する方法です。
let image = ['maru','shikaku','sankaku'];
image.push('hosi');
console.log(image);
// ["maru","shikaku","sankaku","hosi"].unshift()：先頭に要素を追加
unshiftメソッドを使用して配列の先頭に要素を追加する方法です。
let image = ['maru','shikaku','sankaku'];
image.unshift('hosi');
console.log(image);
// ["hosi","maru","shikaku","sankaku"].splice()：指定の場所に要素を追加
shiftメソッドを使用して指定の場所に要素を追加する方法です。
配列名.splice( 開始位置, 要素数, 要素の値)
「開始位置」：配列の削除したい要素のインデックス番号を指定
「要素数」 ：何個の要素を削除するかを指定
「要素の値」：追加(変更)する要素の値を指定
要素数は「0」を指定します。
let image = ['maru','shikaku','sankaku'];
// インデックス3番目（最後）に要素を追加する
image.splice( 3, 0, 'hoshi');
console.log(image);
// ["maru","shikaku","sankaku","hoshi"]指定したインデックスに要素を追加できるため、元々その場所にあった要素は後ろにずれます。
let image = ['maru','shikaku','sankaku'];
// インデックス2番目に要素を追加する
image.splice( 2, 0, 'hoshi');
console.log(image);
// ["maru","shikaku","hoshi","sankaku"]配列の要素を削除する
.pop()：最後の要素を削除
popメソッドを使用して配列の最後にある要素を削除する方法です。
let image = ['maru','shikaku','sankaku'];
image.pop();
console.log(image);
// ["maru","shikaku"]返り値を使って削除した要素を取得できます。
let image = ['maru','shikaku','sankaku'];
let result = image.pop();
console.log(result);
// "sankaku".shift()：先頭の要素を削除
shiftメソッドを使用して配列の先頭にある要素を削除する方法です。
let image = ['maru','shikaku','sankaku'];
image.shift();
console.log(image);
// ["shikaku","sankaku"]返り値を使って削除した要素を取得できます。
let image = ['maru','shikaku','sankaku'];
let result = image.shift();
console.log(result);
// "maru".splice()：指定の要素を削除（複数可）
shiftメソッドを使用して配列の先頭にある要素を削除する方法です。
削除する要素は1つだけでなく、複数の要素も削除できます。
配列名.splice( 開始位置, 要素数)
「開始位置」：配列の削除したい要素のインデックス番号を指定
「要素数」 ：何個の要素を削除するかを指定
let image = ['maru','shikaku','sankaku','hoshi'];
// インデックス0番目から1個（先頭）の要素を削除する
image.splice( 0, 1 );
console.log(image);
// ["shikaku","sankaku","hoshi"]let image = ['maru','shikaku','sankaku','hoshi'];
// インデックス1番目から2個の要素を削除する
image.splice( 1, 2 );
console.log(image);
// ["maru","hoshi"]delete：指定の要素を削除
delete演算子を使用して配列の先頭にある要素を削除する方法です。
let image = ['maru','shikaku','sankaku'];
delete image[1];
console.log(image);
// ["maru",,"sankaku"]
console.log(image[1]);
// undefinedpop() や shift() のように後ろの要素は詰まらないのでご注意ください。
返り値を使って削除の成功可否を「true / false」で取得できます。
let image = ['maru','shikaku','sankaku'];
let result = delete image[1];
console.log(result);
// true ※成功.filter()：要素を検索して削除
filterを使用して配列内の値を検索しながら、指定の条件で要素を削除する方法です。
let image = ['maru','shikaku','sankaku'];
let result = image.filter( item => item !== 'sankaku');
console.log(result);
// ["maru","shikaku"]「item === ‘sankaku’ 」のような条件にすれば、指定の要素だけを抽出することもできます。
let image = ['sankaku','maru','shikaku','sankaku'];
let result = image.filter( item => item === 'sankaku');
console.log(result);
// ["sankaku","sankaku"]配列内の要素を全て削除
空の配列やlengthに0を適用することで配列内の要素を全て削除できます。
// 空の配列を代入する方法
let image = ['maru','shikaku','sankaku','hoshi'];
image = [];
console.log(image);
// []
// lengthに0を代入する方法
let image2 = ['maru','shikaku','sankaku','hoshi'];
image2.length = 0;
console.log(image2);
// []配列の要素を変更する
インデックス指定：指定の要素を変更
既に存在するインデックスを指定すると、要素を変更できます。
let image = ['maru','shikaku','sankaku'];
image[1] = 'hosi';
console.log(image);
// ["maru","hosi","sankaku"].splice()：指定の要素を変更
spliceメソッドを使用して指定の要素を変更します。
let image = ['maru','shikaku','sankaku'];
image.splice( 1, 1, 'hosi' );
console.log(image);
// ["maru","hosi","sankaku"]第2引数（要素数）によって、指定された複数要素をまとめて1つの要素に変更できます。
let image = ['maru','shikaku','sankaku','hoshi','batsu'];
image.splice( 1, 3, 'daiya' );
console.log(image);
// ["maru","daiya","batsu"]