JavaScriptでの配列の追加方法｜結合を利用した方法や削除方法も紹介
- システム
エンジニア - JavaScriptでの配列の要素追加や削除について教えていただけますか。
- プロジェクト
マネージャー - わかりました。それでは、詳しく解説いたしましょう。
JavaScriptでの配列の要素追加・削除について
今回は、JavaScriptでの配列の要素追加・削除について説明します。
ここでは、配列の
・先頭に追加
・末尾に追加
・指定した位置に追加
・結合（concat）
・結合（push）
・先頭を削除
・末尾を削除
・指定した位置を削除
・全削除
について紹介します。
JavaScriptでの配列の要素追加・削除に興味のある方はぜひご覧ください。
先頭に追加
JavaScriptにおいて、配列の先頭に要素を追加する方法を紹介します。
unshiftメソッドを使用します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
|
let array = ['C', 'D', 'E'];
// 配列の先頭に追加
array.unshift('B');
array.unshift('A');
console.log(array); // [ 'A', 'B', 'C', 'D', 'E' ]
|
実行結果は以下のようになります。
|
1
|
[ 'A', 'B', 'C', 'D', 'E' ]
|
1回のメソッド実行で追加できる要素は1つです。
このように、配列の先頭に要素を追加できます。
末尾に追加
JavaScriptにおいて、配列の末尾に要素を追加する方法を紹介します。
pushメソッドを使用します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
|
let array = ['A', 'B', 'C'];
// 配列の末尾に追加
array.push('D');
array.push('E');
console.log(array); // [ 'A', 'B', 'C', 'D', 'E' ]
|
実行結果は以下のようになります。
|
1
|
[ 'A', 'B', 'C', 'D', 'E' ]
|
1回のメソッド実行で追加できる要素は1つです。
このように、配列の末尾に要素を追加できます。
指定した位置に追加
JavaScriptにおいて、配列の指定した位置に要素を追加する方法を紹介します。
spliceメソッドを使用します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
|
let array = ['A', 'B', 'D', 'E'];
// 3番目に追加
array.splice(2, 0, 'C');
console.log(array); // [ 'A', 'B', 'C', 'D', 'E' ]
let array2 = ['A', 'E'];
// 2番目に複数追加
array2.splice(1, 0, 'B', 'C', 'D');
console.log(array2); // [ 'A', 'B', 'C', 'D', 'E' ]
|
実行結果は以下のようになります。
|
1
2
|
[ 'A', 'B', 'C', 'D', 'E' ]
[ 'A', 'B', 'C', 'D', 'E' ]
|
1回のメソッド実行で追加できる要素は複数です。
このように、配列の指定した位置に要素を追加できます。
結合（concat）
JavaScriptにおいて、配列を結合することで要素の追加ができます。
concatメソッドを使用します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
|
let array1 = ['A', 'B'];
let array2 = ['C', 'D', 'E'];
// 配列の結合
array3 = array1.concat(array2);
console.log(array1); // [ 'A', 'B' ]
console.log(array2); // [ 'C', 'D', 'E' ]
console.log(array3); // [ 'A', 'B', 'C', 'D', 'E' ]
|
実行結果は以下のようになります。
|
1
2
3
|
[ 'A', 'B' ]
[ 'C', 'D', 'E' ]
[ 'A', 'B', 'C', 'D', 'E' ]
|
配列を結合して新しい配列を生成しています。
このように、配列を結合することで要素の追加ができます。
結合（push）
JavaScriptにおいて、配列を結合することで要素の追加ができる、別の方法を紹介します。
pushメソッドを使用します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
let array1 = ['A', 'B'];
let array2 = ['C', 'D', 'E'];
// 配列の結合 array1にarray2を連結
Array.prototype.push.apply(array1, array2);
console.log(array1); // [ 'A', 'B', 'C', 'D', 'E' ]
console.log(array2); // [ 'C', 'D', 'E' ]
// array2とarray1の順序を入れ替えて再実行
array1 = ['A', 'B'];
array2 = ['C', 'D', 'E'];
// 配列の結合 array2にarray1を連結
Array.prototype.push.apply(array2, array1);
console.log(array1); // [ 'A', 'B' ]
console.log(array2); // [ 'C', 'D', 'E', 'A', 'B' ]
|
実行結果は以下のようになります。
|
1
2
3
4
|
[ 'A', 'B', 'C', 'D', 'E' ]
[ 'C', 'D', 'E' ]
[ 'A', 'B' ]
[ 'C', 'D', 'E', 'A', 'B' ]
|
配列の結合はしますが、新しい配列の生成はしていません。
このように、配列を結合することで要素の追加ができます。
先頭を削除
JavaScriptにおいて、配列の先頭の要素を削除する方法を紹介します。
shiftメソッドを使用します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
|
let array = ['A', 'B', 'C', 'D', 'E'];
// 配列の先頭を削除
array.shift();
console.log(array); // [ 'B', 'C', 'D', 'E' ]
|
実行結果は以下のようになります。
|
1
|
[ 'B', 'C', 'D', 'E' ]
|
このように、配列の先頭の要素を削除できます。
末尾を削除
JavaScriptにおいて、配列の末尾の要素を削除する方法を紹介します。
popメソッドを使用します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
|
let array = ['A', 'B', 'C', 'D', 'E'];
// 配列の末尾を削除
array.pop();
console.log(array); // [ 'A', 'B', 'C', 'D' ]
|
実行結果は以下のようになります。
|
1
|
[ 'A', 'B', 'C', 'D' ]
|
このように、配列の末尾の要素を削除できます。
指定した位置を削除
JavaScriptにおいて、配列の指定した位置の要素を削除する方法を紹介します。
spliceメソッドを使用します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
|
let array = ['A', 'B', 'C', 'D', 'E'];
// 3番目から1つ削除
array.splice(2, 1);
console.log(array); // [ 'A', 'B', 'D', 'E' ]
array = ['A', 'B', 'C', 'D', 'E'];
// 2番目から3つ削除
array.splice(1, 3);
console.log(array); // [ 'A', 'E' ]
|
実行結果は以下のようになります。
|
1
2
|
[ 'A', 'B', 'D', 'E' ]
[ 'A', 'E' ]
|
このように、配列の指定した位置の要素を削除できます。
全削除
JavaScriptにおいて、配列の要素を全削除する方法を紹介します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
|
let array = ['A', 'B', 'C', 'D', 'E'];
// 配列の全要素を削除
array.length = 0;
console.log(array); // []
|
実行結果は以下のようになります。
|
1
|
[]
|
このように、配列の要素を全削除できます。
- システム
エンジニア - 配列の先頭や末尾や指定した位置に追加、削除したいことありますので、とても参考になりました。
- プロジェクト
マネージャー - ご紹介したソースコードを参考にして、ぜひご自身でもソースコードを書いてみてください。
まとめ
JavaScriptでの配列の要素追加・削除について説明しました。
ここでは、配列の
・先頭、末尾、指定した位置に追加
・結合（concat/push）
・先頭、末尾、指定した位置を削除
・全削除
について紹介しました。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
JavaScript新着案件New Job
-
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務
月給26万～26万円東京都千代田区(秋葉原駅) -
官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】
月給50万～60万円東京都府中市(中河原駅) -
官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】
月給25万～35万円東京都府中市(中河原駅) -
システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務
月給63万～63万円埼玉県川越市(南大塚駅)
関連記事Related Posts
-
jQueryのparentメソッドとは？parentメソッドの使用方法を紹介
jQueryでのparentメソッドの使い方とは？ 今回は、jQueryでのparentメソッドの使い方について説明します。parentメソッドを使用すれば、親要素を取得できます。 基本的な使い方から、引数の使い方につい […]
-
jQueryでのaddClassメソッドの使い方を紹介！複数classを追加する方法とは？
jQueryでのaddClassメソッドの使い方とは？ 今回は、jQueryでのaddClassメソッドの使い方について説明します。 addClassメソッドを使用すると、classを追加することができます。addCla […]
-
jQueryの「id」セレクタを利用する方法9選｜使う際の注意点とは
HTML要素であるidの特徴3つ CSSやJavaScriptで装飾するために必要であるHTMLの要素のidは、大きく分けて3つの性質を持っています。その性質や似た性質を持っているclassとの使い分けについて紹介してい […]
-
jQueryでremove()を使った要素の削除方法5選！その他の方法も解説
jQueryでのremoveメソッドの使い方とは？ 今回は、jQueryでのremoveメソッドの使い方について説明します。 removeメソッドを使用すると、要素の削除ができます。 ここでは、 ・指定の要素を削除 ・i […]
-
JavaScriptのonloadについて解説します
JavaScriptのonloadとは？ JavaScriptのonloadは、Windowsインターフェイスのメソッドです。 具体的には以下のような使い方をします。 [crayon-6335cffecff3217156 […]
