転職サイト口コミ

Javascript 配列

配列とは

第2章で学習した変数では1つの値しか、代入することができませんでした。配列を使うことで、複数の値を格納することができます。配列とは、同じデータ型の複数の値を1つの変数にまとめて使用するためのものです。

配列の作り方

配列は「 [] 」を使用して値を記述していきます。下記のコードでは、arrayという配列に太郎、次郎、三郎、四郎、五郎という値が代入されています。

配列の番号

配列要素は0から始まる番号が付けられます。
1番最初の要素が「0」、2番目の要素が「1」となります。
配列名[番号]とすることで個別の値にアクセスできます。

const array = ["太郎", "次郎", "三郎", "四郎", "五郎"];

console.log(array);

console.log(array[0]);

console.log(array[1]);

console.log(array[2]);

console.log(array[3]);

console.log(array[4]);

要素の置き換え

要素の置き換えも可能です。

const array = ["太郎", "次郎", "三郎", "四郎", "五郎"];

array[1] = "二郎";

console.log(array);

要素の総数

配列内の要素の総数は、lengthで取得できます。

const array = ["太郎", "次郎", "三郎", "四郎", "五郎"];

console.log(array.length);

要素の追加/削除

以下の操作で配列の要素の追加や削除を行うことができます。

  1. push:要素を配列の末尾に追加
  2. unshift:要素を配列の先頭に追加
  3. pop:配列の末尾の要素を削除
  4. shift:配列の先頭の要素を削除
  5. splice:指定の場所の要素を削除

const array = ["太郎", "次郎", "三郎", "四郎", "五郎"];

array.push("六郎"); //末尾に追加

array.unshift("一郎"); //先頭に追加

console.log(array);

array.pop(); //末尾を削除

array.shift(); //先頭を削除

console.log(array);

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

console.log(array);

配列同士の結合

concatを使うことで配列と配列を結合した新しい配列を作成できます。

const array = ["a", "b", "c"];

const newArray = array.concat(["d", "e"]);

console.log(newArray);

...(スプレッド構文)を使うことで、配列中に既存の配列を展開できます。
次のコードでは、配列リテラルの末尾に配列を展開しています。
これは、concatで配列同士を結合するのと同じ結果になります。

const array = ["a", "b", "c"];

// スプレッド構文を使った場合

const newArray = ["x", "y", "z", ...array];

console.log(newArray);

// concatの場合

const newArrayConcat = ["x", "y", "z"].concat(array);

console.log(newArrayConcat);

Spread構文は、concatとは異なり、配列中の任意の位置に配列を展開できます。
そのため、次のように要素の途中に配列を展開できます。

const array = ["a", "b", "c"];

const newArray = ["x", ...array, "z"];

console.log(newArray);

配列から要素の検索

配列から指定した要素を検索する目的には、 主に次の3つがあります。

  • その要素のインデックスを知りたい場合
  • その要素自体が欲しい場合
  • その要素が含まれているかを知りたい場合

配列にはそれぞれに対応したメソッドが用意されているため、目的別に見ていきます。

要素のインデックスの取得

指定した要素が配列のどの位置にあるかを知りたい場合、indexOfを利用します。
要素の位置のことをインデックスと呼ぶため、メソッド名にもindexという名前が入っています。
indexOfは引数と一致する要素がある場合、その要素の最初のインデックスを返し、該当する要素がない場合は-1を返します。 

const array = ["HTML", "CSS", "JavaScript", "PHP"];

const indexOfJS = array.indexOf("JavaScript");

console.log(indexOfJS);

console.log(array[indexOfJS]);

// Ruby という要素はないため -1 が返される

console.log(array.indexOf("Ruby"));

要素の取得

配列から要素を取得する方法としてインデックスを使うこともできます。
先ほどのようにインデックスを取得し、そのインデックスで配列へアクセスすればよいだけです。
しかし、より明確に要素自体が欲しいということを表現するには、findが使えます。 
findは、関数を満たす配列内の最初の要素の値を返します。

const array = [10, 30, 5, 40];

const found = array.find(function (element) {

  return element > 20

});

console.log(found);

配列から指定範囲の要素を取り出す方法としてsliceが利用できます。 
sliceは第一引数に開始位置、第二引数に終了位置を指定することで、その範囲を取り出した新しい配列を返します。
第二引数は省略でき、省略した場合は配列の末尾が終了位置となります。

const array = ["a", "b", "c", "d", "e"];

// インデックス2から4の範囲を取り出す

console.log(array.slice(2, 4));

// 第二引数を省略した場合は、第一引数から末尾の要素までを取り出す

console.log(array.slice(1));

要素が含まれているかの取得

最後に、指定した要素が配列に含まれているかを知る方法について説明します。
インデックスや要素を取得すると、指定した要素が配列に含まれていることはわかります。
しかし、指定した要素が含まれているかだけを知りたい場合に、findを使用することは機能的に過剰です。
そのコードを読んだ人には、取得したインデックスや要素を何に使うのかが明確ではないからです。
次のコードは、indexOfを利用し、該当する要素が含まれているかを判定しています。

const array = ["HTML", "CSS", "JavaScript", "PHP"];

const indexOfJS = array.indexOf("JavaScript");

if (indexOfJS !== -1) {

  console.log("配列にJavaScriptが含まれています");

}

indexOfよりシンプルに記述するためにincludesを使用する方法もあります。 
includesは配列に指定要素が含まれているかを判定しboolean型を返します。 

const array = ["HTML", "CSS", "JavaScript", "PHP"];

// includesは含まれているならtrueを返す

if (array.includes("JavaScript")) {

  console.log("配列にJavaScriptが含まれています");

}

配列を反復処理する関数

配列を扱うためのメソッドには関数を利用するものもあります。その中でも特に多く利用するforEachとmapを紹介します。

forEach

forEachは配列の全要素に対して関数を実行することができます。第一引数には要素が自動で入り、第二引数にはその要素の番号が自動で入ります。functionは6章で記載される処理をまとめている関数といわれるものになります。

const array = ["太郎", "次郎", "三郎", "四郎", "五郎"];

array.forEach(function (item, index) {

  if (item == "三郎") {

    console.log(`${item}は${index}番目の要素です`);

  }

});

map

mapは配列の全要素に対して関数を実行し、処理結果を配列に格納し新しい配列を作ることができます。
第一引数には要素が自動で入り、第二引数にはその要素の番号が自動で入ります。

const array = [8, 10, 5, 3, 2];

const result = array.map(function (item) {

  return item * 2;

});

console.log(result);

問題 以下の問題に答えて下さい。

1~10の数が入っているnumbersという配列を用意して、mapを利用して、偶数の時だけ2倍になる処理を実行し、配列を再び出力して下さい。

-転職サイト口コミ