PageRenderTime 67ms CodeModel.GetById 35ms RepoModel.GetById 0ms app.codeStats 0ms

/JSGohan/reduce.html

https://github.com/azu/slide
HTML | 262 lines | 261 code | 1 blank | 0 comment | 0 complexity | 60d4c8335a5d932194b0e6124b7444ea MD5 | raw file
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head lang="ja">
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Array.prototype.reduce Dance</title>
    6. 

  6.     <noscript>
    7. 

  7.         <style>
    8. 

  8.             .main-content {
    9. 

  9.                 display: none;
    10. 

  10.             }
    11. 

  11.         </style>
    12. 

  12.     </noscript>
    13. 

  13.     <link rel="stylesheet" href="https://azu.github.io/pdf-slide-html/index.css"/>
    14. 

  14. 

  15. <link rel="canonical" href="https://azu.github.io/slide/JSGohan/reduce.html">
    16. 

  16. <link rel="author" href="https://www.hatena.ne.jp/efcl/" />
    17. 

  17. </head>
    18. 

  18. <body itemscope itemtype="http://schema.org/Article">
    19. 

  19. <div class="main-content">
    20. 

  20.     <meta itemprop="name headline" content="Array.prototype.reduce Dance"/>
    21. 

  21.     <iframe id="main-slide"
    22. 

  22.             src="https://azu.github.io/slide-pdf.js/?slide=https://azu.github.io/slide/JSGohan/reduce.pdf"
    23. 

  23.             scrolling="no"
    24. 

  24.             allowtransparency="true"
    25. 

  25.             width="100%"
    26. 

  26.             height="100%"
    27. 

  27.             style="border:0;">
    28. 

  28.     </iframe>
    29. 

  29.     <aside class="slide-controller">
    30. 

  30.         <span class="slide-date-published">公開日:<time itemprop="datePublished" datetime="2014-07-09" id="datePublished">
    31. 

  31.             2014-07-09
    32. 

  32.         </time></span>
    33. 

  33.         <span class="slide-date-modified">変更日:<time itemprop="dateModified" datetime="2015-12-06" id="dateModified">
    34. 

  34.             2015-12-06
    35. 

  35.         </time></span>
    36. 

  36.         <a href="https://azu.github.io/slide/JSGohan/reduce.pdf" title="Array.prototype.reduce Dance">
    37. 

  37.             <svg xmlns="http://www.w3.org/2000/svg"
    38. 

  38.                  version="1.1"
    39. 

  39.                  class="svg-icon"
    40. 

  40.                  viewBox="0 0 512 512">
    41. 

  41.                 <path
    42. 

  42.                         d="M 224 64 L 224 272 L 128 176 L 128 256 L 256 384 L 384 256 L 384 176 L 288 272 L 288 64 L 224 64 z M 64 320 L 64 448 L 448 448 L 448 320 L 416 320 L 416 416 L 96 416 L 96 320 L 64 320 Z"
    43. 

  43.                         style="fill:#000000"></path>
    44. 

  44.             </svg>
    45. 

  45.             Download PDF</a>
    46. 

  46.         <button class="fullscreen-button" id="js-fullscreen-button">
    47. 

  47.             <svg xmlns="http://www.w3.org/2000/svg"
    48. 

  48.                  version="1.1"
    49. 

  49.                  class="svg-icon"
    50. 

  50.                  viewBox="0 0 533 533">
    51. 

  51.                 <g>
    52. 

  52.                     <path d="M533.333,0v216.667L450,133.333l-100,100l-50-50l100-100L316.667,0H533.333z M233.333,350l-100,100l83.333,83.333H0
    53. 

  53. 		V316.667L83.333,400l100-100L233.333,350z"></path>
    54. 

  54.                 </g>
    55. 

  55.             </svg>
    56. 

  56.             Full Screen
    57. 

  57.         </button>
    58. 

  58.     </aside>
    59. 

  59. </div>
    60. 

  60. <article class="markdown-body" itemprop="articleBody"><h1 id="array-prototype-reduce-dance">Array.prototype.reduce Dance</h1>
    61. 

  61. <hr>
    62. 

  62. <h2 id="basic">Basic</h2>
    63. 

  63. <blockquote>
    64. 

  64. <p>var assert = require(&quot;assert&quot;);</p>
    65. 

  65. </blockquote>
    66. 

  66. <ul>
    67. 

  67. <li>forと違いimmutableなオブジェクトを使わないで合計を出せる</li>
    68. 

  68. <li><a href="http://toolness.github.io/slowmo-js/?code=%5B1%2C%202%5D.reduce(function%20(x%2C%20y)%20%7B%20return%20x%20%2B%20y%20%7D)%3B&amp;filterrange=5-5">Basic flow</a></li>
    69. 

  69. </ul>
    70. 

  70. <pre><code class="lang-js">var total = [1, 2, 3, 4, 5].reduce(function (a, b) {
    71. 

  71.     return a + b;
    72. 

  72. });
    73. 

  73. assert.equal(total, 15);
    74. 

  74. </code></pre>
    75. 

  75. <hr>
    76. 

  76. <h3 id="-">初期値</h3>
    77. 

  77. <ul>
    78. 

  78. <li>初期値を指定することもできる</li>
    79. 

  79. </ul>
    80. 

  80. <pre><code class="lang-js">var initialTotal = [0, 1, 2, 3, 4].reduce(function (a, b) {
    81. 

  81.     return a + b;
    82. 

  82. }, 10);
    83. 

  83. assert.equal(initialTotal, 20);
    84. 

  84. </code></pre>
    85. 

  85. <hr>
    86. 

  86. <h3 id="-">例外</h3>
    87. 

  87. <ul>
    88. 

  88. <li>空の配列の場合は例外を吐く</li>
    89. 

  89. <li><a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.21" title="15.4.4.21 Array.prototype.reduce">15.4.4.21 Array.prototype.reduce</a><ul>
    90. 

  90. <li>Step 8.c</li>
    91. 

  91. </ul>
    92. 

  92. </li>
    93. 

  93. </ul>
    94. 

  94. <pre><code class="lang-js">assert.throws(
    95. 

  95.     function () {
    96. 

  96.         [].reduce(function (a, b) {
    97. 

  97.             return a + b
    98. 

  98.         });
    99. 

  99.     },
    100. 

  100.     TypeError,
    101. 

  101.     &quot;k &lt; len の場合はTypeError&quot;
    102. 

  102. );
    103. 

  103. </code></pre>
    104. 

  104. <hr>
    105. 

  105. <hr>
    106. 

  106. <h2 id="every-by-reduce">every by reduce</h2>
    107. 

  107. <pre><code class="lang-js">var assert = require(&quot;assert&quot;);
    108. 

  108. assert.ng = function(value, message){
    109. 

  109.     assert.equal(false, !!value, message);
    110. 

  110. };
    111. 

  111. </code></pre>
    112. 

  112. <ul>
    113. 

  113. <li><code>reduce</code> があれば、補完mapやeveryなどは実装できる</li>
    114. 

  114. <li>柔軟性が高い</li>
    115. 

  115. </ul>
    116. 

  116. <blockquote>
    117. 

  117. <p>このうちreduceが一番強力で、mapやfilterやsumなど、他の関数もこれをもとに定義できます</p>
    118. 

  118. </blockquote>
    119. 

  119. <p>via <a href="https://gist.github.com/ympbyc/5564146" title="Functional JavaScript">Functional JavaScript</a></p>
    120. 

  120. <hr>
    121. 

  121. <h3 id="-array-every-https-developer-mozilla-org-ja-docs-web-javascript-reference-global_objects-array-every-array-every-"><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every" title="Array.every">Array.every</a></h3>
    122. 

  122. <pre><code class="lang-js">function every(array, predicate) {
    123. 

  123.     return array.reduce(function (prev, current, index, list) {
    124. 

  124.         if (prev) {
    125. 

  125.             return predicate(current, index, list);
    126. 

  126.         } else {
    127. 

  127.             return prev;
    128. 

  128.         }
    129. 

  129.     }, true);
    130. 

  130. }
    131. 

  131. function isBigEnough(element, index, list) {
    132. 

  132.     return (element &gt;= 10);
    133. 

  133. }
    134. 

  134. assert.ok(every([12, 130, 44], isBigEnough));
    135. 

  135. assert.ng(every([1, 100, 200], isBigEnough));
    136. 

  136. </code></pre>
    137. 

  137. <hr>
    138. 

  138. <h2 id="map">map</h2>
    139. 

  139. <blockquote>
    140. 

  140. <p>var _ = require(&quot;underscore&quot;);</p>
    141. 

  141. </blockquote>
    142. 

  142. <ul>
    143. 

  143. <li><code>map</code> は基本的に入力の個数と出力の個数が同じ</li>
    144. 

  144. <li><code>map</code> だけだと <code>filter</code> (select) までは行えない</li>
    145. 

  145. </ul>
    146. 

  146. <pre><code class="lang-js">var filteredNumberToString = function (e) {
    147. 

  147.     if (typeof e === &quot;number&quot;) {
    148. 

  148.         return String(e);
    149. 

  149.     }
    150. 

  150. };
    151. 

  151. var mappedArray = [1, null, 3].map(filteredNumberToString);
    152. 

  152. // 現実はundefinedになる
    153. 

  153. assert.deepEqual(mappedArray, [&quot;1&quot;, undefined, &quot;3&quot;]);
    154. 

  154. </code></pre>
    155. 

  155. <hr>
    156. 

  156. <h3 id="flatmap">flatMap</h3>
    157. 

  157. <ul>
    158. 

  158. <li><code>reduce</code> なら違う形(入力と出力の個数が異なる)ものを返せる</li>
    159. 

  159. </ul>
    160. 

  160. <pre><code class="lang-js">function flatMap(obj, iterator) {
    161. 

  161.     return _.reduce(obj, function (memo, value, index, list) {
    162. 

  162.         var items = iterator(value, index, list);
    163. 

  163.         if (items == null) {
    164. 

  164.             return memo;
    165. 

  165.         }
    166. 

  166.         return memo.concat(items);
    167. 

  167.     }, []);
    168. 

  168. }
    169. 

  169. var flatMappedArray = flatMap([&quot;string&quot;, 1, null, 3], filteredNumberToString);
    170. 

  170. // Numberだけにfilter + NumberをStringに変換した結果を返す
    171. 

  171. assert.deepEqual(flatMappedArray, [&quot;1&quot;, &quot;3&quot;]);
    172. 

  172. </code></pre>
    173. 

  173. <hr>
    174. 

  174. <h3 id="-">高階関数</h3>
    175. 

  175. <ul>
    176. 

  176. <li>関数を返す関数の事</li>
    177. 

  177. </ul>
    178. 

  178. <pre><code class="lang-js">var ComparisonResult = {
    179. 

  179.     ascending: -1,// &lt;
    180. 

  180.     same: 0,      // ==
    181. 

  181.     descending: 1 // &gt;
    182. 

  182. };
    183. 

  183. function comparator(predicate) {
    184. 

  184.     return function (x, y) {
    185. 

  185.         if (predicate(x, y)) {
    186. 

  186.             return ComparisonResult.ascending
    187. 

  187.         } else if (predicate(y, x)) {
    188. 

  188.             return ComparisonResult.descending;
    189. 

  189.         }
    190. 

  190.         return ComparisonResult.same;
    191. 

  191.     };
    192. 

  192. }
    193. 

  193. </code></pre>
    194. 

  194. <hr>
    195. 

  195. <h3 id="predicates-to-comparisonresult">Predicates to ComparisonResult</h3>
    196. 

  196. <ul>
    197. 

  197. <li>真偽値 -&gt; comparator を通して -&gt; <code>ComparisonResult</code> を返す関数を作る</li>
    198. 

  198. <li>真偽値を返す関数を Predicates という</li>
    199. 

  199. <li>真偽値から <code>&lt;</code> <code>==</code> <code>&gt;</code> の3種類の状態を返せるのでシンプル</li>
    200. 

  200. </ul>
    201. 

  201. <pre><code class="lang-js">function isLessOrEqual(x, y) {
    202. 

  202.     return x &lt;= y;
    203. 

  203. }
    204. 

  204. var values = [2, 3, -1, -6, 0, -108, 42, 10];
    205. 

  205. var expectedSortedValues = [-108, -6, -1, 0, 2, 3, 10, 42];
    206. 

  206. var results = values.sort(comparator(isLessOrEqual));
    207. 

  207. assert.deepEqual(results, expectedSortedValues);
    208. 

  208. </code></pre>
    209. 

  209. <hr>
    210. 

  210. <hr>
    211. 

  211. <h2 id="null-guard">Null Guard</h2>
    212. 

  212. <ul>
    213. 

  213. <li>配列に <strong>falsy</strong> な値が含まれてる意図しない結果になってしまう</li>
    214. 

  214. </ul>
    215. 

  215. <pre><code class="lang-js">var nums = [1, 2, 3, null, 5];
    216. 

  216. var multFn = function (total, n) {
    217. 

  217.     return total * n;
    218. 

  218. };
    219. 

  219. _.reduce(nums, multFn);// =&gt; 0 になってしまう…
    220. 

  220. </code></pre>
    221. 

  221. <hr>
    222. 

  222. <h3 id="null-check-">Null Check?</h3>
    223. 

  223. <ul>
    224. 

  224. <li>multFnにnullチェックを入れるのは本質的じゃない</li>
    225. 

  225. <li>nullチェックを加える <strong>高階関数</strong> を作る</li>
    226. 

  226. </ul>
    227. 

  227. <pre><code class="lang-js">function fnull(fn, defaultValue) {
    228. 

  228.     return function () {
    229. 

  229.     // falsyだった場合はdefaultValueにしたものに引数を構築し直す
    230. 

  230.         var args = _.map(arguments, function (e) {
    231. 

  231.             return e != null ? e : defaultValue;
    232. 

  232.         });
    233. 

  233.         return fn.apply(null, args);
    234. 

  234.     }
    235. 

  235. }
    236. 

  236. </code></pre>
    237. 

  237. <hr>
    238. 

  238. <h3 id="safemult">safeMult</h3>
    239. 

  239. <ul>
    240. 

  240. <li>falsyな値はdefalutValueに変更される</li>
    241. 

  241. </ul>
    242. 

  242. <pre><code class="lang-js">// var nums = [1, 2, 3, null, 5];
    243. 

  243. // falsyな値はdefalutValue(1)に変更される
    244. 

  244. var safeMultFn = fnull(multFn, 1);
    245. 

  245. var totalMult = _.reduce(nums, safeMultFn);
    246. 

  246. assert.equal(totalMult, 30);
    247. 

  247. </code></pre>
    248. 

  248. <hr>
    249. 

  249. <h3 id="-">おわり</h3>
    250. 

  250. <p>サンプルコード</p>
    251. 

  251. <ul>
    252. 

  252. <li><a href="https://github.com/azu/ReduceDance" title="azu/ReduceDance">azu/ReduceDance</a></li>
    253. 

  253. </ul>
    254. 

  254. <p>参考</p>
    255. 

  255. <ul>
    256. 

  256. <li><a href="http://www.functionaljavascript.com/" title="functional javascript">functional javascript</a></li>
    257. 

  257. <li><a href="http://taiju.hatenablog.com/entry/20110331/1301535208#fn1" title="reduce関数は結構有用っていうお話 - あと味">reduce関数は結構有用っていうお話 - あと味</a></li>
    258. 

  258. </ul>
    259. 

  259. </article>
    260. 

  260. <script async src="//azu.github.io/pdf-slide-html/index.js"></script>
    261. 

  261. </body>
    262. 

  262. </html>
    263. 

  263.