Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
for文禁止縛り in JS
Slide 2
Slide 2 text
for文禁止縛りって? その名の通り、 for文を使わずに繰り返し処理を書こう! というもの。 用量・用法を守って適切に使いましょう ...
Slide 3
Slide 3 text
Step. 1 配列の加工 大体の繰り返しは、繰り返す対象の配列が存 在しているので結構使われる。 なかでも、一つ一つを加工する場合は多い。
Slide 4
Slide 4 text
Step. 1 配列の加工 こういう、「配列の個々の要素を加工する」系 の処理はmapで書ける。 加工する処理を関数として分離できた。
Slide 5
Slide 5 text
Step. 2 配列に関する繰り返し 配列を加工しないけど、「全要素に対してなん かしたい」ときもある。
Slide 6
Slide 6 text
Step. 2 配列に関する繰り返し そういうときはforEachを使うと書ける。 mapよりも自由度の高い処理が可能
Slide 7
Slide 7 text
Step. 3 前のループの結果が 必要 たまに、「前のループの結果」が必要な処理が ある。 右側のスクリプトは、配列の中のオブジェクト を全てマージする例。
Slide 8
Slide 8 text
Step. 3 前のループの結果が 必要 こういう場合こそ、「reduce」を使うことができ る。 サンプルは足し算なので、使いどころはないと 思われがちだが、実は汎用性が高い。 「今までの累計、今の要素の値」から、「今の 要素も含めた累計」を返す関数を使う。
Slide 9
Slide 9 text
Step. 4 オブジェクトの プロパティごとに処理 右側はプロパティの値を全部 1加算するスクリ プト。
Slide 10
Slide 10 text
Step. 4 オブジェクトの プロパティごとに処理 Object.entries関数を使うと、オブジェクトを [key, value]の配列に変換することができる。 Step. 3を使うともとのオブジェクトに戻せる。 賛否両論。
Slide 11
Slide 11 text
Step. 5 探索 while文やfor文で配列の要素を探索する場合 を考える(効率は悪いのでこんなことしないか もしれないが) 右のは、最初の偶数を探すプログラム。
Slide 12
Slide 12 text
Step. 5 探索 こういうのは、「find」という関数が用意されて いる。indexOfで探索する手法が一般的だ が、値だけ必要な場合はfindで充分である。 条件を満たす全ての値が欲しいときは filterを 使う。
Slide 13
Slide 13 text
Step. x その他 上のでできないこと ● break(for文禁止縛りでもできないことはないがどれも黒魔術) ● 任意回数ループ(メモリを食わずにやる方法を知りたい ...)