100日後にエンジニアになるキミ - 21日目 - Javascript - JavaScriptの基礎4

今日もJavaScriptの続きをやっていきましょう。

前回はこちら

100日後にエンジニアになるキミ - 20日目 - Javascript - JavaScriptの基礎3

Array型(配列)

Array型はデータ型の一種で
複数の値を管理するためのデータ構造を持っています。

Array型の書き方

[要素,要素,・・・・]
new Array(要素,要素,・・・・)

[ ] (四角カッコ) か new 演算子 と Array関数を用いる。

Array型を定義して値を代入する

var array1 = [1,2,3,4,5];
let array2 = new Array(1,2,3);

空のarray

var array3 = [];
let array4 = new Array();

※new Array(数値) とすると数値のサイズで空の値の配列となるので注意
array5 = new Array(5);

データへのアクセス方法

Array変数[インデックス値]
データへのアクセスはインデックスを用いて行う。
インデックスは0から始まる順番を表した数値を指定する。

let array6 = [1, 2, 3];
console.log(array6[0]);
console.log(array6[3]);

1
undefined

インデックス０は最初のデータ
インデックス1は２番目のデータ
インデックスの値がArray型のデータの個数よりも大きい時は
参照できずに「undefined」となる。

データの型

typeof Array変数
typeof の結果は object になる。

var array7 = [1,2,3,4,5];
console.log(typeof array7);

object

格納可能な値

Array型には数値 , 文字列 , object などなんでも入る , 混在も可能

var array8 = [1,2,[4,5],{'x':3}];
console.log(array8);
console.log(array8[2]);
console.log(array8[3]['x']);

[1, 2, Array(2), {…}]
[4, 5]
3

スプレッド演算子(...)で参照

...Array変数
スプレッド演算子（ … ）を使用して,配列の値を展開することが可能

let array9 = [1, 2, 3];
let array10 = [4, ...array9];
let max_num = Math.max(...array10);
console.log(array10);
console.log(max_num);

[4 , 1 , 2 , 3]
4

要素の検索

Array変数.indexOf(要素)
有ればそのインデックス値 , 無ければ -1 が返る

var array11 = [1,2,3,4,5];
console.log(array11.indexOf(2));
console.log(array11.indexOf(6));

1
-1

要素の変更

Array変数[インデックス] = 値

インデックス値を用いて場所を指定し、値を代入する

var array12 = [1,2,3,4,5];
array12[0]=6;
console.log(array12);

[6, 2, 3, 4, 5]

Arrayの要素の追加

Array変数.unshift(値) : 先頭に要素が追加される
Array変数.push(値) : 末尾に要素が追加される

var array13 = [1,2,3,4,5];
array13.unshift(13);
array13.push(6);
console.log(array13);

[13, 1, 2, 3, 4, 5, 6]

Arrayの要素の個数

Array変数.length

Array.length
var array14 = [1,2,3,4,5];
console.log(array14.length);

5

Arrayの要素の削除

Array変数.shift() : 先頭の要素を削除
Array変数.pop() : 末尾の要素を削除
Array変数.splice(開始位置 , 要素数) : 複数の要素を削除(要素の更新もできる)
delete Array変数[インデックス] : インデックス番号の要素を空にする
※各メソッドは削除結果を戻り値にできる(全削除する場合は変数に空を代入)

var array15 = [1,2,3,4,5,6,7,8];
console.log(array15.shift());
console.log(array15.pop());
console.log(array15.splice(2,3));
console.log(delete array15 [1]);
console.log(array15 );

1
8
[4,5,6]
true
[2,empty,7]

Arrayの結合

Array変数.concat(Array変数) : 両方の配列を結合する

var array_c1 = [1,2,3,4];
var array_c2 = [5,6,7,8];
var array_c0 = array_c1.concat(array_c2);
console.log(array_c0);

[1,2,3,4,5,6,7,8]

連想配列(辞書型)

連想配列(辞書型)はキーと値でデータを複数格納するデータ型で
要素がキーと値で1セットになります。

連想配列の書き方

{キー : 値 ,キー : 値 , ...}

{ } (波カッコ)を用いて {キー : 値 ,キー : 値 , ...} とする
キーの文字は ' などを付けなくても良い

var dict1 = {apple:1 , orange:2};
console.log(dict1);

{apple: 1, orange: 2}

{ }
空の連想配列

