🦴

JavaScript 配列の操作

2023/01/12に公開

配列とは

複数のデータの集合を扱えるもの
1つの変数に対して複数の値を格納できる

要素にインデックス(添字)でアクセスできる
配列に格納した1つ1つの値のことを「要素」
それぞれの要素の位置のことを「要素番号/インデックス」と呼ぶ

配列の使い方

例)変数colors

| [0]Red | [1]Green | [2]Blue | [3]Yellow | [4]Black |

注意:インデックスは左から順番に0からはじまる

カンマ区切りの値をブラケット([…])で囲った形式で表現する
[ ‘Red’ , ’Green’ , ‘Blue’ , ‘Yellow’ , ‘Black’ ]

配列の定義

const colors = [ ‘Red’ , ’Green’ , ‘Blue’ , ‘Yellow’ , ‘Black’ ];

個々の要素の取り出し
配列名[インデックス];

例)配列から、Blueの値を取り出して、コンソールに出力

console.log(colors[2]);

参考:2次元配列

例)変数scores

| [0][0]98 | [0][1]100 | [0][2]99 |
| [1][0]80 | [1][1]81 | [1][2]97 |
| [2][0]70 | [2][1]96 | [2][2]85 |

例)配列の作成(2次元配列)

Const scores = {
[98, 100, 99],
[80, 81, 97],
[70, 96, 85]
};

要素の取り出し

配列名[インデックス番号][インデックス番号]

例)1,1(81点のスコア)を取り出して、コンソールに出力

Console.log(scores[1][1]);

補足:多次元配列

3次元、4次元…と取り扱えるが、Webアプリケーション開発の実務上は、
1次元配列を取り扱うことが多く、使っても2次元配列までがほとんど!

例)3次元配列
配列名[インデックス番号][インデックス番号][インデックス番号]

例題①
配列colorsを用意
配列に格納するデータの初期値は、’Red’,’Green’,’Blue’
次に1個づつ取り出してコンソールに出力する

const colors = ['Red', 'Green', 'Blue'];
console.log(colors[0]);
console.log(colors[1]);
console.log(colors[2]);

例題②
例題①の続き
繰り返し処理forを使って、1個づつ各値を取り出してコンソールに出力する

const colors = ['Red', 'Green', 'Blue'];
for(let i = 0; i < colors.length; i++) {
    console.log(colors[i]);
}

配列の長さが変わってもプログラムを変更する必要がないため汎用的に使えるプログラム

連想配列を使おう

連想配列とは

各要素を文字列キーでアクセス可能な配列
Hash,Dictionary,Mapなどと呼ばれることもある

連想配列

例)変数user
| [name]山田花子| [gender]女性| [birth]1990/1/1 |

連想配列はKEYとVALUEを持っています

[birth] = key(キー)
1990/1/1 = value(値)

記法
{key: value, key: value,…}
例)const user = {name: ‘山田花子’ , gender: ‘女性’ , birth: ‘1990/1/1’ };

個々の要素の取り出し
オブジェクト名,プロパティ名 または オブジェクト名[ ‘プロパティ名’ ]
例)連想配列から、キー名がnameの値を取り出して、コンソール出力する場合
console.log(user.name);または、console.log(user[ ‘name’ ]);

例題

変数 userを用意
下記の値が初期値の連装配列を作成

name: ‘Olivia’
gender: ‘woman’
birth : 1990/1/1

それぞれの値について、キーを指定して取り出して、コンソールに出力する

const user = {name: 'Olivia', gender: 'woman', birth: '1990/1/1'};
console.log(user.name);
console.log(user.gender);
console.log(user.birth);

コロナからの年末年始で慌ただしすぎて
気づいたら1ヶ月近く更新できてなかった、、!

やっぱり自分がやらなきゃいけないことをできてない毎日は気持ちが悪い!
コロナなってからジムもずっと行けてなくて泣きたい

でも後遺症も完璧に治ってきたし、
言い訳ばかりしてないで毎日どうにか時間作ってやり切るぞ!
パワーーーー

Discussion