for()文
ループ処理をする構文で、どこまでループするのかなど終了条件など設定できる
（メソッドではないがよく使うため覚えておく）
for (制御変数; 条件式; 増減式){
処理内容
}
index.js
const array = [1,2,3,4,5];
let sum = 0;
// 変数sum(合計値)を0で初期化しておく
// 1-2
for (let i = 1; i <= array.length; i++){
// 制御変数 forループを使用して変数iを１からはじめ、
// 条件式 iがarray.length(配列の要素数)よりも小さいか等しい時、ループを繰り返す
// 何が繰り返し処理されるか▶️sum + i;が。
// 増減式 制御変数の初期値を増やす（↙️1ずつ増えた数を足す）
sum = sum + i;
// iの初期値は1で、array.length(配列の要素数)は5なので、iは1から5までの値を取る
// ループ1回目 sum = 0 + 1 (1)
// ループ2回目 sum = (1) + 2 (3)
// ループ3回目 sum = (3) + 3 (6)
// ループ4回目 sum = (6) + 4 (10)
// ループ5回目 sum = (10) + 5 (15)
}
console.log(sum);
//15
ここでの変数iは（*）配列のインデックスではなく単に数値であるため（sum=0に１ずつ足しているだけ）、配列の中身が何であろうとconsole.log(sum);には15が表示される。
(*)配列のインデックス
...配列内の各要素の位置を示す番号。通常０から始まる。（０、１、２...）
array = [1, 2, 3, 4, 5]の場合、array[0]は１になる
forEachメソッド
配列の各要素を最初から最後まで1つずつ取り出す
index.js
// 1-3
const array = [1,2,3,4,5];
let sum = 0;
array.forEach(function(value){
// valueという引数に配列の各要素を渡しておく
sum = sum + value;
// sumにvalueの値を順番に加える
});
console.log(sum);
//15
mapメソッド
配列の各要素を最初から最後まで1つずつ取り出し、新しい配列として返す
index.js
const mapArray = [1,2,3,4,5];
// 元の配列
const newArray = [];
// 新しい配列
const nextArray = mapArray.map(function(value){
// mapArrayの各要素がvalueとして渡され、
return value * 2;
// valueに入っているmapArrayの各要素に対して*2をした結果を返す
// mapメソッドがreturnで返ってきた値を受け取り、それらで新しい配列を作る(nextArray)
});
console.log(nextArray);
//[2, 4, 6, 8, 10]
filterメソッド
要素にフィルターをかけて、条件に一致した値を全て返す
index.js
const filterArray1 = [1,2,3,4,5];
const newfilterArr1 = [];
const newfilterArr2 = filterArray1.filter(function(number){
// fillterメソッドで、条件に一致した値を全て返す
return number > 2;
// 条件
});
console.log(newfilterArr2);
//[3, 4, 5]
findメソッド
条件に一致した値の中の最初に当てはまった値のみ返す
index.js
const findArray = [1,2,3,4,5];
const newfindArr = findArray.find(function(number){
return number > 2;
});
console.log(newfindArr);
//3
// findメソッドでは1つしか値を取得できない（条件に合った中の、最初の値）
実践的な考え方
①JavaScriptで動的に生成するもの
・初めからHTMLには書かず、JavaScriptで条件に一致した商品だけをHTMLに追加したりする
→mapメソッド、findメソッドなど
②既存のHTMLリストを操作
・事前にHTMLを作成しておき、JavaScriptでそのリストから条件に合った要素を操作する方法
→queryselector（要素取得）,filterメソッドなど