配列と配列の扱い

配列とは

オブジェクトの一種。複数の値を一つの定数または配列に格納して扱うデータ構造。

const array = [1, 2, 3];
console.log(array);
// [1, 2, 3]と表示

[ ]の中にカンマ区切りで複数の値を記述し、定数または変数に代入することで配列をつくることができる。

上記の例では1、2、3の全ての値をarrayという定数で扱うことができる。

配列の値を表示する

const array = [1, 2, 3];
console.log(array[1]);
// [2]と表示

配列の個々の値を扱う場合は添字という配列の順番を表す数値で指定する。添字は0から始まるので配列が上記のように3つある場合には0〜2で指定する。

配列の値を変更する

const array = [1, 2, 3];
array[1] = 4;
// [1, 4, 3]に変更
console.log(array[1]);
// [4]と表示

配列の値を変更する際には添字で変更する値を指定して、新しい値を入れるだけで良い。

また、定数で配列を扱う注意点として、配列の値の変更であり再代入を行っているわけではないのでエラーは起こらない。配列の値に対してではなく、配列から文字列に、などのような変更が再代入でエラーとなる。

const array = [1, 2, 3];
array[1] = 4;
// OK
array = 4;
// 配列そのものが4の数値になってしまうためNG

要素の個数を調べる

const array = [1, 2, 3];
ｃconsole.log(array.length);
// 3と表示

lengthメソッドを使用すると配列に格納されている要素の数を取得することができる。

上記の例では配列として定義した定数のarrayにlengthメソッドを使用して、arrayの中に入っている要素の個数を表示する。

配列の要素の追加（先頭、末尾）

配列の要素を後から追加する際の操作を行う。

先頭に要素を追加

配列.unshift(先頭に追加したい値);

配列の一番最初([0]番目)に値を新しく追加する。

const animal = [ 'cat', 'dog', 'bird' ];
animal.unshift('mouse');

console.log(animal)
// [ mouse, cat, dog, bird ]と表示

末尾に要素を追加

配列.push(末尾に追加したい値, 末尾に追加したい値, ...);

配列の一番最後に値を新しく追加する。値はカンマで区切ればいくつでも追加可能。

const animal = [ 'mouse', 'cat', 'dog', 'bird' ];
animal.push('duck');

console.log(animal)
// [ mouse, cat, dog, bird, duck ]と表示

配列の要素の削除（先頭、末尾）

配列の要素を後から追加する際の操作を行う。

先頭の要素を削除

配列.shift();

配列の一番最初の値を削除する。追加と違い、かっこの中はなにも指定せずでOK。

const animal = [ 'mouse', 'cat', 'dog', 'bird', 'duck' ];
animal.shift();

console.log(animal)
// [ cat, dog, bird, duck ]と表示

末尾の要素を削除

配列.pop();

配列の一番最後の値を削除する。

const animal = [ 'cat', 'dog', 'bird', 'duck' ];
animal.pop();

console.log(animal)
// [ cat, dog, bird ]と表示

配列の要素の追加・削除（真ん中）

配列の先頭でも末尾でもない値の追加と削除は別のメソッドを使用する。

配列.splice(変更したい箇所, 削除する数, 追加する値);

配列に対してspliceメソッドを使用すると、配列の途中の値に対して削除と追加を同時に行うことができる。

変更したい箇所は添字で指定する。

追加する値はカンマで区切ればいくつでも追加可能。

const animal = [ 'mouse', 'cat', 'dog', 'bird', 'duck' ];
animal.splice(1, 2, 'rabbit', 'lion');

console.log(animal)
// [ mouse, rabbit, lion, bird, duck ]と表示

上記の例では、spliceの第一引数（変更開始の箇所）が添字で1なので、0..1..と配列の2番目の値が起点となる。

第二引数（削除する数）が2なので、起点のcatから2つ分削除される。今回であればcatとdogが削除。

第三引数以降（追加する値）は起点から追加する値をカンマ区切りで指定している。今回であればrabbitとlionが追加となる。

削除だけしたい場合

削除だけしたい場合は第三引数以降は省略する。

