【JavaScript】配列に値を追加する方法を解説!値の追加、削除、取得を見ていきましょう。

プログラミング

今回は、Javascriptで配列に値を追加する方法を解説していきます。

ここでは、要素の追加、削除、値の取得の内容を扱って行きます。

プログラムをする上で配列に関して避けて通ることはできません。プログラムを学び始めたばかりの人は、配列を扱うのは難しいと思うかもしれませんが、難しく考える必要はありません。

JavaScriptの配列の基本的な構造と種類について

まずは配列について理解していきましょう。

配列は大きく分けて2つになります。

  • 配列
  • 連想配列

配列

  • 同じ型のデータを一列に並べたもの
  • 先頭が「0」であること(0,1,2,3,4…と増えていく)
var array = ["a","b", "c", "d"]

連想配列

  • 1つの変数で複数の「キー」と「値」または「関数(メソッド)」を持てます。
  • キーは任意の文字列を使えます。
  • 構文は、波括弧( { } )でくくります。項目が複数の場合はカンマで区切ります。
var associative_array = {
  a: '1',
  b: '2',
  c: '3',
  d: '4'
}

JavaScriptで配列に要素を追加する方法

配列に値を追加する方法はいくつかあり、先頭に追加する場合や末尾に追加、特定の位置に追加するといったケースがあります。

末尾に値を追加(push)

配列の末尾に値を追加する場合は、push関数を使います。

var array = ['a', 'b'];

array.push('c');

// ↓↓↓ 出力結果 ↓↓↓

console.log(array); // ['a', 'b', 'c']

先頭に値を追加(unshift)

配列の先頭に値を追加する場合は、unshift関数を使います。

var array = ['b', 'c'];

array.unshift('a');

// ↓↓↓ 出力結果 ↓↓↓

console.log(array); // ['a', 'b', 'c']

特定の位置に値を追加する場合(splice)

特定の位置に値を追加する場合は、splice関数を使います。

2番目に値を追加 : splice

var array = ['a', 'b', 'c'];

array.splice(1, 0, 'Z'); // 二番目に追加

// ↓↓↓ 出力結果 ↓↓↓

console.log(array); // ['a', 'Z', 'b', 'c']

3番目に複数追加する

var array = ['a', 'b', 'c'];

array.splice(2, 0, 'X', 'Z'); // 三番目に複数追加

// ↓↓↓ 出力結果 ↓↓↓

console.log(array); // ['a', 'b', 'X', 'Z', 'c']

インデックスを指定する場合の注意点

インデックスを指定して値を追加する場合は上書きといった形になるので注意が必要です。

以下の例では、2番目に値を追加できているように見えますが、もともと2番めにはbの値が入っており、そこに新たにZを追加(上書き)している形になります。

var array = ['a', 'b', 'c'];

array[1] = "Z" // 二番目に追加

// ↓↓↓ 出力結果 ↓↓↓

console.log(array); // ['a', 'Z', 'c']

JavaScriptで配列から値を削除する方法

末尾の値を削除(pop)

配列の末尾から値を削除する場合は、pop関数を使います。

var array = ['a', 'b', 'c'];

array.shift();

// ↓↓↓ 出力結果 ↓↓↓

console.log(array); // ['b', 'c']

先頭から値を削除(shift)

配列の先頭から値を削除する場合は、shift関数を使います。

var array = ['a', 'b', 'c'];

array.shift();

// ↓↓↓ 出力結果 ↓↓↓

console.log(array); // ['b', 'c']

特定の位置の値を削除する方法(splice)

特定の位置から値を削除する場合は、特定位置へ値を追加するときと同様にsplice関数を使います。

2番目の値を削除

var array = ['a', 'b', 'c'];

array.splice(1, 1); // 二番目から一つ削除

// ↓↓↓ 出力結果 ↓↓↓

console.log(array); // ['a', 'c']

2番目と3番目の値を削除する

var array = ['a', 'b', 'c'];

array.splice(1, 2); // 二番目から二つ削除

// ↓↓↓ 出力結果 ↓↓↓

console.log(array); // ['a']

JavaScriptで配列の値を取得する方法

配列から末尾の値を取得

var array = ['a', 'b', 'c'];

var value = array[0];

// ↓↓↓ 出力結果 ↓↓↓

console.log(array); // ['a', 'b', 'c']
console.log(value); // 'a'

配列の先頭から値を取得

var array = ['a', 'b', 'c'];

var val = array[array.length - 1];

// ↓↓↓ 出力結果 ↓↓↓

console.log(array); // ['a', 'b', 'c']
console.log(val); // 'c'

SAMURAI TERAKOYA

SAMURAI TERAKOYAの特徴とメリット

  1. 40種類以上の教材で、プログラミングスキル習得に必要な基礎から実戦までのすべてを学習できる
  2. つまづいたらいつでも相談できる「Q&A掲示板」があり現役エンジニアが学習のサポートをしてくれる
  3. SAMURAI ENGINEER Plus+にいる人達と一緒に学習をすることができる ←継続するにはかなりいい環境ですね!
  4. 単体レッスンも実施してくれるので、言語化できない悩みも相談することができる
  5. 月額のサブスクになっているので、利用しやすい!

注意点とデメリット

  • プログラミングスクールによくある就職できなかったらといったサポートが無い
  • 講義形式ではないので、自発的に行動しないといけない

SAMURAI TERAKOYAがおすすめの人

  • 月々定額で挫折せずプログラミングを学びたい人
  • エラーなどの悩みを相談できる環境が欲しい人
  • オンラインで学べるので地方やスクールに通う時間がない人

\ 今なら学び応援キャンペーンも実施中 /

プログラミング
スポンサーリンク
スポンサーリンク
e-logsをフォローする
スポンサーリンク
eLogs

コメント

タイトルとURLをコピーしました