JavaScript 配列

目次

-配列の作り方
-配列の要素にアクセスする
-配列の要素を変更する
-配列の全ての要素に対して何らかの処理を行う
-配列に処理を行ったあとで結果を別の配列として取得する
-配列の要素のうち条件に合うものだけを抽出して別の配列として取得する

配列の作り方

　[] （大括弧）の中にそれぞれの値を , （カンマ）区切りで与えてあげる。
　たとえば、複数のスコアがあったとして、それをscores という定数名で全ての値を配列で管理したかった場合下記のようになる。

  // const score1 = 60;
  // const score2 = 80;
  // const score3 = 40;

const scores = [60, 80, 40];

配列の要素にアクセスする

配列ではインデックスは 1 番からではなくて 0 番から始まる。

const scores = [60, 80, 40];

上記の場合インデックス 0 番目が 60 、 1 番目が 80 、 2 番目が 40 となる。
2 番目のスコアだけを表示したかった場合

console.log(scores[1]);

とすると 80 が表示される。

3 つ目のスコア 40 点を 45 点に変更する場合

scores[2] = 45;

scores のインデックス 2 番目を修正したいので scores[2] に対して新しい値を代入してあげる。

scores は const で定義した定数だが、配列の要素への代入はできる。

配列の要素数を取得する方法

◯length を使う

console.log(scores.length);

とすると要素の数を表示できる。
今 scores に入っている要素の数は 3 つなので 3 が表示される。

配列の要素を変更する

下記の配列を使って説明していく。

const scores = [60, 80, 40];

配列の先頭に要素を追加

◯unshift()　を使う
※　() の中に追加したい要素を , 区切りでいくつでも書いていくことができる
例　30点と65点を追加したかった場合

const scores = [60, 80, 40];
scores.unshift(30, 65);
//30, 65, 60, 80, 40

配列の末尾に要素を追加

◯push()　を使う
※　() の中に追加したい要素を , 区切りでいくつでも書いていくことができる
例　30点と65点を追加したかった場合

const scores = [60, 80, 40];
scores.push(30, 65);
//60, 80, 40, 30, 65

配列の先頭から要素を削除

◯shift()　を使う
※1 つずつしか要素を削除できない

const scores = [60, 80, 40];
scores.shift();
//80, 40

配列の末尾から削除

◯pop()　を使う
※1 つずつしか要素を削除できない

const scores = [60, 80, 40];
scores.pop();
//60, 80

配列の途中の要素を操作

◯splice()　を使う
・　splice(変化が開始する位置、削除数)
・　splice(変化が開始する位置、削除数、追加する要素、... )

下記の場合　変化が開始する位置 0番目が60 , 1番目が80 , 2番目が40

例

const scores = [60, 80, 40];
scores.splice(1, 1);
//60, 40

const scores = [60, 80, 40];
scores.splice(1, 2);
//60

const scores = [60, 80, 40];
scores.splice(1, 0, 55, 65);
//60, 55, 65, 80, 40

const scores = [60, 80, 40];
scores.splice(1, 1, 55, 65);
//60, 55, 65, 40

配列の中に別の配列を展開

◯... スプレット構文を使う

const otherScores = [10, 20];
const scores = [60, 80, 40, ...otherScores];
//60, 80, 40, 10, 20

配列の値を別々の定数にしたい

◯分割代入を使う

  const scores = [60, 80, 40];
  const [a, b, c] = scores;
  console.log(a); // 60
  console.log(b); // 80
  console.log(c); // 40

配列の値を定数と配列に分ける

◯... スプレット構文を使う
◯分割代入を使う

例　配列の値で定数に入れたいのは最初の１つだけで、あとの2つは配列のままにする

const scores = [60, 80, 40];
const [a, ...others] = scores;
console.log(a); //60
console.log(others); //[80, 40]

値の交換

◯分割代入を使う
例　xの値と、yの値を入れ替える

  let x = 100;
  let y = 0;
  [x, y] = [y, x];
  console.log(x); // 0
  console.log(y); // 100

配列の全ての要素に対して何らかの処理を行う

◯for を使う
◯length　を使う

例　コンソールに全ての要素を表示する

const scores = [60, 80, 40];
for (let i = 0; i < scores.length; i++) {
  console.log(`${scores[i]}`);
}

配列の全ての要素に対して何らかの処理を行う

◯forEach()　を使う

例　コンソールに全ての要素を表示する

const scores = [60, 80, 40];
scores.forEach((score) => {
  console.log(`${score}`);
});

配列に処理を行ったあとで結果を別の配列として取得する

◯map()　を使う
例　それぞれを５点ずつ増やした結果を配列で取得する

const scores = [60, 80, 40];
const updateScores = scores.map(score => score + 5);
console.log(updateScores); // [65, 85, 45]

配列の要素のうち条件に合うものだけを抽出して別の配列として取得する

◯filter()　を使う
例　80点以上を抽出し、goodScoresという配列として取得する

const scores = [60, 80, 40, 90, 100];
const goodScores = scores.filter(score => score >= 80 );
console.log(goodScores); // [80, 90, 100]