JavaScript配列追加で気になること全て解説【splice、重複なしも】

「JavaScriptで配列追加の方法をまとめて解説しているところはない？」

「配列追加で途中から追加するやり方も知りたい」

今回はこんな人のために記事を書いています。

この記事では、配列への追加で気になる方法を紹介します！

この記事を読むことによって、実行可能なコードを知ることができ、コピペですぐ動かすことができるようになります！

実際に動くかどうかは検証済みなので、ぜひ自身の環境で試していただければと思います。

コードも含めて載せていますので、参考にしてみてください！

今回の解説内容

この記事では、以下の６つについて解説しています。

それぞれのコードを交えて解説していきます。

気になるところだけある人は、上の目次から見たいところジャンプしてみてみてください！

なんで、この６つなのかな？

「配列　追加」に関してみんなが良く検索している項目がこの6つだからだよ！

この記事でまとめることで、「配列　追加」ではもう迷わないようにしたいんだ！

プロラブ

JavaScript配列削除で気になること3つを解説！(splice,filterも)

https://www.abyblog.online/?p=783

配列の先頭に追加

const fruits = ["banana", "orange", "grape"];
fruits.unshift("lemon");
console.log(fruits)

配列の先頭に追加するのは、

配列.unshift ( 追加したい要素1 , 追加したい要素2, ...)

で追加していくことができます。

上の例だと、

console.log ( fruits )

＞["lemon", "banana", "orange", "grape"]

となります。

「＞」これがついている行は出力結果を表しているよ！！

実際に書いている行ではないよ！

※※追加したい要素1,追加したい要素2 , ... って書いてあるところは、単数でも複数でも大丈夫です！

上の例では、単数で追加しています。

配列の末尾に追加（push）

const fruits = ["banana", "orange", "grape"];
fruits.push("melon");
console.log(fruits);

配列の末尾に追加するには、

配列.push ( 追加したい要素1 , 追加したい要素2 , ...)

で追加していくことができます。

console.log ( fruits )

＞[ "banana", "orange", "grape", "melon"]

となります。

配列の途中に追加（splice）

const fruits = ["banana", "orange", "grape"];
fruits.splice(1,0,"apple","kiwi")
console.log(fruits);

配列の途中に追加するには、spliceメソッドを使います。

まず、spliceメソッドの使い方を解説します。

spliceメソッドとは、「特定の要素を切り取り、追加する」ことができるメソッドです。

以下のように書きます。

配列.splice ( 開始位置 , 長さ , 追加したい要素1 , 追加したい要素2 , ...)

「開始位置」と「長さ」で切り取る要素を決め、そこに「追加したい要素」を入れることができます。

例えば、、以下のようないろいろな挙動が可能です。

const fruits = ["banana", "orange", "grape"];

//長さが0なので、切り取らない。変化なし。
fruits.splice(1,0)
>["banana", "orange", "grape"]

//１番目から１つを切り取る
fruits.splice(1,1)
>["banana", "grape"]

//１番目から１つを切り取って、apple,kiwiを追加。
fruits.splice(1,1, "apple", "kiwi");
>["banana", "apple", "kiwi", "grape"]

//１番目に apple,kiwiを追加。※※途中に追加する場合はこれ
fruits.splice(1,0, "apple", "kiwi");
>["banana", "apple", "kiwi", "orange", "grape"]

ぜひ、色々試してみてください！

元の配列を維持したまま、特定の要素を切り出したい場合は、

sliceメソッドを使うとよいと思います！

この記事では解説しませんので、余力があれば調べてみましょう！

配列に配列を追加

const fruits = ["banana", "orange", "grape"];
let fruits2 = fruits.concat(["melon","apple"]); 
console.log(fruits2);
> ["banana", "orange", "grape", "melon","apple"]

配列に配列を追加するには、

let 追加された配列 = 配列1.concat ( 配列2 );

で追加することができます。（結合するとも言います）

また、配列を変数に代入して追加することもできます。

const fruits = ["banana", "orange", "grape"];
let add_fruits = ["melon","apple"]
let fruits2 = fruits.concat(add_fruits); 
console.log(fruits2);
> ["banana", "orange", "grape", "melon","apple"]

配列に複数追加

もう、こちら前の文章を読んでいるかたなら、説明しているので重複しちゃうと思いますが、ご了承ください。

配列に複数追加する方法は、どこに追加するかによって、変わってきます。

以下では、先頭、最後に複数追加する例を紹介します！

（途中に複数追加するのは、前の章で解説しているのでそこを見てください！）

const fruits = ["banana", "orange", "grape"];
fruits.push("melon","apple");
console.log(fruits);
>["melon","apple", "banana", "orange", "grape"]

const fruits = ["banana", "orange", "grape"];
fruits.push("melon","apple");
console.log(fruits);

配列に重複なしで追加

const fruits = ["banana", "orange", "grape","banana"];
const fruits_set = new Set(fruits);

console.log(fruits_set)
> ["banana", "orange", "grape"]

result.add("apple")
console.log(fruits_set)
> ["banana", "orange", "grape"]

配列に重複をなくすためには、Setメソッドを使うことで変換できます。

.add はSetコレクションに値を追加する方法です。

配列.add ( 追加したい要素1, 追加したい要素2, ... )

なので、配列に重複なしで追加したい場合は、

①配列にSetメソッドを用いる

②.addメソッドで要素を追加する

これで、追加できます。

Setコレクションでは、重複した値を代入しようとすると、自動的に排除され追加されません。

重複排除の方法として、filter とか、indexOfを使う方法もありますが、

それらは、圧倒的に処理の時間が長くなります。

簡単なコードであれば、問題ありませんが、処理する量が増えるとその時間は大きな差となるでしょう。

なので、なるべくSetを使うことをおススメします。

まとめ

今回は、JavaScriptで配列に追加する方法をそれぞれ紹介しました。

次の記事でも、配列について解説しますので、そちらも参考にしてみてください。