yield演算子とは、ジェネレータ関数を定義する演算子。
関数内でyield演算子を使うと、その関数はジェネレータ関数となる。
ジェネレータ関数とは、yield文が現れると、その後の処理を一時停止する関数のこと。
構文
yield;
yield 式;
関数内に上記構文のようなyield文を書くと、その関数はジェネレータ関数となる。
ジェネレータ関数
function ジェネレータ関数名(){
処理文１
yield;
処理文２
yield 式２;
処理文３
yield;
}
処理文１
yield;
処理文２
yield 式２;
処理文３
yield;
}
一度目の呼び出しで、処理文１を実行する。
二度目の呼び出しで、処理文２と式２を実行する。
三度目の呼び出しで、処理文３を実行する。
ジェネレータ関数の呼び出し方法
ジェネレータ関数は、通常の関数のように呼び出しても実行せず、イテレータを返す。イテレータには、next()というメソッドがある。next()メソッドを呼び出すと、yield文が現れるところまで、処理を実行する。再度、next()メソッドを呼び出すと、続きの処理の実行を開始し、yield文が現れると、また一時停止する。
var 変数名 = ジェネレータ関数名();
変数名 . next(); // 一度目の呼び出し
変数名 . next(); // 二度目の呼び出し
変数名 . next(); // 三度目の呼び出し
変数名 . next(); // 一度目の呼び出し
変数名 . next(); // 二度目の呼び出し
変数名 . next(); // 三度目の呼び出し
サンプル１
<script type="text/javascript; version=1.7">
function sampleGenA(){
for( let num = 1; num <= 3; num++ ){
yield num;
}
}
var generatorA = sampleGenA();
document . write( generatorA . next() );
document . write( generatorA . next() );
document . write( generatorA . next() );
</script>
function sampleGenA(){
for( let num = 1; num <= 3; num++ ){
yield num;
}
}
var generatorA = sampleGenA();
document . write( generatorA . next() );
document . write( generatorA . next() );
document . write( generatorA . next() );
</script>
↓↓↓出力結果↓↓↓
サンプル２
ジェネレータに引数を渡す例。
<script type="text/javascript; version=1.7">
function sampleGenB( varA, varB ) {
yield varA + varB + "<br />";
yield varA - varB + "<br />";
yield varA * varB + "<br />";
yield varA / varB + "<br />";
yield varA % varB + "<br />";
}
var generatorB = sampleGenB( 5, 2 );
document . write( "5+2=" );
document . write( generatorB . next() );
document . write( "5-2=" );
document . write( generatorB . next() );
document . write( "5*2=" );
document . write( generatorB . next() );
document . write( "5/2=" );
document . write( generatorB . next() );
document . write( "5%2=" );
document . write( generatorB . next() );
</script>
function sampleGenB( varA, varB ) {
yield varA + varB + "<br />";
yield varA - varB + "<br />";
yield varA * varB + "<br />";
yield varA / varB + "<br />";
yield varA % varB + "<br />";
}
var generatorB = sampleGenB( 5, 2 );
document . write( "5+2=" );
document . write( generatorB . next() );
document . write( "5-2=" );
document . write( generatorB . next() );
document . write( "5*2=" );
document . write( generatorB . next() );
document . write( "5/2=" );
document . write( generatorB . next() );
document . write( "5%2=" );
document . write( generatorB . next() );
</script>
↓↓↓出力結果↓↓↓
サンプル３
複数のイテレータを使用する例。
<script type="text/javascript; version=1.7">
function sampleGenC( varA, varB ) {
yield varA + varB + "<br />";
yield varA - varB + "<br />";
yield varA * varB + "<br />";
yield varA / varB + "<br />";
yield varA % varB + "<br />";
}
var generatorC1 = sampleGenC( 5, 2 );
var generatorC2 = sampleGenC( 50, 20 );
document . write( "5+2=" );
document . write( generatorC1 . next() );
document . write( "50+20=" );
document . write( generatorC2 . next() );
document . write( "5-2=" );
document . write( generatorC1 . next() );
document . write( "50-20=" );
document . write( generatorC2 . next() );
document . write( "5*2=" );
document . write( generatorC1 . next() );
document . write( "50*20=" );
document . write( generatorC2 . next() );
document . write( "5/2=" );
document . write( generatorC1 . next() );
document . write( "50/20=" );
document . write( generatorC2 . next() );
document . write( "5%2=" );
document . write( generatorC1 . next() );
document . write( "50%20=" );
document . write( generatorC2 . next() );
</script>
function sampleGenC( varA, varB ) {
yield varA + varB + "<br />";
yield varA - varB + "<br />";
yield varA * varB + "<br />";
yield varA / varB + "<br />";
yield varA % varB + "<br />";
}
var generatorC1 = sampleGenC( 5, 2 );
var generatorC2 = sampleGenC( 50, 20 );
document . write( "5+2=" );
document . write( generatorC1 . next() );
document . write( "50+20=" );
document . write( generatorC2 . next() );
document . write( "5-2=" );
document . write( generatorC1 . next() );
document . write( "50-20=" );
document . write( generatorC2 . next() );
document . write( "5*2=" );
document . write( generatorC1 . next() );
document . write( "50*20=" );
document . write( generatorC2 . next() );
document . write( "5/2=" );
document . write( generatorC1 . next() );
document . write( "50/20=" );
document . write( generatorC2 . next() );
document . write( "5%2=" );
document . write( generatorC1 . next() );
document . write( "50%20=" );
document . write( generatorC2 . next() );
</script>
↓↓↓出力結果↓↓↓
サンプル４
カウント： 0
サンプル４の動作について
「サンプルボタン」をクリックする度に、「カウント： 」の右横の数字「0」が、「1」「2」「3」と増えていく。６回目のクリック時には、数字が「終わり」の文字列に変わり、それ以降は変化しない。
ソースコード
JavaScript
<script type="text/javascript; version=1.7">
function sampleGenD(){
for( let num = 1; num <= 6; num++ ){
document . getElementById( "sampleGenResult" ) . innerHTML = num;
if( num == 6 ){
document . getElementById( "sampleGenResult" ) . innerHTML = "終わり";
}
yield;
}
}
var generatorD = sampleGenD();
</script>
function sampleGenD(){
for( let num = 1; num <= 6; num++ ){
document . getElementById( "sampleGenResult" ) . innerHTML = num;
if( num == 6 ){
document . getElementById( "sampleGenResult" ) . innerHTML = "終わり";
}
yield;
}
}
var generatorD = sampleGenD();
</script>
HTML
<button onclick="generatorD . next()">サンプルボタン</button>
<p>カウント： <span id="sampleGenResult">0</span></p>
<p>カウント： <span id="sampleGenResult">0</span></p>