参考にした動画

学んだこと

・foreachとforの違い
・map()とfilter()の違い
・reduce()の使い方

写経したコード && 実験したコード

<html>
	<body>

	</body>
	<script>
		// 配列と配列のオブジェクトは同じ挙動になる。
		// 配列
		// a = [1,2,3]
		// console.log(a)
		// 配列のオブジェクト
		// b = new Array(1,2,3)
		// console.log(b)

		// foreachを使うと配列の値を取得することができる。
		// a.forEach(element => {
		// 	console.log(element)
			// a[0]が配列の値の数分出力される。
			// a[0]には1が入っているので1が3回出力さえる。
			// console.log(a[0])
			// continue,breakがforeachで使えないかどうか実験
			// if(a[0] == 1){
				// continue
				// 以下のエラーが出たのでcontinueはforeachで使えない。
				// Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement (at index16.html:22:5)
				// break
				// 以下のエラーが出たのでbreakはforeachで使えない。
				// Uncaught SyntaxError: Illegal break statement (at index16.html:22:5)
			// }
		// });
		// forはforeachと同じことができる。
		// for(i = 0; i < a.length; i++){
		// 	console.log(a[i])
		// }

		// ECサイトの買い物カゴの合計金額を出力する
		// aの配列を買い物カゴに見立てる
		// 買い物カゴの中には1円、2円、3円の商品が入ってる事にする。

		// mapの使い方
		// a = [100,200,300]
		// b = a.map(function(element){
		// 	// return element - 50
		// 	return 0
		// })
		// console.log(a)
		// console.log(b)

		// filter()の使い方
		// a = [100,200,300]
		// b = a.filter(function(element){
		// 	if(element > 100){
		// 		return true
		// 	}
		// 	return false
		// })
		// console.log(a)
		// console.log(b)

		// filter()の使い方実験
		// 偶数の数字のみfilterする。
		// a = [100,201,301]
		// b = a.filter(function(element){
		// 		return element % 2 == 0
		// })
		// console.log(a)
		// console.log(b)
		// reduce()の使い方 + 実験
		// 数の合計を数える
		// a = [250,450,300]
		// // 引数に使う単語は何か意味があるのか知りたいので実験。
		// // 動画では引数をprevとcurrentを引数に入れているけど名称はなんでもいい。
		// // 今回はeeeとbbbという引数を設定したけど、意味のある単語にした方がいい。
		// b = a.reduce(function(eee , bbb){
		// 		return eee + bbb
		// });
		// console.log(a)
		// console.log(b)

		// reduce()の具体例の実験①
		// お菓子の入った袋の中のお菓子の数を数える。
		chocolates = [5,4,3,4,3,1]
		totalChocolates = chocolates.reduce(function(sum , chocolate){
				return sum + chocolate
		});
		console.log(chocolates)
		console.log(totalChocolates)
	</script>
</html>

foreach（）とforの違い

foreach()
・foreachメソッドである。foreach | MDN
・初期化、条件式、変化式を書かなくても各要素を扱うことができる。
・foreachは新しい配列を生成しない。
・ループ内の処理が複雑なときはforeachを使うらしい（まだ私には処理が複雑かどうか判断できない）

for
・forは制御構文である。
・実行速度が速い。（AtCoderで試してみようと思います）
・制御フロー文を使える。制御フロー | MDN

map（）とfilter()の使い方と違い

map()
・メソッドである。Map | MDN
・Mapping(写像)から由来している。Mapping(写像)とは
・配列の全ての要素に対して特定の処理をする。
・新しい配列を生成する。

filter()
・特定の条件を一致する値を除外した配列を生成する。
・filter()メソッドはmap()メソッドと同様に新しい配列を生成する。
・戻り値がtrueになる要素だけを新しい配列を生成する。
・フィルタリング条件に一致する要素だけが残る。

reduce()

・あまり使わないらしい。
・新しい配列を作成しない。
・配列の要素を集める。