#はじめに
Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。
前回の記事
#目的
- 反復処理についての理解を深める
#本題
###1.ジェネレーター
ジェネレーターとはイテレーターを生成するための特殊な関数
→ より簡略化してイテレーターを作成することができる！！
####基本構文
#####イテレーター
// 基本のイテレーターの定義
function genIterator() {
return {
next function(){
return {
done: true / false,
value: 値
}
}
}
}
#####ジェネレーター
// ジェネレーターに書き換え
// functionの後ろに*をつけることでこの関数がジェネレーター関数であることを示している
function* gen(){
if(ループ継続){
// 下記のyieldでイテレーターの部分を表す
// ここでdoneがfalse, value(値)であることを指す
yield 値;
} else {
// ここのreturnでdoneがtrue, value値を表す → ループを抜け出す
return 値;
}
}
####例1
簡単なジェネレーターの例
function* gen(){
yield 1; //①
yield 2; //②
return 3; //③
}
// 変数にgen()を格納
// ジェネレーター関数を実行することでイテレーターが帰ってくる
const it = gen();
// イテレーターのnextメソッドを使用
console.log(it.next());
console.log(it.next());
console.log(it.next());
// {value: 2, done: false} → ①のyield
// {value: 2, done: false} → ②のyield
// {value: 3, done: true} → ③のyield
// 上記のように出力される
####例2
より実践的な例
前回の記事で作成したイテレーターをジェネレーターに書き換えていく
function genIterator(max = 10){
let i = 0;
return{
next: function(){
if(i >= max){
return{
done: true
}
} else {
return{
done: false,
value: i++
}
}
}
}
}
const it = genIterator();
console.log(it.next());
上記のイテレーターをジェネレーターに書き換えると以下の通りになる
function* genIterator(max = 10){
let i = 0;
// whileを使って条件分岐
while(i < max){
yield i++;
}
// returnは省略可能(i < maxになった時点でループ終了)
return ;
}
const it = genIterator(10);
let a = it.next();
while(!a.done){
// 0から9が出力される
console.log(a.value);
a = it.next();
}
####例3
Syｍbolを使って反復可能オブジェクトにする
function* genIterator(max = 10){
let i = 0;
while(i < max){
yield i++;
}
return ;
}
const obj = {
// SymbolのイテレーターにgenIteratorを追加
[Symbol.iterator]: genIterator
}
// for...ofを使用して出力しても同じ結果に
// ジェネレーターでは反復可能オブジェクトを作成せずにofの後ろに直接genIteratorを入れて実行しても使える
for(const i of obj){
console.log(i);
}
ジェネレーターを反復可能オブジェクトに入れることも可能
const obj = {
[Symbol.iterator]: function* genIterator(max = 10){
let i = 0;
while(i < max){
yield i++;
}
return ;
}
}
for(const i of obj){
console.log(i);
}
###2.反復可能オブジェクト（ジェネレーター）
####例1
下記の反復可能オブジェクトを使用したイテレーターをジェネレーターに書き換える
イテレーター
const items = {
prop1: 'value1',
prop2: 'value2',
prop3: 'value3'
}
Object.prototype[Symbol.iterator] = function(){
const keys = Object.keys(this);
let i = 0;
let _this = this;
return{
next(){
let key = keys[i++];
return{
done: i > keys.length,
value: [key, _this[key]]
}
}
}
}
````
ジェネレーター
````js
const items = {
prop1: 'value1',
prop2: 'value2',
prop3: 'value3'
}
// ジェネレーター関数なのでfunctionの後ろに*をつける
Object.prototype[Symbol.iterator] = function* (){
// for..inを使用
// thisはオブジェクトの参照を保持している
for(let key in this){
yield [key, this[key]];
}
}
// 以上で書き換え終了
for(let [k,v] of items){
//itemsのプロパティの値が出力される
console.log(k, v);
}
今日はここまで！
#参考にさせて頂いた記事