for文
for文は、同じ処理を指定した回数繰り返し実行することができます。以下のコードは、1から10までの数字を表示します。
for(let i = 1; i <= 5; i++){
console.log(i);
};
// 結果
1
2
3
4
5次の表は、オブジェクトをfor文で利用可能か表したものです。
| NodeList オブジェクト | 利用可能 |
| HTMLCollection オブジェクト | 利用可能 |
<ul id="box1">
<li id="list1_1" class="list">List 1-1</li>
<li id="list1_2" class="list">List 1-2</li>
<li id="list1_3" class="list">List 1-3</li>
</ul>上記のHTMLのlistクラスをjavascript取得し、forで処理する例です。
NodeList オブジェクトをfor文で処理する例です。
window.addEventListener('load', ()=>{
let target = document.querySelectorAll('.list'); // NodeList オブジェクト
for(let i = 0; i < target.length; i++){
console.log(target[i].innerText);
};
})以下は、HTMLCollection オブジェクトをfor文で処理する例です。
window.addEventListener('load', ()=>{
let target = document.getElementsByClassName('list'); // HTMLCollection オブジェクト
for(let i = 0; i < target.length; i++){
console.log(target[i].innerText)
};
})for ... of
「 for ... of 」を使うと反復可能オブジェクトから取り出した値を1つずつ順次処理します。
const arr = [1, 3, 5, 7, 9];
for(let i of arr){
console.log(i);
};
// 結果
1
3
5
7
9let arr = [
{ name: "taro" },
{ name: "hanako" },
{ name: "Jiro" }
]
for (let i of arr){
console.log(i);
}
// 結果
{ name: 'taro' }
{ name: 'hanako' }
{ name: 'Jiro' }let arr = [
{ name: "taro" },
{ name: "hanako" },
{ name: "Jiro" }
];
for (let i of arr){
console.log(i["name"]);
}
// 結果
taro
hanako
Jiro次の表は、オブジェクトをfor...of文で利用可能か表したものです。
| NodeList オブジェクト | 利用可能 |
| HTMLCollection オブジェクト | 利用可能 |
<ul id="box1">
<li id="list1_1" class="list">List 1-1</li>
<li id="list1_2" class="list">List 1-2</li>
<li id="list1_3" class="list">List 1-3</li>
</ul>上記のHTMLのlistクラスをjavascript取得し、NodeList オブジェクトをfor...ofで処理する例です。
NodeList オブジェクトをfor...of文で処理する例です。
window.addEventListener('load', ()=>{
let target = document.querySelectorAll('.list'); // NodeList オブジェクト
for(let i of target){
console.log(i.innerText)
};
});以下は、HTMLCollection オブジェクトをfor...of文で処理する例です。
window.addEventListener('load', ()=>{
let target = document.getElementsByClassName ('list'); // HTMLCollection オブジェクト
for(let i of target){
console.log(i.innerText)
};
});for ... in
オブジェクトのプロパティを取得します。
配列に for...in を使うと処理の順序が保証されなかったり、余分なものが処理されます。
let user = {
name : 'Taro',
age : 28,
contory: 'Japan'
};
for(let i in user){
console.log(i);
};forEach
配列、SETオブジェクト、MAPオブジェクトで利用可能です。
forEach では、continue、break は利用できません。
let fruits = ["orange", "banana", "apple"];
fruits.forEach(function(value, index, fruits){
console.log(fruits + " => " + index + ":" + value);
});
// 結果
orange,banana,apple => 0:orange
orange,banana,apple => 1:banana
orange,banana,apple => 2:applelet users = [
{ name : "Taro", age : 28 },
{ name : "hanako", age : 30},
{ name : "Jon", age : 18}
];
users.forEach(function(user){
console.log(user.name + ":" + user.age);
});次の表は、オブジェクトをforEach文で利用可能か表したものです。
| NodeList オブジェクト | Array.from() で配列に変換してから使う |
| HTMLCollection オブジェクト | Array.from() で配列に変換してから使う |
<ul id="box1">
<li id="list1_1" class="list">List 1-1</li>
<li id="list1_2" class="list">List 1-2</li>
<li id="list1_3" class="list">List 1-3</li>
</ul>上記のHTMLのlistクラスをjavascript取得し、NodeList オブジェクトをforEachで処理する例です。
window.addEventListener('load', ()=>{
let target = document.querySelectorAll('.list'); // NodeList オブジェクト
Array.from(target).forEach(function(value, index, target){
console.log(value.innerText)
})
})以下は、HTMLCollection オブジェクトをforEachで処理する例です。
window.addEventListener('load', ()=>{
let target = document.getElementsByClassName('list'); // HTMLCollection オブジェクト
Array.from(target).forEach(function(value, index, target){
console.log(value.innerText)
})
})while文
while文は、条件が成り立つ限り処理を繰り返し実行します。
let num = 0;
while( num < 10) {
console.log(num);
num += 1;
};無限ループ
無限ループを使うと、時間の計測や特定のタスクを定期的に実行したり、ユーザーに何か入力してもらうプログラムで利用できます。
次のプログラムを実行すると無限ループの為、ずっと「 a 」が表示され続けます。
プログラミングの内容によっては、無限ループをそのままにしておくと処理し続けるので、メモリ容量などを圧迫してパソコンがフリーズする場合があります。
無限ループを終了するには、強制的にプログラムを終了する必要があります。終了条件などを指定していない場合は、コマンドプロンプトの画面の場合であれば、「 Ctrl + c 」でプログラムを強制終了します。
while(true) {
console.log("a");
};while文のブロックの中で無限ループの終了条件を作るには、以下のように書きます。
let num = 0;
while(true) {
if(num == 10){
break;
}
console.log(num);
num += 1;
};