独習JavaScriptで反復処理を勉強しています。
イテレータ、ジェネレータを覚えて、何かに使えないかということで試してみました。
htmlファイルは同じものを使っております。（h1タグだけ異なりますが）
generatorを用いた記述のほうが簡潔で、１０行ほど短く済みました。
何かアドバイス等ございましたらお気軽にコメントください。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collatz</title>
</head>
<body>
<h1>Collatz Iterator</h1>
<input id="inputNum" type="number" placeholder="自然数を入力">
<button id="decide">決定</button>
<div id="outputNums"></div>
<script src="main.js"></script>
</body>
</html>
イテレータ
iterator.js
const decideBut = document.getElementById("decide");
const display = document.getElementById("outputNums");
decideBut.addEventListener('click', ()=>{
display.innerText = "";
const inputNum = document.getElementById("inputNum").value;
const collatz = (num) => {
return {
next() {
if(num===1){
return {
done: true
}
}else if(num%2===0){
return {
done: false,
value: num/=2
}
}else{
return {
done: false,
value: num=num*3+1
}
}
}
}
}
const runCollatz = collatz(inputNum);
while(1){
let {done, value} = runCollatz.next();
if(done){
break;
}else{
let p = document.createElement("p");
p.innerText = value;
display.appendChild(p);
}
}
},false)
ジェネレータ
generator.js
const decideBut = document.getElementById("decide");
const display = document.getElementById("outputNums");
decideBut.addEventListener('click', ()=>{
display.innerText = ""; // 初期化
const inputNum = document.getElementById("inputNum").value;
const collatz = function* (num) {
while(num!==1){
if(num%2===0){
yield num/=2;
}else{
yield num=num*3+1;
}
}
return {
done: true
}
}
const runCollatz = collatz(inputNum);
while(1){
let {done, value} = runCollatz.next();
if(done){
break;
}else{
let p = document.createElement("p");
p.innerText = value;
display.appendChild(p);
}
}
},false)