TypeScriptに入門したいのでJavaScriptに入門してみる(文と式)

続: JavaScript入門

教材は

https://jsprimer.net/

文と式

JavaScriptは文と式で成り立つ。

式は評価すると値を得ることができ、この値のことを評価値と呼ぶ。

文は処理の一部として式を含むことがある。

式文

式は文になることができる。文となった式のことを式文と呼ぶ。

条件分岐

if, else if, else

省略

switch文

switch は言語によって結構差がある部分なので一応メモする。

switch (式) {
    case ラベル1:
        // something to do
        break;

    case ラベル2:
        // something to do
        break;
    default:
        // something to do
        break;
}

C言語などと同じですね。breakを忘れるとその下のcaseの内容も実行される。

ループと反復処理

while, do-while, for

C言語と同じ。省略。

配列の forEach メソッド

他の言語と似てるが、メソッド名が forEach (Eが大文字) ですね。

// forEachにはコールバック関数を渡す
const array = [1,2,3];
array.forEach( currentValue => {
    // 配列の要素ごとに呼び出される処理
});

実例

function sum(numbers) {
    let total = 0;
    numbers.forEach(num => {
        total += num;
    });
    return total;
}

sum([1, 2, 3, 4, 5]); // -> 15

break

省略

配列の some メソッド

some メソッドは配列の各要素に対して何か処理をしたい場合に使えるメソッドで、処理内容をコールバック関数で渡すことができる。

以下は配列に偶数が含まれているか判定をする例。

function isEven(num) {
    return num % 2 === 0;
}
const numbers = [1, 5, 10, 15, 20];
console.log(numbers.some(isEven)); // -> true

continue

省略

配列の filter メソッド

配列から特定の値だけを集めた新しい配列を作るには filter メソッドを利用できる。

function isEven(num) {
    return num % 2 === 0;
}

const array = [1,2,3,4,5];

const filteredArray = array.filter((currentValue, index, array) => {
});

fA = array.filter(isEven);
console.log(fA); // -> [2,4]

for…in文（基本的に使わない方がよい）

for…in文はオブジェクトのプロパティに対して 順不同で 反復処理を行います。

for(プロパティ in オブジェクト) {
    // something to do...
}

for…in 文の問題

JavaScriptのオブジェクトは何らかのオブジェクトを継承している。 対象となるオブジェクトのプロパティを列挙する場合、親オブジェクトまで列挙可能なものがあるかを探索して列挙する。そのため、オブジェクト自身が持っていないプロパティも列挙されてしまい、意図しない結果になる場合がある。 安全にオブジェクトのプロパティを列挙するには Object.keys メソッド、 Object.values メソッド、 Object.entries メソッドがなどが利用できる。

for…in 文は配列に対しても利用できるが、こちらにも問題がある。

const numbers = [5, 10];
let total = 0;
for (const num in numbers) {
    // 0+"0"+"1" という文字列結合が行われる
    total += num;
}
console.log(total); // -> "001"

このように、配列の要素がnumに代入されるのではなく、配列のプロパティ名（ここでは要素のインデックス"0"や"1"）がnumに代入されてしまう。

配列の要素に対して何かしらの処理を行う場合、 for文または forEachメソッド、もしくは後述の for…of 文を使うべき。

[ES2015] for…of 文

JavaScriptでは Symbol.iterator という特別な名前のメソッドを実装したオブジェクトを iterable と呼び、iterableオブジェクトは for…of 文で反復処理できる。 iterableオブジェクトは反復処理時に次に返す値を定義する。それに対してfor…of文では iterable から値を1つ取り出し、variable に大入試反復処理を行う。

for(variable of iterable) {
    // something to do
}

Arrayもiterableオブジェクトなので、以下のように配列の要素を取り出すことができる。

const array = [1,2,3];
for (const value of array) {
    console.log(value);
}

Stringオブジェクトもiterableなので、文字を1つずつ取り出すことができる。他にも TypedArray, Map, Setなど Symbol.iterator が実装されているオブジェクトは多数あるので、for…of文はそれらの iteratable オブジェクトを扱うことができる。

reduce メソッド

function sum(numbers) {
    return numbers.reduce((total, num) => {
        return total + num; // 今回の合計が 次のループの totalに代入される。numは次の値が入る。
    }, 0); // 初期値が0
}

sum([1,2,3,4,5]); // -> 15

reduceメソッドを使った例では、そもそも変数宣言をする必要がない。