こんにちは、ともです。

JavaScriptやそれ以外の言語を勉強していると配列の使い方を混同してしまいますよね。現状僕は混同してしまっています。

ですので、この記事でJavaScriptの配列の要素を追加・置換・削除する方法についてまとめておこうと思います。

配列の宣言

let array1 = ['tomo', 'tanaka', 'yamada'];
let array2 = new Array('tomo', 'tanaka', 'yamada');
console.log(array1);// ["tomo", "tanaka", "yamada"]
console.log(array2);// ["tomo", "tanaka", "yamada"]

配列は['tomo', 'tanaka', 'yamada']のように[]で作成することができます。

またArrayオブジェクトのインスタンスを生成することによっても作成することができます。

どちらでも配列を作成することができますが、[]で配列を作成した方が良いです。

というのも、new Array(10)で作成した配列が10という要素を格納しているのか、長さが10の配列なのか分からないからです。

splice

配列の要素の追加・置換・削除を行うメソッドにspliceというメソッドが存在します。

spliceの引数は次のようになっています。

となっています。

という流れです。

Array.prototype.splice() | MDN

要素の追加

let array = ['tomo', 'tanaka', 'yamada'];
array.splice(1, 0, 'add');
console.log(array);
//["tomo", "add", "tanaka", "yamada"]

取り出す要素数(第二引数)を『0』に設定することにより要素の追加を行うことができます。

第二引数を『0』と設定するということは要素を取り出さないということであり、要素を取り出さずに第三引数以降の値を挿入するため追加した形になります。

上記のコードでは、『１』番目のインデックスに”add”を追加しました。

要素の削除

let array = ['tomo', 'test', '削除対象'];
array.splice(2, 1);
console.log(array);
//['tomo', 'test']

削除後に挿入する要素(第３引数)を設定しないことにより要素を削除することができます。

削除後に要素を挿入しないため要素を削除した形になります。

要素の置換

let array = ['tomo', 'test', '置換対象', '置換対象', 'hoge'];
array.splice(2, 2, '置換後', '置換後');
console.log(array);
// ["tomo", "test", "置換後", "置換後", "hoge"]

置換する場合、置換したい要素を削除→置換後の要素の追加という流れで行います。

上記のサンプルでは、インデックス番号3と4を削除し、削除後に”置換後”を挿入することで置換しています。

まとめ

spliceメソッドを利用することで配列要素の追加・削除・置換を行えることを説明しました。