TypeScriptで配列に要素を追加、または削除するメソッドについてまとめました（基本的にJavaScriptで使用可）。
以下で紹介するメソッドは破壊的メソッドと呼ばれ、元の配列を壊してしまうので注意して使用してください。
配列に要素を追加、または削除するメソッド
末尾に要素を追加する
配列名.push(追加する要素, ….)
const subject:string[] = ["国語","数学","理科"];
subject.push("社会");
console.log(subject); //['国語', '数学', '理科', '社会']先頭に要素を追加する
配列名.unshift(追加する要素, ….)
const subject2:string[] = ["国語","数学","理科"];
subject2.unshift("社会");
console.log(subject2); //['社会', '国語', '数学', '理科']末尾の要素を削除する
配列名.pop()
const subject3:string[] = ["国語","数学","理科"];
subject3.pop();
console.log(subject3); //['国語', '数学']先頭の要素を削除する
配列名.shift()
const subject4:string[] = ["国語","数学","理科"];
subject4.shift();
console.log(subject4); //['数学', '理科']元の配列を残したい場合
冒頭でお伝えしたように上記で紹介したメソッドは破壊的メソッドと呼ばれ、元の配列を壊してしまいます(新しい配列を作る)。元の配列を残したまま配列に処理を加えたい場合、配列とは別の変数または定数に配列をコピーして上記のメソッドを使用しようする必要があります。
配列のコピー
配列のコピーはスプレッド演算子を使用します。
const subject: string[] = ["国語", "数学", "理科"];
const subjectCopy: string[] = [...subject]; //スプレッド演算子
subjectCopy.push("社会");
console.log(subjectCopy); //['国語', '数学', '理科', '社会']
console.log(subject); //['国語', '数学', '理科']スプレッド演算子についてわからない場合は以下のサイトを参考にしてください。
まとめ
今回はTypeScriptで配列に要素を追加、または削除するメソッドについてまとめました。
TypeScriptと記載していますが、基本的にJavaScriptで使用できるものです。配列の操作は実装でよく見かけると思いますので、ぜひ参考にしてみてください。
