Udacity: ES6 JavaScript Improved メモ③-2

UdacityのES6 - JavaScript Improvedコースを、受講しながらメモしていきます。
Lesson3 Built-ins

長くなったので分割しました。

Map

Mapはキーと値のペアで構成される点で、オブジェクトに似ている。
（Setはどちらかというと配列に似ている。）
set()メソッドを使用して、キーと値のペアを格納できる。

example.js

const employees = new Map();

employees.set('[e-mail]', { 
    firstName: 'James',
    lastName: 'Parkes',
    role: 'Content Developer' 
});

1つ目の引数にキーを、2つ目の引数に値を渡す。
変数employeesには、[e-mail]というキーで、オブジェクトを格納している。
またSetと同じく、delete()メソッドやclear()メソッドを備えている。

値の取得にはget()メソッドを使用する。引数にはキーを渡す。

ループにはSetで使える方法に加えてforEach()メソッドが使える。

Promises

非同期処理を操作できる。
new Promise()とすることで書き始められる。
引数には非同期で行いたいfunctionを渡す。
このfunctionはexecutorと呼ばれ、引数にresolve関数とreject関数を受け取る。
executor関数はresolveとrejectを受け取り、Promiseが実装されるとすぐに実行される。

example.js

new Promise(/* executor */function (resolve, reject) {
    window.setTimeout(function createSundae(flavor = 'chocolate') {
        const sundae = {};
        // request ice cream
        // get cone
        // warm up ice cream scoop
        // scoop generous portion into cone!
        resolve(sundae);
    }, Math.random() * 2000);
});

executor は非同期の作業を開始して、完了した際にresolveもしくはrejectのいずれか一方を呼び出す。
resolveは、成功した場合。
rejectは失敗した場合。

詳しくはJavaScript Promisesコースで。非同期通信を使ったアプリを作れるらしい。

Generators

通常、functionは一度呼ばれると、処理が終了するまで止めることはできない。
これを可能にする新しいfunctionがgenerator functionsである。

example.js

function* getEmployee() { //functionの後ろに * をつける
    console.log('the function has started');

    const names = ['Amanda', 'Diego', 'Farrin', 'James', 'Kagure', 'Kavita', 'Orit', 'Richard'];

    for (const name of names) {
        console.log( name );
    }

    console.log('the function has ended');
}

ジェネレータ関数が呼ばれると、処理は実行されずに、iteratorを返す。
getEmployee関数で見ると…

example.js

const generatorIterator = getEmployee(); // 処理は実行されずにiteratorを変数に格納している
generatorIterator.next(); // 処理を実行

.next()メソッドを使うことで関数の処理を実行できる。
next()で実行されているジェネレータ関数の中で処理を一時停止させるには、yieldキーワードを使う。

example.js

function* getEmployee() {
    console.log('the function has started');

    const names = ['Amanda', 'Diego', 'Farrin', 'James', 'Kagure', 'Kavita', 'Orit', 'Richard'];

    for (const name of names) {
        console.log(name);
        yield; // yieldを追加
    }

    console.log('the function has ended');
}

getEmployee関数を実行すると（generatorIterator.next()）、Amandaが表示されて処理が一度終了する。
再度実行すると、今度はDiegoが表示されて処理が一度終了する。
このようにジェネレータ関数は、前回停止した箇所を覚えておける。

next()に引数を渡すと、ジェネレータ関数内のyieldにセットされる。

yieldキーワードは関数の一時停止と、ジェネレータ関数へデータを渡す２つの役割を持つ。