ノンビン塾について
そもそもノンビン塾ってなに？
→過去の記事参照
今回の講義
【テーマ】
配列・オブジェクト（連想配列）を理解しよう！
※ノンビン塾で学んだ事 と 自分で自習した事 を纏めて記載する
【事前準備】
・Node.js(v16.14.2）
・VSCode
・適当なディレクトリでtest.jsを作成する
1）配列について
【複数のデータを順番に並べた構造の事】であると理解した。
1つの箱（変数）に同じデータ型の複数の値を入れる事ができる。
また、配列は、[ ] で囲まれている。
そして、目的のデータが「何番目にあるのか」を指定すると、
そのデータを取り出すことができる。
以下例
const list = ["1個目", "2個目", "3個目"];
console.log(list);
上記のようにlistを宣言し、console.logで確認してみる。
ターミナルで、node test.jsを実行すると、
以下のように確認することができた。
PS C:\*******> node test.js
[ '1個目', '2個目', '3個目' ]
また、listの中の"2個目”だけを取り出したい時は、
console.logには以下のように指定する必要がある。
const list = ["1個目", "2個目", "3個目"];
console.log(list[1]);
[1]を指定したのは、配列の中の左から1番目という意味ではない。
一番左の値は、0番目となる。
そのため、”2個目”は、左から1番目の値となる為、[1]を指定する必要がある。
2）オブジェクト（連想配列）について
オブジェクトは、
keyとvalueを持っているデータ群であり、
{ }で囲まれている。
注意点としては、
JavaScirptでは、「連想配列」の言葉は使わない。
他のプログラムでいう「連想配列」を、JavaScriptでは、「オブジェクト」という。
理由は、JavaScriptの場合は、値としてのデータだけでなく、関数も入れる事ができる為。
let obj = {
x: 5,
y: 20,
calc: function() {
return this.x * this.y;
}
}
console.log(obj.x)
console.log(obj.calc())
PS C:\*******> node test.js
5
100
また、気になる記事も見つけた。
これは読んでおきたい。
3）For文について
以下の例のようにたくさんデータが入っている場合どうやってデータを取得するか。
const list = ["1個目","2個目","3個目","4個目","5個目","6個目","7個目","8個目","9個目","10個目","11個目","12個目","13個目","14個目","15個目","16個目"]
今回はFor文を使ってconsole.logに出してみる。
for ([初期化式]; [条件式]; [加算式]){ }
このFor文を参考に、以下のように実装する。
const list = ["1個目","2個目","3個目","4個目","5個目","6個目","7個目","8個目","9個目","10個目","11個目","12個目","13個目","14個目","15個目","16個目"]
for (let i = 0; i < list.length; i++) {
console.log(list[i]);
}
【初期化式】
let i = 0で、iを0に初期化する（初期化が実行されるのは最初の一度だけ！）
【条件式】
i < list.lengthで、listに格納されているデータ数（length）だけ処理を順に実行
【加算式】
i++ 1ずつ加算して処理する。
という事かな。
node test.jsを実行してみる。
PS C:\*******> node test.js
1個目
2個目
3個目
4個目
5個目
6個目
7個目
8個目
9個目
10個目
11個目
12個目
13個目
14個目
15個目
16個目
すべてのデータを取得できた。
少し応用して、
条件式をi=i+3として、3つ飛ばしで処理する形で実行してみた。
const list = ["1個目","2個目","3個目","4個目","5個目","6個目","7個目","8個目","9個目","10個目","11個目","12個目","13個目","14個目","15個目","16個目"]
for (let i = 0; i < list.length; i=i+3) {
console.log(list[i]);
}
PS C:\*******> node test.js
1個目
4個目
7個目
10個目
13個目
16個目
想定通り3つ飛ばしで、データを取得できた！
よしよし。
なお、よりシンプルなコードで、1個目～16個目を取得する方法として、以下例がある。
const list = ["1個目","2個目","3個目","4個目","5個目","6個目","7個目","8個目","9個目","10個目","11個目","12個目","13個目","14個目","15個目","16個目"]
list.forEach(e => { // eはelementの略・・か？
console.log(e);
})
forEach() メソッドは、与えられた関数を、配列の各要素に対して一度ずつ実行するようで、
結果として1個目～16個目までをconsole.logで取得できた。
4）【応用編】配列を操作してみよう（複数ピックアップ）
①配列に追加
const list = ["1個目", "2個目", "3個目"];
list.push("4個目");
console.log(list);
push() メソッドは、配列の末尾に1つ以上の要素を追加する処理。
また戻り値として新しい配列の要素数を返す。とのこと。
PS C:\*******> node test.js
[ '1個目', '2個目', '3個目', '4個目' ]
②配列の指定するデータを修正
let list = ["1個目", "2個目", "3個目"];
list[2] = "空っぽ";
console.log(list);
listの2番目のデータ（この例でいう”3個目”）を”空っぽ”に修正する処理
PS C:\*******> node test.js
[ '1個目', '2個目', '空っぽ' ]
その他、配列を操作する方法は色々とあるが、
詳細はMDN Web Docsを参照。。
感想
このテーマについては、
去年独学でやった頃、「何となく理解」して、「何となく使用」していた。
その中途半端な理解を、今回の講義で腹落ちして理解する事ができた。
今後このあたりを十分に理解してないと、、実務でついていけなくなるので、
今回のアウトプット（復習）と同時に、色々と配列の操作も触れておこうと思う。