Written by Kasumi

【JavaScript初心者向け】配列要素を追加・上書き・削除する方法

JavaScriptで、配列要素を追加・上書き・削除する方法を知りたい。

本記事ではこのような悩みを解決。

実装方法について解説します。

配列要素を追加

// 配列
var array = [1,2,3,4,5,6];

// 配列要素を末尾に追加
array.push(7);

// 出力結果
console.log(array);
// [1, 2, 3, 4, 5, 6, 7]

配列要素を追加するコード例です。

追加にはpushメソッドを使います。

使い方は以下の通りです。

配列変数.push(追加したい要素);

配列が入った変数をドット(.)でpushメソッドと連結。

引数に追加したい配列要素の数値or文字列を追加します。

以上で配列要素の末尾に新たな要素が追加されます。

配列要素を上書き

// 配列
var array = [1,2,3,4,5,6];

// 配列要素を上書き
array[0] = 10;

// 出力結果
console.log(array);
// [10, 2, 3, 4, 5, 6, 7]

配列要素を上書きするコード例です。

上書きの方法は以下の通りです。

array[配列番号] = 上書きする値;

配列要素の先頭 or 末尾を削除

// 配列
var array = [1,2,3,4,5,6];

// 配列要素の先頭を削除
array.shift();

// 配列要素の末尾を削除
array.pop();

// 出力結果
console.log(array);
//[2, 3, 4, 5]

配列要素の先頭 or 末尾を削除するコード例です。

先頭の削除にはshiftメソッド、末尾の削除にはpopメソッドを使います。

使い方は以下の通りです。

配列変数.shift();
配列変数..pop();

配列要素内の指定要素を削除

// 配列
var array = [1,2,3,4,5,6];

// 配列要素内の指定要素を削除
array.splice(1,1);

// 出力結果
console.log(array);
//[1, 3, 4, 5, 6]

配列要素内の指定要素を削除するコード例です。

配列要素内、二番目が削除されてる事がわかります。

指定要素の削除には、spliceメソッドを使います。

使い方は以下の通りです。

配列変数.splice(削除の開始位置,開始位置から削除する要素数);

spliceメソッドの第一引数に削除する要素の開始位置を指定。

第二引数に開始位置から削除する要素数を指定します。

まとめ

JavaScriptで、配列要素を追加・上書き・削除する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

JavaScriptでDOM(HTML)・画像の読み込み完了時に任意の処理を実行する方法

2022.12.26
2547
JavaScript

JavaScriptで参照先オブジェクトからthisが渡らない時の対処方法

2022.12.10
1286
JavaScript

【JavaScript】for…inとfor…ofの用途・違いについて

2022.12.28
826
JavaScript

【簡単】JavaScriptを使って任意の文字列を置換する方法

更新日:2022.09.09
1019