はじめに
実装しているときに、頭の中では「こういう形で変数つくりたいな〜〜」というイメージができているのに実際にコーディングに落とし込めない時が多々あります。
（console.log()で変数確認したら、「違う、、、わたしが求めている変数の形じゃない、、、！
」）
その度に毎回毎回検索しているので、備忘録として記録します。
配列の色々
基本の配列
const fruitsArray: string[] = ['マンゴー', '桃', '梨', 'ぶどう']
const 変数名: 型名 = 初期値 なので、
上記はstring型の配列で変数を定義し、複数の文字列が入った配列で初期化。
もう少しだけ詳しく中身を見てみると、こんな感じ。
つまり、下記のような書き方をしたら配列の中身にアクセスできる。
console.log(`配列の中の要素数は${fruitsArray.length}個だよ！`)
console.log(`配列の3番目の果物は${fruitsArray[2]}だよ！`)
実行結果
※配列の1番目は0なのでfruitsArray[2]は配列の3番目になる。
配列の中身1個ずつconsole.logで出力したい、といった時は
for (let i = 0; i < fruitsArray.length; i++) {
console.log(fruitsArray[i])
}
もちろんstring型だけではなく、値の配列の場合はconst numArray: number[]（型をnumber)とすればOK
基本のまとめ
- 何も入っていない空っぽの配列
const array1: string[] = []
- 配列の要素数を指定し、中身は空っぽ
const array2: string[] = new Array(5)
メモ
array2[0]はundefinedとなる。
- 配列の要素数を指定し、中身は全て空文字
const array2: string[] = Array(5).fill('')
メモ
number型の配列をArray(5).fill(0)というように初期化できる。(0が5個入っている配列)
配列の中に配列
いわゆる多次元配列。
こんな感じで宣言したら、
const foodArray: stirng[][] = [
['りんご', 'オレンジ', 'ぶどう'],
['レタス', 'キャベツ'],
['フランスパン', 'クリームパン', ',カレーパン', '塩パン'],
]
こういう形ができます。
アクセス方法も基本の配列と同じ。
foodArrayという配列の0個目には['りんご', 'オレンジ', 'ぶどう']という配列が入っており、さらに['りんご', 'オレンジ', 'ぶどう']という配列の2番目にはぶどうが入っている。
なので、ぶどうを取り出したい時は、
foodArray[0][2]
オブジェクトの配列
const personInfo = [
{ name: 'かっきー', age: 28 },
{ name: 'ちゃんみお', age: 15 },
{ name: 'しまむー', age: 17 },
{ name: 'りんちゃん', age: 15 },
]
配列に入っているのはオブジェクトなので、1個前のfoodArray[0][2]のようにアクセスできません。
まず、オブジェクトに対してはどのようにアクセスできるか整理してみます。
オブジェクトの場合はこのように宣言できます。
const person = {
name: 'かっきー',
age: 28,
}
今までの配列と違うところは、0:、1:、2:といった何番目というインデックスがないところです。
変数名(上でいうperson).取り出したい情報名(上でいうageまたはname)のように、
.をつけることでアクセスできます。
console.log(`わたしの名前は${person.name}で、${person.age}歳です！`)
実行結果
ここで元の話に戻ります。
配列に入っているオブジェクトはどうやってアクセスするのか？です。
りんちゃんの情報を取り出してみます。
まずりんちゃんが入っているオブジェクトは配列の3番目。
const personInfo = [
{ name: 'かっきー', age: 28 },
{ name: 'ちゃんみお', age: 15 },
{ name: 'しまむー', age: 17 },
{ name: 'りんちゃん', age: 15 },
]
console.log(personInfo[3])
実行結果
りんちゃんの情報が取れました！
ここでさらに、nameとageだけ取り出してみます。
personInfo配列の3番目を指定したうえで、.をつけてアクセス、です。
console.log(`${personInfo[3].name}は${personInfo[3].age}歳！`)
実行結果
さいごに
実際に自分でコードを書いて動かしてconsole.log()で確認するともっと理解が深まると思います！
わたしも、(このへんは余裕でしょ！)と思いながらコーディングをしていたのですが、自信がない部分や、途中で調べた中でこういう宣言の仕方もあったなあと思い出すこともあったので、まとめてみてよかったなと思いました。
また、他にもオブジェクトの中にオブジェクトや、渡されたオブジェクトを配列に変換（逆も然り）などなどつまずく概念がありまして（なんならそれが苦手)、今度はオブジェクトにフォーカスした記事を上げていきます！！