プログラマーへの道 #16 配列操作に便利な配列のメソッド（プログラミング入門）のメモ

# 参考にした動画
https://youtu.be/in2HfMh3aL8

# 学んだこと
・foreachとforの違い
・map()とfilter()の違い
・reduce()の使い方

# 写経したコード && 実験したコード
```html
<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の違い
<b>foreach()</b>
・foreachメソッドである。[foreach | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
・初期化、条件式、変化式を書かなくても各要素を扱うことができる。
・foreachは新しい配列を生成しない。
・ループ内の処理が複雑なときはforeachを使うらしい（まだ私には処理が複雑かどうか判断できない）

<b>for</b>
・forは制御構文である。
・実行速度が速い。（AtCoderで試してみようと思います）
・制御フロー文を使える。[制御フロー | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements)

# map（）とfilter()の使い方と違い
<b>map()</b>
・メソッドである。[Map | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map)
・Mapping(写像)から由来している。[Mapping(写像)とは](https://ja.wikipedia.org/wiki/%E5%86%99%E5%83%8F#:~:text=%E5%86%99%E5%83%8F%EF%BC%88%E3%81%97%E3%82%83%E3%81%9E%E3%81%86%E3%80%81%E8%8B%B1%3A,%E7%94%A8%E3%81%84%E3%82%89%E3%82%8C%E3%82%8B%E3%81%93%E3%81%A8%E3%82%82%E3%81%82%E3%82%8B%E3%80%82)
・配列の全ての要素に対して特定の処理をする。
・新しい配列を生成する。


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

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