var dict2 = {};
console.log(dict2);

{}

連想配列へのアクセス

連想配列変数[キー名] : 値が取得できる(無い場合はundefined)

var dict3 = {apple:1 , orange:2};
console.log(dict3['apple']);

1

連想配列の要素の追加 , 変更

連想配列[キー名] = 値
キーが無ければ追加 , ある場合は値の変更となる

var dict5 = {apple:5 , orange:6};
dict5['apple'] = 4;
dict5['grape'] = 9;
console.log(dict5);

{apple: 4, orange: 6, grape: 9}

連想配列のキーを全て取得する

Object.keys(連想配列)
連想配列のキーのArray(配列)を取得できる

var dict6 = {apple:5 , orange:6};
var keys = Object.keys(dict6);
console.log(keys);

["apple", "orange"]

連想配列の値を全て取得する

Object.values(連想配列)
連想配列の値のArray(配列)を取得できる

var dict7 = {apple:5 , orange:6};
var values = Object.values(dict7);
console.log(values);

[5,6]

連想配列の要素の削除

delete 連想配列[キー名]
(全削除する場合は変数に空を代入する)

var dict8 = {apple:5 , orange:6};
delete dict8['apple'];
console.log(dict8);

{orange: 6}

連想配列のキーの存在チェック

キー名 in 連想配列
キーが存在すればtrue , なければfalseが返る

var dict9 = {apple:5 , orange:6};
console.log('apple' in dict9);
console.log('grape' in dict9);

true
false

連想配列の要素の個数

Object.keys(連想配列).length
キー配列の個数が返る

var dict10 = {apple:5 , orange:6};
console.log(Object.keys(dict10).length);

2

制御文

制御文はプログラムを制御するための構文で
プログラミングでは必ず用いられる文法です。

様々な言語に備わっていますが
言語により、使える制御文は異なっています。

JavaScriptでは以下のような制御文を用いることができます。

IF文

IF文は条件によってプログラムの処理を分岐させる構文です。

IF文の条件はBoolean型になるような条件式を書いて
条件分岐を行います。

IF文の書き方

if (条件式1) {
    条件式1の時の処理;
}

if (条件式1) 処理;

if (条件式1) {
    条件式1の時の処理;
} else{
    条件式1以外の処理;
}

if (条件式1) {
    条件式1の時の処理;
} else if (条件式2){
    条件式2の時の処理;
} else{
    条件式1,2以外の処理;
}

条件式は()でくくり、if文の処理は{}でくくります。
(if条件のみ書いた場合は無くても良い)

条件式は真偽値(true,false)になるような条件式を用いるため
どう書いたらBoolean型になるのかを押さえておきましょう。

if (1==1) {
    console.log(1);
}else{
}

1

if (2==1) {
    console.log(1);
}else{
    console.log(2);
}

2

IF文の中では「ブロック」という概念があり
ブロック中では「インデント」(字下げ)をしておくと
どこがIF文の中の処理なのかが分かりやすくなります。

インデントは必ず必要なものではないですが
可読性を上げるのには役立ちますので覚えておきましょう。

SWITCH文

switch文も条件によってプログラムの処理を分岐させる構文です。

switch文の書き方

switch(変数){
    case 値:
        処理;
        break;
    case 値:

        ....

    default:
        処理;
        break;
}

caseには変数に合う値を書き,条件に合う場合はそのcaseの処理がなされ
その直下のbreakまでの処理が行われます。

defaultはそれ以外の条件の際に実行されます。

let n=1;
switch(n){
    case 1:
        console.log(1);
        break;
    case 2:
        console.log(2);
        break;
    default:
        console.log('other');
        break;
}

2

条件が多くなってくるとSwitch文を用いた方が見やすい時もあります。

FOR文

for文は処理の繰り返しを行う構文です。

for文の書き方

for ( 初期値; 条件式; 増減値 ) {
    繰り返し処理
}

初期値：繰り返す変数の初期値
条件式：繰り返しを終了する条件
増減値：変数を増減する式

式全体は()でくくり , for文の処理は{}でくくる
条件式は繰り返しを終了させる条件を書く必要があります。

for ( var i=0; i<5; i++ ) {
    console.log(i);
}

0
1
2
3
4

この場合、「初期値」0から始まり変数iに格納されます。
for文の中ではこの変数を使いまわすことができ一回繰り返されると
「増減値」の文だけ変数が加算されます。