animal.splice(1, 2);

上記の例では配列の2番目を起点に2つ分の値を削除、追加はしない。

追加だけしたい場合

削除はせず追加だけしたい場合は第二引数を0にする。

animal.splice(1, 0, 'rabbit', 'lion');

上記の例では配列の2番目を起点にrabbitとlionの値を追加している。削除はしない。

配列の繰り返し処理(for文)

for文を使用して配列を使用した繰り返し処理を行う。

for(i = 0; i <= 配列.length; i++) {
  繰り返す処理;
}

iという変数のカウンターを用意して、lengthメソッドで配列の数だけ処理を繰り返す構文。

var colors = ['red', 'blue', 'green'];

for (var i = 0; i < colors.length; i++) {
    console.log(colors[i]);
}

上記の例ではcolorsの値が順番に全て表示される処理となっている。

forEachを使用した配列の処理

for文の代わりにforEachを使用することができる。配列の全ての要素に対して、要素がなくなるまで処理を行う。

配列.forEach(function(引数) {
  繰り返す処理;
});

forEachのあとにはコールバック関数がくる。

始めに配列の一つめの値がコールバック関数に渡されて何かしらの処理を行った後、次の値に戻ってきてコールバック関数により処理を行い・・という処理を配列の数だけ繰り返している。

let numbers = [1, 2, 3, 4, 5];
let sum = 0;

numbers.forEach(function(number) {
    sum += number;
});
// 15

上記は配列に格納されている数値を合計する式の例。引数の命名は自由だが、配列が複数形であることが多いので単数形にすると良い。

コールバック関数は匿名関数である必要はない

コールバック関数は匿名ではなく、事前に定義していても良い。

let numbers = [1, 2, 3, 4, 5];
let sum = 0;

function adder(number) {
    sum += number;
}

numbers.forEach(adder);


// 下記と同義
let numbers = [1, 2, 3, 4, 5];
let sum = 0;

numbers.forEach(function(number) {
    sum += number;
});

上記の例では処理をforEachの前で定義しておき、実際のforEachの処理で関数名を呼び出している。

よく使用する関数がある場合には、先に定義して引数として呼び出すほうが好ましい。

アロー関数を使用した記述

配列.forEach(引数 => {
  繰り返す処理;
});

functionを使用せずアロー関数で上記のようにも記述することができる。

mapを使用した配列の処理

mapに対して関数を渡してあげると、その関数を全ての要素に対して適用して返してくれる。

配列.map(引数 => 処理);

mapを使用した例

const nums = [1, 2, 3, 4];

const newNums = nums.map(num => {
  num * 2;
});
// returnを短縮して下記のようにも書ける
const newNums = nums.map(num => num * 2);
// [2, 4, 6, 8]と表示

// 下記と同義
const nums = [1, 2, 3, 4];
const newNums = []

nums.forEach(num => {
  newNums.push(num *= 2);
});

上記の例では1〜4の数値が入っている配列numsを、2倍にしてnewNumsに代入している。

filterで真偽値を利用して値を取り出す

真偽値によって配列からほしい情報を取り出す。

配列.filter(引数 => 真偽値の演算子);

真偽値がtrue

filterを使用した例

const nums = [1, 2, 3, 4];
const newNums = nums.filter(num => num % 2 === 0);
console.log(newNums);

上記の例は配列numsに対して偶数値を取り出す処理の例。演算子がtrueである内容がnewNumsに格納される。

※このnoteはProgate・ドットインストール・Udemyなどの教材から学習した内容をまとめており、初心者から中級者になるレベルを目指しています。ご指摘点あればコメントにてお願いします。
+--------------------------------------------------------------------------+
しょうみゆ@WEBエンジニア
twitter@MykiiTech
インフラエンジニアとWEBマーケティングで仕事した人。日本×フィリピンのハーフ。ごはんと仕事とおしゃべりが大好き。ワンストップでサービス提供できるフルスタックエンジニアになるべく、まずはフロントエンドエンジニアから攻め中。HTML/CSSは得意。
+--------------------------------------------------------------------------+