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

disabledを使って任意のinput要素を入力無効にする方法【条件判定で解除する】

更新日:2022.09.09
424
JavaScript

【簡単】JavaScriptを使って任意の文字列が配列内にあるか検索する方法【indexOfメソッド】

更新日:2022.09.09
104
JavaScript

Swiperでサムネイル固定のスライダーを実装する方法

2022.09.19
53
JavaScript

【簡単】JavaScriptを使ってhtmlタグを取得し、値を出力・書き換える方法

更新日:2022.09.09
155