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

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

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

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

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

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

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

var array = ["a","b", "c", "d"]

var associative_array = {
  a: '1',
  b: '2',
  c: '3',
  d: '4'
}

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

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

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

array.push('c');

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

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

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

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

array.unshift('a');

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

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

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

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

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

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

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

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']

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

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

array.shift();

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

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

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

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

array.shift();

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

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

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

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

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

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

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

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

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

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

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

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'

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