「条件式」でi<5を指定しているので
この条件が満たされている間は繰り返し処理が続きます。

iが5になった時点で条件を満たさなくなるので
そこで繰り返し処理は終了します。

この書き方では「初期値」「条件式」をうまく用いて
繰り返し回数を指定することができます。

for-in文

for-in文も繰り返し処理を行いますがオブジェクトの要素の個数の分だけ
繰り返し処理を行います。

for-in文の書き方

for ( 変数 in オブジェクト) {
    繰り返し処理
}

指定したオブジェクトの全要素を用いて繰り返し処理が行えます。

let arr1 = {1:2 , 3:4 , 9:8};
for (ar in arr1 ) {
    console.log(ar);
}

1
3
9

この場合は連想配列のキーが変数に格納されます。
値の方を取りたければ連想配列とキーを用いて取り出します。

let arr1 = {1:2 , 3:4 , 9:8};
for (ar in arr1 ) {
    console.log(arr1[ar]);
}

for-of文

for-of文もfor-in文と同様でオブジェクトの要素の個数の分だけ
繰り返し処理を行います。

for-of文の書き方

for ( 変数 of 配列など) {
    繰り返し処理
}

let arr3 = [1,3,9];
for (ar3 of arr3 ) {
    console.log(ar3);
}

1
3
9

let arr4 = {1:1 , 3:3 , 9:9};
for (ar4 of Object.keys(arr4 )) {
    console.log(ar4);
}

1
3
9

breakとcontinue

breakは制御文の中で
処理を途中で抜けたりする際に使用します。

for ( 変数 of オブジェクト) {
    繰り返し処理
    break;
}

for ( var i=0; i<5; i++ ) {
    console.log(i);
    break;
}

0

繰り返しを指定して須賀、breakがあるところでforの処理は終了します。

continueはcontinue以降の処理を飛ばして
繰り返しの続きに戻ります。

for ( 変数 of オブジェクト) {
    繰り返し処理
    continue;
    処理
}

for ( var i=0; i<5; i++ ) {
    if(i%2==0) continue;
    console.log(i);
}

1
3

i%2==0の所でif文の条件に合致しcontinueで
一回それ以降の処理が飛ばされます。

continueやbreakはif文と合わせて条件に合致した時に
処理を抜けるたい場合に用いられます。

label

labelは、処理をcontiuneやbreakで抜けた後に参照する位置を指定できます。

label名:
for ( 変数 of オブジェクト) {
    繰り返し処理
    break or continue;
}

abc:
for (i = 0; i < 10; i++) {
    for (j = 0; j < 10; j++) {
        xx = i * 10 + j;
        console.log(xx);
        if (j == 2) {
            continue abc;
        }
    }
}

0
1
2
10
11
12
20 ・・・・

上記例では
ラベルで指定したループの次のループを実行する

forEach文

forEach文の書き方

array.forEach( function( value, index, array ) {
    繰り返し処理;
});

value：配列データの値
index：配列のインデックス番号
array：現在処理している配列

var fer1 = [ 10, 20, 30, 40, 50, 60, 70, 80 ];
fer1.forEach( function( value, index ) {
    if( index % 2 == 0 ){
        console.log( value );
    }
});

10
30
50
70

fer1.forEach( function( value, index ,array ) {
    array[ index ] = value * 2;
});
console.log(fer1);

[20, 40, 60, 80, 100, 120, 140, 160]

forEach文ではcontinueやbreakを用いることが出来ない

while文

while文は条件式が成り立つ間、ずっと繰り返しを行う構文です。

while文の書き方

while ( 条件式 ) {
    繰り返し処理
}

let aaa =1;
while(aaa<5){
    console.log(aaa);
    aaa++;
}

1
2
3
4

条件式の結果がfalseになり、繰り返しを終了させる条件式を書きます。
上記例では変数aaaをインクリメントして、条件式を抜けるようにしています。

もしfalseにならないと、ずっと繰り返しが行われ処理が終了しないので注意しましょう。
条件式で制御するか、if-breakで抜けられるようにしておきましょう。

do-whileという構文も有る

do{
    処理;
}while(条件式);

条件式が偽の値であっても一度は実行される構文です。

まとめ

制御文はプログラミングでは必須の知識になるので
共に使われるデータ型や、条件式の書き方も
押さえておこう

君がエンジニアになるまであと79日

作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython