{"id":16628,"date":"2026-07-10T12:07:52","date_gmt":"2026-07-10T12:07:52","guid":{"rendered":"https:\/\/withcode.tech\/media\/?p=16628"},"modified":"2026-09-19T23:01:50","modified_gmt":"2026-09-19T23:01:50","slug":"javascript-array-iteration-benchmark","status":"publish","type":"post","link":"https:\/\/withcode.tech\/media\/javascript-array-iteration-benchmark\/","title":{"rendered":"\u3010\u5b9f\u6e2c\u3011JavaScript\u306e\u914d\u5217\u51e6\u7406\u306f\u3069\u308c\u304c\u901f\u3044\uff1fforEach\/map\/for\u6587\u3092\u30d9\u30f3\u30c1\u3057\u305f"},"content":{"rendered":"
\n
\n
\"\"\u751f\u5f92<\/span><\/div>\n

forEach\u3068map\u3063\u3066\u4f55\u304c\u9055\u3046\u3093\u3067\u3059\u304b\uff1f\u901f\u3055\u3082\u9055\u3046\u3093\u3067\u3059\u304b\uff1f<\/strong><\/p><\/span><\/span><\/span><\/div><\/div>\n<\/div>\n<\/div>\n

\n
\n
\"\"\u30da\u30f3\u535a\u58eb<\/span><\/div>\n

\u3044\u3044\u8cea\u554f\u3060\u3002\u901f\u3055\u3082\u7528\u9014\u3082\u3061\u3083\u3093\u3068\u9055\u3046\u3002\u5b9f\u969b\u306b\u8a08\u6e2c\u3057\u305f\u30c7\u30fc\u30bf\u3092\u898b\u305b\u306a\u304c\u3089\u8aac\u660e\u3057\u3088\u3046\u3002<\/strong><\/p><\/span><\/span><\/span><\/div><\/div>\n<\/div>\n<\/div>\n

JavaScript\u3067\u914d\u5217\u3092\u6271\u3046\u3068\u304d\u3001for<\/code>\u6587\u30fbforEach<\/code>\u30fbmap<\/code>\u30fbreduce<\/code>\u30fbfor...of<\/code>\u30fbwhile<\/code>\u306a\u3069\u3001\u3055\u307e\u3056\u307e\u306a\u624b\u6cd5\u304c\u5b58\u5728\u3059\u308b\u3002\u300c\u3069\u308c\u3092\u4f7f\u3048\u3070\u3044\u3044\u304b\u300d\u306f\u66f8\u304d\u65b9\u306e\u597d\u307f\u3060\u3051\u3067\u306a\u304f\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30fb\u53ef\u8aad\u6027\u30fb\u610f\u56f3\u306e\u660e\u78ba\u3055<\/strong>\u3068\u3044\u30463\u8ef8\u3067\u9078\u3076\u3079\u304d\u3060\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u5b9f\u969b\u306bNode.js\u74b0\u5883\u3067\u624b\u5143\u8a08\u6e2c\u3057\u305f\u6570\u5024\u3092\u793a\u3057\u306a\u304c\u3089\u3001\u5404\u624b\u6cd5\u306e\u7279\u6027\u3068\u4f7f\u3044\u5206\u3051\u3092\u5fb9\u5e95\u89e3\u8aac\u3059\u308b\u3002<\/p>\n

\n

\u691c\u8a3c\u74b0\u5883\u3068\u8a08\u6e2c\u65b9\u6cd5<\/h2>
\"\u691c\u8a3c\u74b0\u5883\u3068\u8a08\u6e2c\u65b9\u6cd5\"<\/figure>\n\n

\u307e\u305a\u30d9\u30f3\u30c1\u30de\u30fc\u30af\u306e\u524d\u63d0\u3092\u660e\u793a\u3059\u308b\u3002\u8a08\u6e2c\u7d50\u679c\u306f\u3042\u304f\u307e\u3067\u624b\u5143\u74b0\u5883\u3067\u306e\u76ee\u5b89<\/strong>\u3067\u3042\u308a\u3001\u5b9f\u884c\u74b0\u5883\u30fbJS\u30a8\u30f3\u30b8\u30f3\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u30fb\u30c7\u30fc\u30bf\u306e\u5185\u5bb9\u306b\u3088\u3063\u3066\u5909\u52d5\u3059\u308b\u3002<\/p>\n

\n\n
\u9805\u76ee<\/th>\u5024<\/th><\/tr><\/thead>\n
OS<\/td>macOS 14.5 (Apple M2)<\/td><\/tr>\n
Node.js<\/td>v22.2.0<\/td><\/tr>\n
\u8a08\u6e2c\u65b9\u6cd5<\/td>performance.now() \u3067\u524d\u5f8c\u3092\u631f\u307f\u300110\u56de\u306e\u5e73\u5747\u3092\u53d6\u308b<\/td><\/tr>\n
\u914d\u5217\u30b5\u30a4\u30ba<\/td>100\u4e07\u8981\u7d20\uff081,000,000\u4ef6\uff09\u306e\u6570\u5024\u914d\u5217<\/td><\/tr>\n
\u30a6\u30a9\u30fc\u30e0\u30a2\u30c3\u30d7<\/td>\u8a08\u6e2c\u524d\u306b\u540c\u4e00\u51e6\u7406\u30923\u56de\u7a7a\u56de\u3057\uff08JIT\u30a6\u30a9\u30fc\u30e0\u30a2\u30c3\u30d7\uff09<\/td><\/tr>\n<\/tbody>\n<\/table><\/figure>\n

\u4ee5\u4e0b\u304c\u4eca\u56de\u4f7f\u3063\u305f\u30d9\u30f3\u30c1\u30de\u30fc\u30af\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u5168\u4f53\u3060\u3002\u30b3\u30d4\u30fc\u3057\u3066\u624b\u5143\u3067\u52d5\u304b\u305b\u308b\u3002<\/p>\n

\/\/ benchmark.js  Node.js v22\u3067\u52d5\u4f5c\u78ba\u8a8d\u6e08\u307f\nconst { performance } = require('perf_hooks');\n\nconst SIZE = 1_000_000;\nconst arr  = Array.from({ length: SIZE }, (_, i) => i + 1);\n\nfunction bench(label, fn, warmup = 3, runs = 10) {\n  \/\/ \u30a6\u30a9\u30fc\u30e0\u30a2\u30c3\u30d7\uff08JIT\u6700\u9069\u5316\u3092\u5b89\u5b9a\u3055\u305b\u308b\uff09\n  for (let w = 0; w < warmup; w++) fn();\n\n  const times = [];\n  for (let r = 0; r < runs; r++) {\n    const t0 = performance.now();\n    fn();\n    times.push(performance.now() - t0);\n  }\n\n  const avg = times.reduce((a, b) => a + b, 0) \/ times.length;\n  const min = Math.min(...times);\n  const max = Math.max(...times);\n  console.log(\n    `${label.padEnd(20)} avg=${avg.toFixed(2)}ms  min=${min.toFixed(2)}ms  max=${max.toFixed(2)}ms`\n  );\n  return avg;\n}\n\n\/\/ \u2500\u2500\u2500 \u5404\u624b\u6cd5\u306e\u5b9f\u88c5 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n\/\/ 1) for\uff08\u4f1d\u7d71\u7684\u306a\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u30eb\u30fc\u30d7\uff09\nbench('for', () => {\n  let sum = 0;\n  for (let i = 0; i < arr.length; i++) {\n    sum += arr[i];\n  }\n  return sum;\n});\n\n\/\/ 2) while\nbench('while', () => {\n  let sum = 0;\n  let i   = arr.length;\n  while (i--) {\n    sum += arr[i];\n  }\n  return sum;\n});\n\n\/\/ 3) for...of\nbench('for...of', () => {\n  let sum = 0;\n  for (const v of arr) {\n    sum += v;\n  }\n  return sum;\n});\n\n\/\/ 4) forEach\nbench('forEach', () => {\n  let sum = 0;\n  arr.forEach(v => { sum += v; });\n  return sum;\n});\n\n\/\/ 5) reduce\nbench('reduce', () => arr.reduce((acc, v) => acc + v, 0));\n\n\/\/ 6) map\uff08\u526f\u4f5c\u7528\u76ee\u7684\u3067\u306e\u8aa4\u7528\u3092\u8a08\u6e2c\uff09\nbench('map (\u00d7\u526f\u4f5c\u7528)', () => {\n  let sum = 0;\n  arr.map(v => { sum += v; }); \/\/ \u672c\u6765\u306e\u7528\u9014\u3067\u306f\u306a\u3044\u4f7f\u3044\u65b9\n  return sum;\n});\n<\/code><\/pre><\/div>\n
\u3053\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3092Node.js\u3067\u5b9f\u884c\u3059\u308b\u3068\u3001\u5404\u624b\u6cd5\u306e\u5e73\u5747\u30fb\u6700\u5c0f\u30fb\u6700\u5927\u5b9f\u884c\u6642\u9593<\/strong>\u304c\u51fa\u529b\u3055\u308c\u308b\u3002\u4ee5\u4e0b\u306b\u624b\u5143\u3067\u306e\u5b9f\u6e2c\u7d50\u679c\u3092\u307e\u3068\u3081\u305f\u3002<\/p>\n
\n
\u5b9f\u6e2c\u30d9\u30f3\u30c1\u30de\u30fc\u30af\u7d50\u679c<\/h2>
\"\u5b9f\u6e2c\u30d9\u30f3\u30c1\u30de\u30fc\u30af\u7d50\u679c\"<\/figure>\n\n
\u624b\u5143\u74b0\u5883\uff08\u4e0a\u8a18\u306eM2 Mac + Node.js v22.2.0\uff09\u3067\u8a08\u6e2c\u3057\u305f\u7d50\u679c\u304c\u4ee5\u4e0b\u3060\u3002\u6570\u5024\u306f10\u56de\u5b9f\u884c\u306e\u5e73\u5747\u30df\u30ea\u79d2\u3002<\/p>\n
\n\n
\u624b\u6cd5<\/th>\u5e73\u5747\u5b9f\u884c\u6642\u9593(ms)<\/th>\u6700\u901f\u6bd4(for\u57fa\u6e96)<\/th>\u623b\u308a\u5024<\/th>\u53ef\u8aad\u6027<\/th>\u4e3b\u306a\u7528\u9014<\/th><\/tr><\/thead>\n
for\uff08\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\uff09<\/td>2.1<\/td>1.00\u00d7\uff08\u57fa\u6e96\uff09<\/td>\u306a\u3057<\/td>\u4e2d<\/td>\u6c4e\u7528\u30fb\u9ad8\u901f\u51e6\u7406<\/td><\/tr>\n
while\uff08\u9006\u9806\uff09<\/td>2.0<\/td>0.95\u00d7<\/td>\u306a\u3057<\/td>\u4f4e<\/td>\u6700\u901f\u3092\u72d9\u3046\u5834\u9762<\/td><\/tr>\n
for…of<\/td>3.4<\/td>1.62\u00d7<\/td>\u306a\u3057<\/td>\u9ad8<\/td>\u53ef\u8aad\u6027\u91cd\u8996\u306e\u7e70\u308a\u8fd4\u3057<\/td><\/tr>\n
forEach<\/td>4.8<\/td>2.29\u00d7<\/td>\u306a\u3057(undefined)<\/td>\u9ad8<\/td>\u526f\u4f5c\u7528\u3042\u308a\u306e\u7e70\u308a\u8fd4\u3057<\/td><\/tr>\n
reduce<\/td>3.2<\/td>1.52\u00d7<\/td>\u96c6\u8a08\u5024<\/td>\u4e2d\u301c\u9ad8<\/td>\u5408\u8a08\u30fb\u5909\u63db\u30fb\u30b0\u30eb\u30fc\u30d7\u5316<\/td><\/tr>\n
map\uff08\u526f\u4f5c\u7528\u76ee\u7684\uff09<\/td>5.3<\/td>2.52\u00d7<\/td>\u65b0\u914d\u5217\uff08\u4e0d\u8981\uff09<\/td>\u4f4e<\/td>\u8aa4\u7528\u2192\u4f7f\u3046\u3079\u304d\u3067\u306a\u3044<\/td><\/tr>\n<\/tbody>\n<\/table><\/figure>\n
\u300c\u6700\u901f\u306fwhile\u306e\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u9006\u9806\u30eb\u30fc\u30d7<\/span><\/strong>\u300d\u3068\u3044\u3046\u7d50\u679c\u3060\u3063\u305f\u3002\u305f\u3060\u3057\u5dee\u306f\u5fae\u3005\u305f\u308b\u3082\u306e\u3067\u3001100\u4e07\u4ef6\u306e\u51e6\u7406\u3067\u30822\u301c5ms\u7a0b\u5ea6\u306e\u5dee\u306b\u3059\u304e\u306a\u3044\u3002\u666e\u901a\u306eWeb\u30a2\u30d7\u30ea\u958b\u767a\u3067\u306f\u901f\u5ea6\u5dee\u3088\u308a\u3082\u53ef\u8aad\u6027\u30fb\u610f\u56f3\u306e\u660e\u78ba\u3055\u3092\u512a\u5148\u3059\u3079\u304d<\/strong>\u3060\u3002<\/p>\n
\n
for\u6587\uff08\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u30eb\u30fc\u30d7\uff09<\/h2>
\"for\u6587\uff08\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u30eb\u30fc\u30d7\uff09\"<\/figure>\n\n
\u57fa\u672c\u69cb\u6587\u3068\u7279\u5fb4<\/h3>\n
for<\/code>\u6587\u306fJavaScript\u3067\u6700\u3082\u57fa\u672c\u7684\u306a\u30eb\u30fc\u30d7\u69cb\u6587\u3060\u3002\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u3092\u76f4\u63a5\u64cd\u4f5c\u3067\u304d\u308b\u305f\u3081\u3001\u9014\u4e2d\u3067break\u3059\u308b\u30fb\u7279\u5b9a\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u3060\u3051\u51e6\u7406\u3059\u308b\u30fb\u9006\u9806\u30eb\u30fc\u30d7<\/strong>\u306a\u3069\u3001\u7d30\u304b\u3044\u5236\u5fa1\u304c\u5fc5\u8981\u306a\u5834\u9762\u3067\u5f37\u3044\u3002<\/p>\n
\/\/ \u57fa\u672c\u7684\u306afor\u6587\nconst fruits = ['apple', 'banana', 'cherry'];\n\nfor (let i = 0; i < fruits.length; i++) {\n  console.log(`${i}: ${fruits[i]}`);\n}\n\/\/ 0: apple\n\/\/ 1: banana\n\/\/ 2: cherry\n\n\/\/ \u9006\u9806\u30eb\u30fc\u30d7\nfor (let i = fruits.length - 1; i >= 0; i--) {\n  console.log(fruits[i]);\n}\n\/\/ cherry \u2192 banana \u2192 apple\n\n\/\/ \u7279\u5b9a\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u3060\u3051\u30b9\u30ad\u30c3\u30d7\nfor (let i = 0; i < fruits.length; i++) {\n  if (i === 1) continue; \/\/ banana \u3092\u30b9\u30ad\u30c3\u30d7\n  console.log(fruits[i]);\n}\n\/\/ apple, cherry\n\n\/\/ \u9014\u4e2d\u3067break\nfor (let i = 0; i < fruits.length; i++) {\n  if (fruits[i] === 'banana') break;\n  console.log(fruits[i]);\n}\n\/\/ apple \u3060\u3051\u51fa\u529b\n<\/code><\/pre><\/div>\n
\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306e\u30b3\u30c4<\/h3>\n
\u308f\u305a\u304b\u3067\u3082\u901f\u5ea6\u3092\u7a3c\u304e\u305f\u3044\u306a\u3089\u3001arr.length<\/code>\u3092\u30eb\u30fc\u30d7\u5916\u3067\u30ad\u30e3\u30c3\u30b7\u30e5\u3059\u308b\u30c6\u30af\u30cb\u30c3\u30af\u304c\u3042\u308b\u3002\u305f\u3060\u3057\u73fe\u4ee3\u306eV8\u30a8\u30f3\u30b8\u30f3\u306f\u307b\u307c\u81ea\u52d5\u6700\u9069\u5316\u3059\u308b\u305f\u3081\u3001\u5287\u7684\u306a\u5dee\u306f\u51fa\u306a\u3044\u3002<\/p>\n
\/\/ length \u3092\u30ad\u30e3\u30c3\u30b7\u30e5\uff08\u53e4\u5178\u7684\u6700\u9069\u5316\uff09\nconst arr = new Array(1_000_000).fill(1);\nconst len = arr.length; \/\/ \u2190 \u30ad\u30e3\u30c3\u30b7\u30e5\n\nlet sum = 0;\nfor (let i = 0; i < len; i++) {\n  sum += arr[i];\n}\n\n\/\/ \u73fe\u4ee3\u306eNode.js\u3067\u306f\u4e0a\u8a18\u3068\u307b\u307c\u540c\u901f\u3060\u304c\u3001\n\/\/ \u660e\u793a\u7684\u306b\u66f8\u304f\u3068\u30b3\u30fc\u30c9\u306e\u610f\u56f3\u304c\u660e\u78ba\u306b\u306a\u308b\u5229\u70b9\u306f\u3042\u308b\n<\/code><\/pre><\/div>\n
\n
while\u6587<\/h2>
\"while\u6587\"<\/figure>\n\n
\u57fa\u672c\u69cb\u6587\u3068\u9006\u9806\u30eb\u30fc\u30d7<\/h3>\n
while<\/code>\u6587\u306f\u6761\u4ef6\u304c\u771f\u306e\u9593\u30eb\u30fc\u30d7\u3057\u7d9a\u3051\u308b\u3002\u9006\u9806\u30eb\u30fc\u30d7\uff08\u30c7\u30af\u30ea\u30e1\u30f3\u30c8\uff09<\/strong>\u3068\u7d44\u307f\u5408\u308f\u305b\u308b\u3068\u3001i--<\/code>\u304c0\u306b\u306a\u3063\u305f\u77ac\u9593\u306bfalsy\u306b\u306a\u308b\u6027\u8cea\u3092\u5229\u7528\u3067\u304d\u3001\u82e5\u5e72\u9ad8\u901f\u306b\u306a\u308b\u3002<\/p>\n
\/\/ \u901a\u5e38\u306ewhile\u30eb\u30fc\u30d7\nconst nums = [10, 20, 30, 40, 50];\nlet i = 0;\nwhile (i < nums.length) {\n  console.log(nums[i]);\n  i++;\n}\n\n\/\/ \u9006\u9806while\uff08\u30d9\u30f3\u30c1\u3067\u6700\u901f\u3060\u3063\u305f\u30d1\u30bf\u30fc\u30f3\uff09\nlet j = nums.length;\nlet sum = 0;\nwhile (j--) {\n  sum += nums[j];\n}\nconsole.log(sum); \/\/ 150\n\n\/\/ do...while\uff08\u6700\u4f4e1\u56de\u306f\u5b9f\u884c\u3055\u308c\u308b\uff09\nlet count = 0;\ndo {\n  console.log(`count: ${count}`);\n  count++;\n} while (count < 3);\n\/\/ count: 0\n\/\/ count: 1\n\/\/ count: 2\n<\/code><\/pre><\/div>\n
while\u306f\u53ef\u8aad\u6027\u304c\u4f4e\u304f\u306a\u308a\u3084\u3059\u3044<\/span><\/strong>\u3002\u901f\u5ea6\u3088\u308a\u3082\u53ef\u8aad\u6027\u304c\u91cd\u8981\u306a\u30a2\u30d7\u30ea\u30b3\u30fc\u30c9\u3067\u306f\u3001for\u3084for…of\u3092\u4f7f\u3046\u307b\u3046\u304c\u4fdd\u5b88\u3057\u3084\u3059\u3044\u3002while\u306f\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30af\u30ea\u30c6\u30a3\u30ab\u30eb\u306a\u51e6\u7406\uff08\u30b2\u30fc\u30e0\u30a8\u30f3\u30b8\u30f3\u30fb\u97f3\u58f0\u51e6\u7406\u306a\u3069\uff09\u3067\u610f\u8b58\u7684\u306b\u4f7f\u3046\u304f\u3089\u3044\u306b\u3068\u3069\u3081\u3088\u3046\u3002<\/p>\n
\n
for…of\u6587<\/h2>
\"for...of\u6587\"<\/figure>\n\n
\u30a4\u30c6\u30e9\u30d6\u30eb\u306b\u5bfe\u3057\u3066\u4f7f\u3046\u73fe\u4ee3\u7684\u306a\u66f8\u304d\u65b9<\/h3>\n
for...of<\/code>\u306fES2015\u3067\u8ffd\u52a0\u3055\u308c\u305f\u69cb\u6587\u3067\u3001\u914d\u5217\u3060\u3051\u3067\u306a\u304f\u3001Map\u3084 Set\u30fb\u6587\u5b57\u5217\u30fbNodeList\u306a\u3069\u3001\u30a4\u30c6\u30e9\u30d6\u30eb\u306a\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u5168\u822c<\/strong>\u306b\u4f7f\u3048\u308b\u3002\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u304c\u4e0d\u8981\u306a\u5834\u5408\u306ffor<\/code>\u6587\u3088\u308a\u3082\u610f\u56f3\u304c\u660e\u78ba\u306b\u306a\u308b\u3002<\/p>\n
\/\/ \u914d\u5217\u306efor...of\nconst colors = ['red', 'green', 'blue'];\nfor (const color of colors) {\n  console.log(color);\n}\n\n\/\/ entries\u3067\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u3082\u53d6\u5f97\nfor (const [index, color] of colors.entries()) {\n  console.log(`${index}: ${color}`);\n}\n\/\/ 0: red, 1: green, 2: blue\n\n\/\/ Set\u306b\u5bfe\u3057\u3066\nconst set = new Set([1, 2, 3, 2, 1]);\nfor (const v of set) {\n  console.log(v); \/\/ 1, 2, 3\uff08\u91cd\u8907\u9664\u53bb\u6e08\u307f\uff09\n}\n\n\/\/ Map\u306b\u5bfe\u3057\u3066\nconst map = new Map([['a', 1], ['b', 2]]);\nfor (const [key, val] of map) {\n  console.log(`${key}=${val}`);\n}\n\n\/\/ \u6587\u5b57\u5217\u306b\u5bfe\u3057\u3066\uff08\u6587\u5b57\u5358\u4f4d\u3067\u51e6\u7406\uff09\nfor (const char of 'hello') {\n  console.log(char); \/\/ h, e, l, l, o\n}\n\n\/\/ break\u3082\u4f7f\u3048\u308b\nfor (const num of [1, 2, 3, 4, 5]) {\n  if (num === 3) break;\n  console.log(num); \/\/ 1, 2\n}\n<\/code><\/pre><\/div>\n
for…in \u3068\u306e\u9055\u3044\uff08\u91cd\u8981\uff09<\/h3>\n
for…in \u306f\u914d\u5217\u306b\u4f7f\u3063\u3066\u306f\u3044\u3051\u306a\u3044<\/span><\/strong>\u3002for...in<\/code>\u306f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u5217\u6319\u53ef\u80fd\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u540d\uff08\u30ad\u30fc\uff09<\/strong>\u3092\u30a4\u30c6\u30ec\u30fc\u30c8\u3059\u308b\u3082\u306e\u3067\u3001\u914d\u5217\u306b\u4f7f\u3046\u3068\u30d7\u30ed\u30c8\u30bf\u30a4\u30d7\u30c1\u30a7\u30fc\u30f3\u4e0a\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3082\u62fe\u3063\u3066\u3057\u307e\u3046\u30ea\u30b9\u30af\u304c\u3042\u308b\u3002<\/p>\n
\/\/ for...in \u306f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30ad\u30fc\u5217\u6319\u306b\u4f7f\u3046\nconst person = { name: 'Alice', age: 25, city: 'Tokyo' };\nfor (const key in person) {\n  console.log(`${key}: ${person[key]}`);\n}\n\/\/ name: Alice\n\/\/ age: 25\n\/\/ city: Tokyo\n\n\/\/ \u274c \u914d\u5217\u306bfor...in\u3092\u4f7f\u3046\uff08\u3084\u3063\u3066\u306f\u3044\u3051\u306a\u3044\uff09\nconst arr = [10, 20, 30];\nArray.prototype.customMethod = function() {}; \/\/ \u30d7\u30ed\u30c8\u30bf\u30a4\u30d7\u62e1\u5f35\u306e\u4f8b\n\nfor (const key in arr) {\n  console.log(key); \/\/ \"0\", \"1\", \"2\", \"customMethod\" \u2190 \u610f\u56f3\u3057\u306a\u3044\u30ad\u30fc\u304c\u51fa\u308b\uff01\n}\n\n\/\/ \u2705 \u914d\u5217\u306b\u306ffor...of\u3092\u4f7f\u3046\nfor (const val of arr) {\n  console.log(val); \/\/ 10, 20, 30\uff08\u6b63\u5e38\uff09\n}\n<\/code><\/pre><\/div>\n
\n
forEach<\/h2>
\"forEach\"<\/figure>\n\n
\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u578b\u306e\u7e70\u308a\u8fd4\u3057\u51e6\u7406<\/h3>\n
forEach<\/code>\u306fES5\u304b\u3089\u4f7f\u3048\u308b\u914d\u5217\u30e1\u30bd\u30c3\u30c9\u3067\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u5404\u8981\u7d20\u306b\u5bfe\u3057\u3066\u5b9f\u884c\u3059\u308b<\/strong>\u3002\u623b\u308a\u5024\u306f\u5e38\u306bundefined<\/code>\u3067\u3042\u308a\u3001break<\/code>\u3067\u9014\u4e2d\u7d42\u4e86\u306f\u3067\u304d\u306a\u3044\u3002\u526f\u4f5c\u7528\uff08DOM\u64cd\u4f5c\u30fb\u30ed\u30b0\u51fa\u529b\u30fb\u5916\u90e8\u72b6\u614b\u306e\u5909\u66f4\uff09<\/strong>\u3092\u4f34\u3046\u51e6\u7406\u306b\u9069\u3057\u3066\u3044\u308b\u3002<\/p>\n
\/\/ \u57fa\u672c\u7684\u306aforEach\nconst scores = [85, 92, 78, 95, 88];\n\nscores.forEach((score, index, array) => {\n  \/\/ \u7b2c2\u5f15\u6570: \u30a4\u30f3\u30c7\u30c3\u30af\u30b9\n  \/\/ \u7b2c3\u5f15\u6570: \u5143\u306e\u914d\u5217\n  console.log(`${index + 1}\u4f4d: ${score}\u70b9`);\n});\n\n\/\/ DOM\u64cd\u4f5c\u306e\u4f8b\uff08\u30d6\u30e9\u30a6\u30b6\u74b0\u5883\uff09\nconst buttons = document.querySelectorAll('.btn');\nbuttons.forEach(btn => {\n  btn.addEventListener('click', () => {\n    btn.classList.toggle('active');\n  });\n});\n\n\/\/ \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u914d\u5217\u306e\u51e6\u7406\nconst users = [\n  { name: 'Alice', age: 25 },\n  { name: 'Bob',   age: 30 },\n];\nconst names = [];\nusers.forEach(user => {\n  names.push(user.name); \/\/ \u526f\u4f5c\u7528: \u5916\u90e8\u914d\u5217\u306b\u8ffd\u52a0\n});\nconsole.log(names); \/\/ ['Alice', 'Bob']\n\/\/ \u203b\u3053\u306e\u5834\u5408\u306fmap\u3092\u4f7f\u3046\u307b\u3046\u304c\u610f\u56f3\u304c\u660e\u78ba\n\n\/\/ \u26a0\ufe0f break\u306f\u3067\u304d\u306a\u3044\uff08\u4f8b\u5916\u3092\u4f7f\u3046\u30cf\u30c3\u30af\u304c\u3042\u308b\u304c\u975e\u63a8\u5968\uff09\nscores.forEach(score => {\n  if (score > 90) return; \/\/ return\u306fcontinue\u3068\u540c\u7fa9\uff08\u30eb\u30fc\u30d7\u306f\u6b62\u307e\u3089\u306a\u3044\uff09\n  console.log(score); \/\/ 85, 78, 88 \u304c\u51fa\u529b\u3055\u308c\u308b\n});\n<\/code><\/pre><\/div>\n
forEach \u3067\u975e\u540c\u671f\u51e6\u7406\u3092\u4f7f\u3046\u843d\u3068\u3057\u7a74<\/h3>\n
forEach\u306e\u4e2d\u3067await\u306f\u52b9\u304b\u306a\u3044<\/span><\/strong>\u3002\u3053\u308c\u306fJavaScript\u958b\u767a\u8005\u304c\u3088\u304f\u30cf\u30de\u308b\u843d\u3068\u3057\u7a74\u306e\u4e00\u3064\u3060\u3002<\/p>\n
\/\/ \u274c forEach + async\/await \u306f\u6b63\u3057\u304f\u52d5\u304b\u306a\u3044\nconst ids = [1, 2, 3];\n\n\/\/ \u3053\u308c\u306f\u300c\u4e26\u5217\u5b9f\u884c\u300d\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u3001\u5b8c\u4e86\u3092\u5f85\u3066\u306a\u3044\nids.forEach(async (id) => {\n  const data = await fetch(`\/api\/user\/${id}`);\n  console.log(await data.json());\n});\nconsole.log('done'); \/\/ \u2190 \u5168fetch\u304c\u7d42\u308f\u308b\u524d\u306b\u51fa\u529b\u3055\u308c\u308b\uff01\n\n\/\/ \u2705 for...of + await \u304c\u6b63\u3057\u3044\uff08\u76f4\u5217\u5b9f\u884c\uff09\nasync function fetchSequential() {\n  for (const id of ids) {\n    const data = await fetch(`\/api\/user\/${id}`);\n    console.log(await data.json()); \/\/ 1\u4ef6\u305a\u3064\u9806\u756a\u306b\u51e6\u7406\n  }\n  console.log('done'); \/\/ \u2190 \u5168\u4ef6\u51e6\u7406\u5f8c\u306b\u51fa\u529b\n}\n\n\/\/ \u2705 Promise.all + map \u3067\u4e26\u5217\u5b9f\u884c\uff08\u9ad8\u901f\uff09\nasync function fetchParallel() {\n  const results = await Promise.all(\n    ids.map(id => fetch(`\/api\/user\/${id}`).then(r => r.json()))\n  );\n  console.log(results); \/\/ \u5168\u4ef6\u307e\u3068\u3081\u3066\u53d6\u5f97\n}\n<\/code><\/pre><\/div>\n
\n
\u516c\u5f0f\u30b5\u30a4\u30c8\u304b\u3089\u7121\u6599\u30ab\u30a6\u30f3\u30bb\u30ea\u30f3\u30b0\u306b\u7533\u3057\u8fbc\u3080 \u2192<\/strong><\/a><\/div>\n<\/div>\n
\n
map<\/h2>
\"map\"<\/figure>\n\n
\u914d\u5217\u3092\u5909\u63db\u3057\u3066\u65b0\u3057\u3044\u914d\u5217\u3092\u4f5c\u308b<\/h3>\n
map<\/code>\u306f\u914d\u5217\u306e\u5404\u8981\u7d20\u3092\u5909\u63db\u3057\u3001\u540c\u3058\u9577\u3055\u306e\u65b0\u3057\u3044\u914d\u5217\u3092\u8fd4\u3059<\/strong>\u3002\u5143\u306e\u914d\u5217\u306f\u5909\u66f4\u3055\u308c\u306a\u3044\uff08\u30a4\u30df\u30e5\u30fc\u30bf\u30d6\u30eb\uff09\u3002\u30c7\u30fc\u30bf\u306e\u5909\u63db\u30fb\u52a0\u5de5<\/strong>\u306b\u4f7f\u3046\u3002<\/p>\n
\/\/ \u6570\u5024\u30922\u500d\u306b\u5909\u63db\nconst nums = [1, 2, 3, 4, 5];\nconst doubled = nums.map(n => n * 2);\nconsole.log(doubled); \/\/ [2, 4, 6, 8, 10]\nconsole.log(nums);    \/\/ [1, 2, 3, 4, 5] \u2190 \u5143\u306f\u5909\u308f\u3089\u306a\u3044\n\n\/\/ \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u914d\u5217\u304b\u3089\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u62bd\u51fa\nconst users = [\n  { id: 1, name: 'Alice', age: 25 },\n  { id: 2, name: 'Bob',   age: 30 },\n  { id: 3, name: 'Carol', age: 22 },\n];\nconst names = users.map(u => u.name);\nconsole.log(names); \/\/ ['Alice', 'Bob', 'Carol']\n\n\/\/ \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u5225\u306e\u5f62\u306b\u5909\u63db\uff08\u30c7\u30fc\u30bf\u6574\u5f62\uff09\nconst formatted = users.map(u => ({\n  label: `${u.name}\uff08${u.age}\u6b73\uff09`,\n  value: u.id,\n}));\n\/\/ [{ label: 'Alice\uff0825\u6b73\uff09', value: 1 }, ...]\n\n\/\/ \u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u3092\u4f7f\u3063\u305f\u5909\u63db\nconst withRank = users.map((u, i) => ({\n  rank: i + 1,\n  ...u,\n}));\n\/\/ [{ rank: 1, id: 1, name: 'Alice', ... }, ...]\n\n\/\/ React\u3067\u306e\u30ea\u30b9\u30c8\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\uff08\u3088\u304f\u4f7f\u3046\u30d1\u30bf\u30fc\u30f3\uff09\n\/\/ const elements = items.map(item => <li key={item.id}>{item.name}<\/li>);\n<\/code><\/pre><\/div>\n
map\u3092\u526f\u4f5c\u7528\u76ee\u7684\u306b\u4f7f\u3046\u8aa4\u7528<\/h3>\n
\u30d9\u30f3\u30c1\u3067\u3082\u6700\u3082\u9045\u304b\u3063\u305f\u300cmap\u3092\u526f\u4f5c\u7528\u76ee\u7684\u306b\u4f7f\u3046\u30d1\u30bf\u30fc\u30f3<\/span><\/strong>\u300d\u306f\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u53ef\u8aad\u6027\u306e\u4e21\u9762\u3067\u554f\u984c\u304c\u3042\u308b\u3002<\/p>\n
\/\/ \u274c map\u3092\u526f\u4f5c\u7528\u306b\u4f7f\u3046\uff08\u3088\u304f\u3042\u308b\u8aa4\u7528\uff09\nconst results = [];\n[1, 2, 3].map(n => {\n  results.push(n * 2); \/\/ \u526f\u4f5c\u7528\uff01 \u623b\u308a\u5024(\u65b0\u914d\u5217)\u3092\u4f7f\u3063\u3066\u3044\u306a\u3044\n});\n\/\/ map\u304c\u751f\u6210\u3057\u305f\u914d\u5217\u306f\u6368\u3066\u3089\u308c\u3066\u3044\u308b\u306e\u3067\u7121\u99c4\n\n\/\/ \u2705 \u526f\u4f5c\u7528 \u2192 forEach \u3092\u4f7f\u3046\n[1, 2, 3].forEach(n => {\n  results.push(n * 2);\n});\n\n\/\/ \u2705 \u5909\u63db \u2192 map\u306e\u623b\u308a\u5024\u3092\u4f7f\u3046\nconst doubled = [1, 2, 3].map(n => n * 2);\n\n\/\/ \u306a\u305c\u8aa4\u7528\u304c\u3044\u3051\u306a\u3044\u304b\n\/\/ 1. map\u306f\u65b0\u914d\u5217\u3092\u751f\u6210\u3059\u308b\u306e\u3067\u30e1\u30e2\u30ea\u7121\u99c4\n\/\/ 2. \u30b3\u30fc\u30c9\u3092\u8aad\u3080\u4eba\u304c\u300c\u623b\u308a\u5024\u3092\u4f7f\u3063\u3066\u3044\u308b\u306f\u305a\u300d\u3068\u601d\u3063\u3066\u6df7\u4e71\u3059\u308b\n\/\/ 3. \u30d9\u30f3\u30c1\u3067\u3082forEach\u3088\u308a\u9045\u3044\n<\/code><\/pre><\/div>\n
\n
reduce<\/h2>
\"reduce\"<\/figure>\n\n
\u914d\u5217\u3092\u3072\u3068\u3064\u306e\u5024\u306b\u7573\u307f\u8fbc\u3080<\/h3>\n
reduce<\/code>\u306f\u914d\u5217\u3092\u5de6\u304b\u3089\u53f3\u3078\u51e6\u7406\u3057\u3001\u5358\u4e00\u306e\u5024\uff08\u6570\u5024\u30fb\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30fb\u914d\u5217\u306a\u3069\u4f55\u3067\u3082\uff09\u306b\u96c6\u7d04\u3059\u308b<\/strong>\u6700\u3082\u6c4e\u7528\u7684\u306a\u9ad8\u968e\u95a2\u6570\u3060\u3002\u6163\u308c\u308b\u307e\u3067\u96e3\u3057\u304f\u898b\u3048\u308b\u304c\u3001\u5408\u8a08\u30fb\u30b0\u30eb\u30fc\u30d7\u5316\u30fb\u30d5\u30e9\u30c3\u30c8\u5316\u306a\u3069\u5e45\u5e83\u3044\u51e6\u7406\u3092\u8868\u73fe\u3067\u304d\u308b\u3002<\/p>\n
\/\/ \u5408\u8a08\u3092\u6c42\u3081\u308b\uff08\u57fa\u672c\uff09\nconst nums = [1, 2, 3, 4, 5];\nconst sum = nums.reduce((accumulator, current) => accumulator + current, 0);\nconsole.log(sum); \/\/ 15\n\n\/\/ \u5f15\u6570\u306e\u610f\u5473\uff1a\n\/\/ accumulator: \u524d\u306e\u8a08\u7b97\u7d50\u679c\uff08\u521d\u56de\u306f\u521d\u671f\u5024=0\uff09\n\/\/ current    : \u73fe\u5728\u306e\u8981\u7d20\n\/\/ 0          : \u521d\u671f\u5024\n\n\/\/ \u6700\u5927\u5024\u3092\u6c42\u3081\u308b\nconst max = nums.reduce((acc, v) => (v > acc ? v : acc), -Infinity);\nconsole.log(max); \/\/ 5\n\n\/\/ \u914d\u5217\u3092\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u5909\u63db\uff08\u30b0\u30eb\u30fc\u30d7\u5316\uff09\nconst people = [\n  { name: 'Alice', dept: 'dev' },\n  { name: 'Bob',   dept: 'design' },\n  { name: 'Carol', dept: 'dev' },\n];\nconst grouped = people.reduce((acc, person) => {\n  const key = person.dept;\n  if (!acc[key]) acc[key] = [];\n  acc[key].push(person.name);\n  return acc;\n}, {});\nconsole.log(grouped);\n\/\/ { dev: ['Alice', 'Carol'], design: ['Bob'] }\n\n\/\/ \u30d5\u30e9\u30c3\u30c8\u5316\uff08flat()\u304c\u4f7f\u3048\u306a\u3044\u30b1\u30fc\u30b9\u5411\u3051\uff09\nconst nested = [[1, 2], [3, 4], [5]];\nconst flat = nested.reduce((acc, arr) => acc.concat(arr), []);\nconsole.log(flat); \/\/ [1, 2, 3, 4, 5]\n\n\/\/ \u5358\u8a9e\u306e\u51fa\u73fe\u56de\u6570\u3092\u6570\u3048\u308b\nconst words = ['apple', 'banana', 'apple', 'cherry', 'banana', 'apple'];\nconst counts = words.reduce((acc, word) => {\n  acc[word] = (acc[word] || 0) + 1;\n  return acc;\n}, {});\nconsole.log(counts);\n\/\/ { apple: 3, banana: 2, cherry: 1 }\n<\/code><\/pre><\/div>\n
reduceRight<\/h3>\n
reduceRight<\/code>\u306f\u53f3\u304b\u3089\u5de6\u3078\u51e6\u7406\u3059\u308b\u3002\u95a2\u6570\u306e\u5408\u6210\uff08pipe\/compose\uff09\u3067\u3088\u304f\u4f7f\u308f\u308c\u308b\u3002<\/p>\n
\/\/ reduceRight: \u53f3\u304b\u3089\u5de6\u3078\nconst arr = ['a', 'b', 'c'];\nconst result = arr.reduceRight((acc, v) => acc + v, '');\nconsole.log(result); \/\/ 'cba'\n\n\/\/ \u95a2\u6570\u5408\u6210\uff08compose\uff09\u306e\u5b9f\u88c5\nconst double = x => x * 2;\nconst addOne = x => x + 1;\nconst square = x => x * x;\n\n\/\/ compose: \u53f3\u304b\u3089\u5de6\u3078\u95a2\u6570\u3092\u9069\u7528\nconst compose = (...fns) => x => fns.reduceRight((v, fn) => fn(v), x);\nconst transform = compose(double, addOne, square);\nconsole.log(transform(3)); \/\/ square(3)=9 \u2192 addOne(9)=10 \u2192 double(10)=20\n<\/code><\/pre><\/div>\n
\n
filter \u3068 find \u3082\u5408\u308f\u305b\u3066\u77e5\u3063\u3066\u304a\u304f<\/h2>
\"filter<\/figure>\n\n
filter: \u6761\u4ef6\u3092\u6e80\u305f\u3059\u8981\u7d20\u3060\u3051\u62bd\u51fa<\/h3>\n
filter<\/code>\u306f\u6761\u4ef6\u3092\u6e80\u305f\u3059\u8981\u7d20\u3060\u3051\u3092\u96c6\u3081\u305f\u65b0\u3057\u3044\u914d\u5217<\/strong>\u3092\u8fd4\u3059\u3002\u5143\u306e\u914d\u5217\u306f\u5909\u308f\u3089\u306a\u3044\u3002<\/p>\n
const products = [\n  { name: 'MacBook',  price: 200000, inStock: true  },\n  { name: 'iPhone',   price: 130000, inStock: false },\n  { name: 'iPad',     price:  80000, inStock: true  },\n  { name: 'AirPods',  price:  28000, inStock: true  },\n];\n\n\/\/ \u5728\u5eab\u3042\u308a\u306e\u5546\u54c1\u3060\u3051\nconst available = products.filter(p => p.inStock);\nconsole.log(available.length); \/\/ 3\n\n\/\/ \u4fa1\u683c\u304c10\u4e07\u5186\u4ee5\u4e0b\u306e\u5728\u5eab\u3042\u308a\u5546\u54c1\nconst affordable = products.filter(p => p.inStock && p.price <= 100000);\n\/\/ [{ name: 'iPad', ... }, { name: 'AirPods', ... }]\n\n\/\/ map \u3068 filter \u306e\u30c1\u30a7\u30fc\u30f3\nconst names = products\n  .filter(p => p.inStock)\n  .map(p => p.name);\nconsole.log(names); \/\/ ['MacBook', 'iPad', 'AirPods']\n<\/code><\/pre><\/div>\n
find \u3068 findIndex<\/h3>\n
find<\/code>\u306f\u6761\u4ef6\u3092\u6e80\u305f\u3059\u6700\u521d\u306e\u8981\u7d20<\/strong>\u3092\u8fd4\u3059\u3002\u898b\u3064\u304b\u3089\u306a\u3051\u308c\u3070undefined<\/code>\u3002findIndex<\/code>\u306f\u305d\u306e\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u3092\u8fd4\u3059\u3002<\/p>\n
const users = [\n  { id: 1, name: 'Alice' },\n  { id: 2, name: 'Bob'   },\n  { id: 3, name: 'Carol' },\n];\n\n\/\/ ID\u3067\u691c\u7d22\nconst user = users.find(u => u.id === 2);\nconsole.log(user); \/\/ { id: 2, name: 'Bob' }\n\n\/\/ \u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u3067\u691c\u7d22\nconst idx = users.findIndex(u => u.name === 'Carol');\nconsole.log(idx); \/\/ 2\n\n\/\/ \u898b\u3064\u304b\u3089\u306a\u3044\u5834\u5408\nconst notFound = users.find(u => u.id === 99);\nconsole.log(notFound); \/\/ undefined\n\n\/\/ findIndex \u304c -1 \u3092\u8fd4\u3059\u5834\u5408\nconst notFoundIdx = users.findIndex(u => u.id === 99);\nconsole.log(notFoundIdx); \/\/ -1\n<\/code><\/pre><\/div>\n
\n
\u624b\u6cd5\u306e\u4f7f\u3044\u5206\u3051\u30c1\u30fc\u30c8\u30b7\u30fc\u30c8<\/h2>
\"\u624b\u6cd5\u306e\u4f7f\u3044\u5206\u3051\u30c1\u30fc\u30c8\u30b7\u30fc\u30c8\"<\/figure>\n\n
\u3069\u306e\u624b\u6cd5\u3092\u4f7f\u3046\u304b\u8ff7\u3063\u305f\u3089\u3001\u4ee5\u4e0b\u306e\u5224\u65ad\u30d5\u30ed\u30fc\u3092\u53c2\u8003\u306b\u3057\u3088\u3046\u3002<\/p>\n
\n\n
\u3084\u308a\u305f\u3044\u3053\u3068<\/th>\u4f7f\u3046\u624b\u6cd5<\/th>\u7406\u7531<\/th><\/tr><\/thead>\n
\u3059\u3079\u3066\u306e\u8981\u7d20\u3092\u51e6\u7406\uff08\u526f\u4f5c\u7528\u3042\u308a\uff09<\/td>forEach<\/td>\u623b\u308a\u5024\u4e0d\u8981\u30fb\u610f\u56f3\u304c\u660e\u78ba<\/td><\/tr>\n
\u914d\u5217\u3092\u5225\u306e\u5024\u306b\u5909\u63db<\/td>map<\/td>\u65b0\u914d\u5217\u3092\u8fd4\u3059\u30fb\u5143\u306f\u4e0d\u5909<\/td><\/tr>\n
\u6761\u4ef6\u3067\u7d5e\u308a\u8fbc\u3080<\/td>filter<\/td>\u6761\u4ef6\u4e00\u81f4\u306e\u307f\u65b0\u914d\u5217<\/td><\/tr>\n
\u3072\u3068\u3064\u306e\u5024\u306b\u96c6\u7d04<\/td>reduce<\/td>\u5408\u8a08\u30fb\u30b0\u30eb\u30fc\u30d7\u5316\u306a\u3069<\/td><\/tr>\n
\u6700\u521d\u306e\u4e00\u81f4\u3092\u63a2\u3059<\/td>find \/ findIndex<\/td>\u5168\u4ef6\u30b9\u30ad\u30e3\u30f3\u4e0d\u8981\u30fb\u9ad8\u901f<\/td><\/tr>\n
\u9ad8\u901f\u306a\u7e70\u308a\u8fd4\u3057\uff08\u901f\u5ea6\u512a\u5148\uff09<\/td>for \/ while<\/td>\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\u304c\u6700\u5c0f<\/td><\/tr>\n
\u30a4\u30c6\u30e9\u30d6\u30eb\u5168\u822c\uff08Map\u30fbSet\u7b49\uff09<\/td>for…of<\/td>\u6c4e\u7528\u6027\u304c\u9ad8\u3044<\/td><\/tr>\n
\u975e\u540c\u671f\u51e6\u7406\u3092\u9806\u756a\u306b\u5b9f\u884c<\/td>for…of + await<\/td>forEach\u3067\u306fawait\u304c\u52b9\u304b\u306a\u3044<\/td><\/tr>\n
\u975e\u540c\u671f\u51e6\u7406\u3092\u4e26\u5217\u5b9f\u884c<\/td>Promise.all + map<\/td>\u5168\u4ef6\u540c\u6642\u306b\u8d70\u3089\u305b\u3066\u9ad8\u901f<\/td><\/tr>\n<\/tbody>\n<\/table><\/figure>\n
\u307e\u305f\u3001\u8907\u6570\u306e\u64cd\u4f5c\u3092\u30c1\u30a7\u30fc\u30f3\u3059\u308b\u5834\u5408\u306ffilter \u2192 map \u2192 reduce<\/strong>\u306e\u9806\u3067\u8003\u3048\u308b\u3068\u6574\u7406\u3057\u3084\u3059\u3044\u3002<\/p>\n
\/\/ \u5b9f\u8df5\u7684\u306a\u30c1\u30a7\u30fc\u30f3\u4f8b\uff1a\n\/\/ \u300c\u5728\u5eab\u3042\u308a\u306e\u5546\u54c1\u306e\u4fa1\u683c\u5408\u8a08\u3092\u6c42\u3081\u308b\u300d\nconst products = [\n  { name: 'A', price: 1000, inStock: true  },\n  { name: 'B', price: 2000, inStock: false },\n  { name: 'C', price: 1500, inStock: true  },\n  { name: 'D', price: 3000, inStock: true  },\n];\n\nconst totalAvailable = products\n  .filter(p => p.inStock)           \/\/ \u5728\u5eab\u3042\u308a\u306b\u7d5e\u308b\n  .map(p => p.price)                \/\/ \u4fa1\u683c\u3060\u3051\u53d6\u308a\u51fa\u3059\n  .reduce((sum, price) => sum + price, 0); \/\/ \u5408\u8a08\n\nconsole.log(totalAvailable); \/\/ 5500\n\n\/\/ \u5927\u91cf\u30c7\u30fc\u30bf\u306a\u3089reduce\u4e00\u672c\u306b\u307e\u3068\u3081\u305f\u65b9\u304c\u9ad8\u901f\uff08\u4e00\u5ea6\u3060\u3051\u8d70\u67fb\uff09\nconst totalFast = products.reduce((sum, p) => {\n  return p.inStock ? sum + p.price : sum;\n}, 0);\nconsole.log(totalFast); \/\/ 5500\uff08\u540c\u3058\u7d50\u679c\uff09\n<\/code><\/pre><\/div>\n
\n
\u3088\u304f\u3042\u308b\u8aa4\u7528\u30d1\u30bf\u30fc\u30f3\u3068\u5bfe\u7b56<\/h2>
\"\u3088\u304f\u3042\u308b\u8aa4\u7528\u30d1\u30bf\u30fc\u30f3\u3068\u5bfe\u7b56\"<\/figure>\n\n
\u8aa4\u75281: map\u3092\u526f\u4f5c\u7528\u3060\u3051\u306b\u4f7f\u3046<\/h3>\n
\u5148\u8ff0\u306e\u901a\u308a\u3001map\u306e\u623b\u308a\u5024\u3092\u7121\u8996\u3059\u308b<\/span><\/strong>\u306e\u306f\u30e1\u30e2\u30ea\u306e\u7121\u99c4\u3067\u3001\u30b3\u30fc\u30c9\u306e\u53ef\u8aad\u6027\u3082\u4e0b\u3052\u308b\u3002\u526f\u4f5c\u7528\u304c\u76ee\u7684\u306a\u3089\u5fc5\u305aforEach\u3092\u4f7f\u304a\u3046\u3002<\/p>\n
\u8aa4\u75282: forEach\u3067\u975e\u540c\u671f\u51e6\u7406\u3092\u5f85\u3066\u306a\u3044\u3068\u601d\u3063\u3066\u5909\u306a\u5b9f\u88c5\u3092\u3059\u308b<\/h3>\n
\/\/ \u274c \u3088\u304f\u3042\u308b\u300c\u3068\u308a\u3042\u3048\u305aPromise.all\u3092forEach\u306b\u5165\u308c\u308b\u300d\u8aa4\u308a\nconst ids = [1, 2, 3];\n\n\/\/ \u3053\u308c\u306f\u52d5\u304f\u304c\u3001\u76f4\u5217\u304b\u4e26\u5217\u304b\u304c\u4e0d\u660e\u77ad\nconst promises = [];\nids.forEach(id => {\n  promises.push(fetch(`\/api\/${id}`));\n});\nawait Promise.all(promises); \/\/ \u52d5\u304f\u304c\u3001map\u3092\u4f7f\u3048\u3070\u30b7\u30f3\u30d7\u30eb\n\n\/\/ \u2705 \u30b7\u30f3\u30d7\u30eb\u306a\u66f8\u304d\u65b9\nconst results = await Promise.all(ids.map(id => fetch(`\/api\/${id}`)));\n<\/code><\/pre><\/div>\n
\u8aa4\u75283: reduce\u3067\u5358\u7d14\u306a\u51e6\u7406\u3092\u8907\u96d1\u306b\u66f8\u304f<\/h3>\n
\/\/ \u274c \u914d\u5217\u306e\u5408\u8a08\u3092reduce\u3067\u66f8\u304f\uff08\u5197\u9577\u3067\u306f\u306a\u3044\u304c\u2026\uff09\nconst sum = [1, 2, 3].reduce((a, b) => a + b);\n\/\/ \u3053\u308c\u306f\u554f\u984c\u306a\u3044\u304c\u3001\u4e0b\u8a18\u306e\u65b9\u304c\u8aad\u307f\u3084\u3059\u3044\u5834\u9762\u3082\u3042\u308b\n\n\/\/ \u2705 \u5358\u7d14\u306a\u5408\u8a08\u306a\u3089for...of\u3084forEach\u3082\u660e\u78ba\nlet total = 0;\nfor (const n of [1, 2, 3]) total += n;\n\n\/\/ reduce\u304c\u672c\u9818\u3092\u767a\u63ee\u3059\u308b\u306e\u306f\u300c\u96c6\u7d04\u306e\u5f62\u304c\u8907\u96d1\u306a\u6642\u300d\n\/\/ \u4f8b\uff1a\u30cd\u30b9\u30c8\u3057\u305f\u30c7\u30fc\u30bf\u306e\u30d5\u30e9\u30c3\u30c8\u5316\u3001\u30b0\u30eb\u30fc\u30d7\u5316\u3001\n\/\/     \u8907\u6570\u306e\u8a08\u7b97\u3092\u540c\u6642\u306b\u884c\u3046\u5834\u5408\u306a\u3069\n<\/code><\/pre><\/div>\n
\u8aa4\u75284: \u5de8\u5927\u914d\u5217\u3078\u306echained\u30e1\u30bd\u30c3\u30c9\u4e71\u7528<\/h3>\n
100\u4e07\u4ef6\u3092\u8d85\u3048\u308b\u3088\u3046\u306a\u914d\u5217\u306b\u5bfe\u3057\u3066filter \u2192 map \u2192 reduce<\/code>\u3092\u30c1\u30a7\u30fc\u30f3\u3059\u308b\u3068\u3001\u914d\u5217\u30923\u56de\u8d70\u67fb\u3059\u308b\u3053\u3068\u306b\u306a\u308b\u3002\u5927\u91cf\u30c7\u30fc\u30bf\u306freduce\u3072\u3068\u3064\u306b\u307e\u3068\u3081\u308b\u304b\u3001for\u6587\u3067\u4e00\u5ea6\u306b\u51e6\u7406\u3059\u308b<\/span><\/strong>\u307b\u3046\u304c\u52b9\u7387\u7684\u3060\u3002<\/p>\n
const LARGE = new Array(1_000_000).fill(0).map((_, i) => ({\n  value: i,\n  active: i % 2 === 0,\n}));\n\n\/\/ \u274c 100\u4e07\u4ef6\u30923\u56de\u8d70\u67fb\uff08\u975e\u52b9\u7387\uff09\nconst result1 = LARGE\n  .filter(x => x.active)\n  .map(x => x.value * 2)\n  .reduce((s, v) => s + v, 0);\n\n\/\/ \u2705 100\u4e07\u4ef6\u30921\u56de\u3060\u3051\u8d70\u67fb\uff08\u9ad8\u52b9\u7387\uff09\nconst result2 = LARGE.reduce((s, x) => {\n  if (x.active) s += x.value * 2;\n  return s;\n}, 0);\n\nconsole.log(result1 === result2); \/\/ true\uff08\u540c\u3058\u7d50\u679c\uff09\n<\/code><\/pre><\/div>\n
\n
\u5b9f\u8df5\uff1a\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u610f\u8b58\u3057\u305f\u5b9f\u88c5\u30d1\u30bf\u30fc\u30f3\u96c6<\/h2>
\"\u5b9f\u8df5\uff1a\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u610f\u8b58\u3057\u305f\u5b9f\u88c5\u30d1\u30bf\u30fc\u30f3\u96c6\"<\/figure>\n\n
\u5927\u91cf\u30c7\u30fc\u30bf\u306e\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\u3068\u5909\u63db\u3092\u52b9\u7387\u3088\u304f\u884c\u3046<\/h3>\n
\u5b9f\u969b\u306e\u30a2\u30d7\u30ea\u306710\u4e07\u4ef6\u4ee5\u4e0a\u306e\u30c7\u30fc\u30bf\u3092\u6271\u3046\u5834\u9762\u3067\u306f\u3001\u30c1\u30a7\u30fc\u30f3\u306e\u66f8\u304d\u65b9\u4e00\u3064\u3067\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u5927\u304d\u304f\u5909\u308f\u308b\u3002\u4ee5\u4e0b\u306b\u5b9f\u6e2c\u3092\u4ea4\u3048\u305f\u30d1\u30bf\u30fc\u30f3\u3092\u793a\u3059\u3002<\/p>\n
\/\/ 100,000\u4ef6\u306e\u30e6\u30fc\u30b6\u30fc\u30c7\u30fc\u30bf\u304b\u3089\u300c\u30a2\u30af\u30c6\u30a3\u30d6\u306730\u6b73\u672a\u6e80\u300d\u3092\u62bd\u51fa\u3057\u3066\u540d\u524d\u30ea\u30b9\u30c8\u3092\u4f5c\u308b\n\nconst users = Array.from({ length: 100_000 }, (_, i) => ({\n  id: i,\n  name: `User${i}`,\n  age: Math.floor(Math.random() * 60) + 18,\n  active: Math.random() > 0.3,\n}));\n\n\/\/ \u30d1\u30bf\u30fc\u30f31: filter \u2192 map \u30c1\u30a7\u30fc\u30f3\uff082\u56de\u8d70\u67fb\uff09\nconsole.time('chain');\nconst result1 = users\n  .filter(u => u.active && u.age < 30)\n  .map(u => u.name);\nconsole.timeEnd('chain');\n\/\/ \u624b\u5143\u8a08\u6e2c: \u7d04 8.2ms\n\n\/\/ \u30d1\u30bf\u30fc\u30f32: reduce \u4e00\u672c\uff081\u56de\u8d70\u67fb\uff09\nconsole.time('reduce');\nconst result2 = users.reduce((acc, u) => {\n  if (u.active && u.age < 30) acc.push(u.name);\n  return acc;\n}, []);\nconsole.timeEnd('reduce');\n\/\/ \u624b\u5143\u8a08\u6e2c: \u7d04 5.4ms\uff08\u7d0434%\u9ad8\u901f\uff09\n\n\/\/ \u30d1\u30bf\u30fc\u30f33: for\u6587\uff08\u6700\u901f\uff09\nconsole.time('for');\nconst result3 = [];\nfor (let i = 0; i < users.length; i++) {\n  const u = users[i];\n  if (u.active && u.age < 30) result3.push(u.name);\n}\nconsole.timeEnd('for');\n\/\/ \u624b\u5143\u8a08\u6e2c: \u7d04 4.1ms\uff08\u30c1\u30a7\u30fc\u30f3\u306e\u7d042\u500d\u901f\uff09\n\n\/\/ \u203b \u4ef6\u6570\u304c\u5c11\u306a\u3044\u5834\u5408\uff081,000\u4ef6\u7a0b\u5ea6\uff09\u306f\u5dee\u306f\u7121\u8996\u3067\u304d\u308b\u307b\u3069\u5c0f\u3055\u3044\n<\/code><\/pre><\/div>\n
\u914d\u5217\u306e\u91cd\u8907\u524a\u9664\u30d1\u30bf\u30fc\u30f3\u6bd4\u8f03<\/h3>\n
Set\u3068Array.from\u306e\u7d44\u307f\u5408\u308f\u305b<\/span><\/strong>\u304c\u6700\u3082\u30b7\u30f3\u30d7\u30eb\u3060\u304c\u3001\u6761\u4ef6\u4ed8\u304d\u91cd\u8907\u524a\u9664\uff08ID\u30d9\u30fc\u30b9\u306a\u3069\uff09\u306b\u306freduce\u3084Map\u304c\u6709\u52b9\u3060\u3002<\/p>\n
\/\/ \u30b7\u30f3\u30d7\u30eb\u306a\u91cd\u8907\u524a\u9664\uff08\u30d7\u30ea\u30df\u30c6\u30a3\u30d6\u5024\uff09\nconst nums = [1, 2, 3, 2, 1, 4, 3];\n\n\/\/ \u30d1\u30bf\u30fc\u30f31: Set\uff08\u6700\u3082\u30b7\u30f3\u30d7\u30eb\u30fb\u9ad8\u901f\uff09\nconst unique1 = [...new Set(nums)];\n\/\/ [1, 2, 3, 4]\n\n\/\/ \u30d1\u30bf\u30fc\u30f32: filter + indexOf\uff08\u53e4\u5178\u7684\u30fb\u9045\u3044\uff09\nconst unique2 = nums.filter((v, i) => nums.indexOf(v) === i);\n\/\/ [1, 2, 3, 4] \u2190 \u540c\u3058\u7d50\u679c\u3060\u304c O(n\u00b2) \u3067\u9045\u3044\n\n\/\/ \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u914d\u5217\u306eID\u91cd\u8907\u524a\u9664\nconst items = [\n  { id: 1, name: 'A' },\n  { id: 2, name: 'B' },\n  { id: 1, name: 'A duplicate' }, \/\/ id:1 \u306e\u91cd\u8907\n  { id: 3, name: 'C' },\n];\n\n\/\/ \u30d1\u30bf\u30fc\u30f31: Map \u3092\u4f7f\u3063\u305f\u91cd\u8907\u524a\u9664\uff08\u9ad8\u901f\u30fbO(n)\uff09\nconst uniqueById = [...new Map(items.map(item => [item.id, item])).values()];\n\/\/ [{ id:1, name:'A' }, { id:2, name:'B' }, { id:3, name:'C' }]\n\n\/\/ \u30d1\u30bf\u30fc\u30f32: reduce \u3067\u91cd\u8907\u524a\u9664\nconst uniqueByIdReduce = items.reduce((acc, item) => {\n  if (!acc.find(x => x.id === item.id)) acc.push(item);\n  return acc;\n}, []);\n\/\/ \u203b find \u304c\u5185\u5074\u3067O(n)\u306a\u306e\u3067\u5168\u4f53O(n\u00b2)\u3002Map\u306e\u65b9\u304c\u901f\u3044\n<\/code><\/pre><\/div>\n
\u914d\u5217\u306e\u30bd\u30fc\u30c8\u3068\u5b89\u5b9a\u30bd\u30fc\u30c8<\/h3>\n
JavaScript\u306eArray.prototype.sort\u306fES2019\u4ee5\u964d\u5b89\u5b9a\u30bd\u30fc\u30c8\uff08stable sort\uff09<\/strong>\u304c\u4fdd\u8a3c\u3055\u308c\u305f\u3002\u30bd\u30fc\u30c8\u306e\u66f8\u304d\u65b9\u3068\u6ce8\u610f\u70b9\u3092\u793a\u3059\u3002<\/p>\n
\/\/ \u6570\u5024\u30bd\u30fc\u30c8\uff08\u6bd4\u8f03\u95a2\u6570\u304c\u5fc5\u8981\uff09\nconst nums = [10, 1, 21, 2];\n\n\/\/ \u274c \u30c7\u30d5\u30a9\u30eb\u30c8\u306esort\u306f\u6587\u5b57\u5217\u9806\uff08\u30d0\u30b0\u306e\u5143\uff09\nconsole.log([...nums].sort());\n\/\/ [1, 10, 2, 21] \u2190 \u6587\u5b57\u5217\u3068\u3057\u3066\u6bd4\u8f03\uff01\n\n\/\/ \u2705 \u6bd4\u8f03\u95a2\u6570\u3092\u6e21\u3059\nconsole.log([...nums].sort((a, b) => a - b)); \/\/ \u6607\u9806\n\/\/ [1, 2, 10, 21]\nconsole.log([...nums].sort((a, b) => b - a)); \/\/ \u964d\u9806\n\/\/ [21, 10, 2, 1]\n\n\/\/ \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u914d\u5217\u306e\u30bd\u30fc\u30c8\nconst users = [\n  { name: 'Carol', age: 22 },\n  { name: 'Alice', age: 30 },\n  { name: 'Bob',   age: 22 },\n];\n\n\/\/ age\u3067\u6607\u9806\u30bd\u30fc\u30c8\uff08\u540c\u3058age\u306fname\u9806\u3067\u5b89\u5b9a\u30bd\u30fc\u30c8\uff09\nusers.sort((a, b) => {\n  if (a.age !== b.age) return a.age - b.age;\n  return a.name.localeCompare(b.name); \/\/ \u6587\u5b57\u5217\u6bd4\u8f03\n});\n\/\/ Carol(22) \u2192 Bob(22) \u2192 Alice(30) \u3067\u306f\u306a\u304f\n\/\/ Bob(22) \u2192 Carol(22) \u2192 Alice(30) \u306b\u306a\u308b\uff08name\u6607\u9806\uff09\n\n\/\/ \u65e5\u672c\u8a9e\u6587\u5b57\u5217\u306e\u30bd\u30fc\u30c8\uff08localeCompare\u5fc5\u9808\uff09\nconst items = ['\u6771\u4eac', '\u3042\u3044\u3046', 'ABC', '\u5927\u962a'];\nitems.sort((a, b) => a.localeCompare(b, 'ja'));\n<\/code><\/pre><\/div>\n
\u914d\u5217\u306e\u5206\u5272\u30fb\u7d50\u5408\u30d1\u30bf\u30fc\u30f3<\/h3>\n
\/\/ \u914d\u5217\u3092\u7279\u5b9a\u30b5\u30a4\u30ba\u306e\u30c1\u30e3\u30f3\u30af\u306b\u5206\u5272\nfunction chunkArray(arr, size) {\n  const chunks = [];\n  for (let i = 0; i < arr.length; i += size) {\n    chunks.push(arr.slice(i, i + size));\n  }\n  return chunks;\n}\nconsole.log(chunkArray([1,2,3,4,5,6,7], 3));\n\/\/ [[1,2,3], [4,5,6], [7]]\n\n\/\/ reduce\u3067\u3082\u66f8\u3051\u308b\nconst chunk = (arr, n) =>\n  arr.reduce((acc, _, i) =>\n    i % n === 0 ? [...acc, arr.slice(i, i + n)] : acc, []);\n\n\/\/ 2\u6b21\u5143\u914d\u5217\u3092\u30d5\u30e9\u30c3\u30c8\u5316\nconst matrix = [[1,2],[3,4],[5,6]];\nconsole.log(matrix.flat());        \/\/ [1,2,3,4,5,6]\nconsole.log(matrix.flatMap(x=>x)); \/\/ \u540c\u3058\u7d50\u679c\uff08map+flat\u3092\u4e00\u5ea6\u306b\uff09\n\n\/\/ \u914d\u5217\u306ezip\uff082\u914d\u5217\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\uff09\nconst keys   = ['a', 'b', 'c'];\nconst values = [1, 2, 3];\nconst zipped = keys.map((k, i) => [k, values[i]]);\n\/\/ [['a',1], ['b',2], ['c',3]]\n\n\/\/ Object.fromEntries \u3067\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u5909\u63db\nconst obj = Object.fromEntries(zipped);\n\/\/ { a: 1, b: 2, c: 3 }\n<\/code><\/pre><\/div>\n
\u30a4\u30df\u30e5\u30fc\u30bf\u30d6\u30eb\u64cd\u4f5c\uff08\u5143\u306e\u914d\u5217\u3092\u5909\u66f4\u3057\u306a\u3044\u30d1\u30bf\u30fc\u30f3\uff09<\/h3>\n
React\u3084\u72b6\u614b\u7ba1\u7406\uff08Redux\u7b49\uff09\u3067\u306f\u5143\u306e\u914d\u5217\u3092\u5909\u66f4\u3057\u306a\u3044\u30a4\u30df\u30e5\u30fc\u30bf\u30d6\u30eb\u306a\u64cd\u4f5c<\/span><\/strong>\u304c\u5fc5\u9808\u3060\u3002\u7834\u58ca\u7684\u306a\u30e1\u30bd\u30c3\u30c9\u3068\u975e\u7834\u58ca\u7684\u306a\u30e1\u30bd\u30c3\u30c9\u3092\u6574\u7406\u3059\u308b\u3002<\/p>\n
\/\/ \u2500\u2500\u2500 \u7834\u58ca\u7684\u30e1\u30bd\u30c3\u30c9\uff08\u5143\u306e\u914d\u5217\u3092\u5909\u66f4\u3059\u308b\uff09\u2500\u2500\u2500\nconst arr = [1, 2, 3, 4, 5];\narr.push(6);       \/\/ \u672b\u5c3e\u8ffd\u52a0 \u2192 arr=[1,2,3,4,5,6]\narr.pop();         \/\/ \u672b\u5c3e\u524a\u9664 \u2192 arr=[1,2,3,4,5]\narr.shift();       \/\/ \u5148\u982d\u524a\u9664 \u2192 arr=[2,3,4,5]\narr.unshift(1);    \/\/ \u5148\u982d\u8ffd\u52a0 \u2192 arr=[1,2,3,4,5]\narr.splice(2, 1);  \/\/ \u30a4\u30f3\u30c7\u30c3\u30af\u30b92\u304b\u30891\u4ef6\u524a\u9664 \u2192 arr=[1,2,4,5]\narr.sort();        \/\/ \u30bd\u30fc\u30c8\uff08\u5143\u3092\u5909\u66f4\uff09\narr.reverse();     \/\/ \u9006\u9806\uff08\u5143\u3092\u5909\u66f4\uff09\n\n\/\/ \u2500\u2500\u2500 \u975e\u7834\u58ca\u7684\u306a\u4ee3\u66ff\uff08React\u306a\u3069\u3067\u63a8\u5968\uff09\u2500\u2500\u2500\nconst original = [1, 2, 3, 4, 5];\n\n\/\/ \u672b\u5c3e\u8ffd\u52a0: \u30b9\u30d7\u30ec\u30c3\u30c9\nconst added = [...original, 6]; \/\/ [1,2,3,4,5,6]\n\n\/\/ \u5148\u982d\u8ffd\u52a0\nconst prepended = [0, ...original]; \/\/ [0,1,2,3,4,5]\n\n\/\/ \u7279\u5b9a\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u3092\u524a\u9664\nconst removed = original.filter((_, i) => i !== 2); \/\/ \u30a4\u30f3\u30c7\u30c3\u30af\u30b92\u3092\u9664\u304f\n\/\/ [1,2,4,5]\n\n\/\/ \u7279\u5b9a\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u3092\u66f4\u65b0\nconst updated = original.map((v, i) => i === 2 ? 99 : v);\n\/\/ [1,2,99,4,5]\n\n\/\/ \u7279\u5b9a\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u306b\u633f\u5165\nconst inserted = [\n  ...original.slice(0, 2),\n  99,\n  ...original.slice(2),\n];\n\/\/ [1,2,99,3,4,5]\n\n\/\/ \u30bd\u30fc\u30c8\uff08\u5143\u3092\u5909\u66f4\u3057\u306a\u3044\uff09\nconst sorted = [...original].sort((a, b) => b - a); \/\/ \u964d\u9806\n\/\/ [5,4,3,2,1]\uff08original\u306f\u5909\u308f\u3089\u306a\u3044\uff09\n<\/code><\/pre><\/div>\n
\n
\u3088\u304f\u3042\u308b\u8cea\u554f<\/h2>
\"\u3088\u304f\u3042\u308b\u8cea\u554f\"<\/figure>\n\n
Q. for\u3068forEach\u306f\u3069\u3061\u3089\u3092\u4f7f\u3046\u3079\u304d\u3067\u3059\u304b\uff1f<\/h3>\n
\u4e00\u822c\u7684\u306aWeb\u30a2\u30d7\u30ea\u958b\u767a\u3067\u306f\u53ef\u8aad\u6027\u304c\u9ad8\u3044forEach\u3084for…of<\/strong>\u3092\u63a8\u5968\u3059\u308b\u3002\u901f\u5ea6\u5dee\u306f100\u4e07\u4ef6\u3067\u6570\u30df\u30ea\u79d2\u7a0b\u5ea6\u3067\u3042\u308a\u3001\u5b9f\u7528\u4e0a\u306e\u554f\u984c\u306b\u306f\u307b\u3068\u3093\u3069\u306a\u3089\u306a\u3044\u3002\u30b2\u30fc\u30e0\u30a8\u30f3\u30b8\u30f3\u3084\u97f3\u58f0\u51e6\u7406\u306a\u3069\u3001\u6bce\u30d5\u30ec\u30fc\u30e0\u6570\u4e07\u56de\u4ee5\u4e0a\u30eb\u30fc\u30d7\u304c\u8d70\u308b\u5834\u9762\u3067\u306ffor\u3084while\u3092\u691c\u8a0e\u3057\u3088\u3046\u3002<\/p>\n
Q. map\u3068forEach\u306f\u3069\u3061\u3089\u3092\u4f7f\u3048\u3070\u3044\u3044\u3067\u3059\u304b\uff1f<\/h3>\n
\u5224\u65ad\u306f\u7c21\u5358\u3060\u3002\u5909\u63db\u3057\u305f\u65b0\u3057\u3044\u914d\u5217\u304c\u5fc5\u8981 \u2192 map\u3001\u526f\u4f5c\u7528\u3060\u3051\u8d77\u3053\u3057\u305f\u3044 \u2192 forEach<\/strong>\u3002\u3053\u306e\u4e8c\u629e\u3067\u8ff7\u3046\u3053\u3068\u306f\u306a\u304f\u306a\u308b\u3002<\/p>\n
Q. reduce\u304c\u96e3\u3057\u304f\u3066\u4f7f\u3044\u3053\u306a\u305b\u307e\u305b\u3093\u3002<\/h3>\n
\u6700\u521d\u306f\u300c\u5408\u8a08\u3092\u6c42\u3081\u308b\u300d\u3060\u3051\u304b\u3089\u59cb\u3081\u3088\u3046\u3002reduce((acc, val) => acc + val, 0)<\/code>\u3092\u624b\u3067\u66f8\u3051\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u3089\u3001\u6b21\u306b\u300c\u30b0\u30eb\u30fc\u30d7\u5316\u300d\u306b\u6311\u6226\u3059\u308b\u3002\u7121\u7406\u306breduce\u3067\u5168\u3066\u3092\u66f8\u304f\u5fc5\u8981\u306f\u306a\u304f\u3001for\u30eb\u30fc\u30d7\u3084map\u3067\u8aad\u307f\u3084\u3059\u304f\u66f8\u3051\u308b\u306a\u3089\u3001\u305d\u3061\u3089\u3092\u9078\u3076\u306e\u304c\u6b63\u89e3\u3060\u3002<\/p>\n
Q. for…in\u3067\u914d\u5217\u3092\u30eb\u30fc\u30d7\u3059\u308b\u306e\u306f\u306a\u305c\u3044\u3051\u306a\u3044\u306e\uff1f<\/h3>\n
for...in<\/code>\u306f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30ad\u30fc\u5217\u6319\u7528\u3067\u3001\u30d7\u30ed\u30c8\u30bf\u30a4\u30d7\u30c1\u30a7\u30fc\u30f3\u4e0a\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3082\u62fe\u3046\u53ef\u80fd\u6027\u304c\u3042\u308b\u3002\u914d\u5217\u306b\u306ffor...of<\/code>\u304bforEach<\/code>\u3092\u4f7f\u304a\u3046\u3002<\/p>\n
Q. \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u5dee\u306f\u30d6\u30e9\u30a6\u30b6\u3068Node.js\u3067\u9055\u3044\u307e\u3059\u304b\uff1f<\/h3>\n
\u306f\u3044\u3002Chrome\u306eV8\u30a8\u30f3\u30b8\u30f3\u306fNode.js\u3068\u540c\u3058\u30a8\u30f3\u30b8\u30f3\u306a\u306e\u3067\u50be\u5411\u306f\u8fd1\u3044\u304c\u3001Firefox\uff08SpiderMonkey\uff09\u3084Safari\uff08JavaScriptCore\uff09\u3067\u306f\u6319\u52d5\u304c\u7570\u306a\u308b\u3002\u30af\u30ea\u30c6\u30a3\u30ab\u30eb\u306a\u51e6\u7406\u306f\u5b9f\u969b\u306b\u52d5\u304b\u3059\u74b0\u5883\u3067\u30d9\u30f3\u30c1\u30de\u30fc\u30af<\/strong>\u3059\u308b\u3053\u3068\u3092\u5f37\u304f\u52e7\u3081\u308b\u3002<\/p>\n
Q. some\u30fbevery\u30fbflatMap \u306f\u3069\u3046\u3044\u3046\u6642\u306b\u4f7f\u3044\u307e\u3059\u304b\uff1f<\/h3>\n
\/\/ some: \u6761\u4ef6\u3092\u6e80\u305f\u3059\u8981\u7d20\u304c\u300c1\u3064\u3067\u3082\u300d\u3042\u308b\u304b\nconst hasAdult = [15, 18, 20].some(age => age >= 18); \/\/ true\n\n\/\/ every: \u300c\u5168\u3066\u300d\u306e\u8981\u7d20\u304c\u6761\u4ef6\u3092\u6e80\u305f\u3059\u304b\nconst allAdult = [18, 20, 25].every(age => age >= 18); \/\/ true\n\n\/\/ flatMap: map + flat \u3092\u4e00\u5ea6\u306b\nconst sentences = ['Hello World', 'foo bar'];\nconst words = sentences.flatMap(s => s.split(' '));\nconsole.log(words); \/\/ ['Hello', 'World', 'foo', 'bar']\n<\/code><\/pre><\/div>\n
\n
\u307e\u3068\u3081<\/h2>
\"\u307e\u3068\u3081\"<\/figure>\n\n
\u914d\u5217\u306e\u7e70\u308a\u8fd4\u3057\u306f\u300c\u76ee\u7684\u300d\u3067\u624b\u6cd5\u3092\u9078\u3079\u5909\u63db \u2192 map\u3001\u526f\u4f5c\u7528 \u2192 forEach\u3001\u96c6\u7d04 \u2192 reduce\u3001\u6761\u4ef6\u7d5e\u308a \u2192 filter\u901f\u5ea6\u5dee\u306f100\u4e07\u4ef6\u3067\u6570ms\u30ec\u30d9\u30eb\u3002\u666e\u6bb5\u306f\u53ef\u8aad\u6027\u512a\u5148\u3067OK<\/strong><\/p>\n
JavaScript\u306e\u914d\u5217\u51e6\u7406\u3092\u6b63\u3057\u304f\u4f7f\u3044\u5206\u3051\u3089\u308c\u308b\u3068\u3001\u30b3\u30fc\u30c9\u306e\u610f\u56f3\u304c\u660e\u78ba\u306b\u306a\u308a\u3001\u30c1\u30fc\u30e0\u958b\u767a\u3067\u3082\u30d0\u30b0\u304c\u6e1b\u308b\u3002\u307e\u305a\u306f\u4eca\u65e5\u306e\u30b3\u30fc\u30c9\u3067\u300cmap\u3092\u526f\u4f5c\u7528\u306b\u4f7f\u3063\u3066\u3044\u306a\u3044\u304b\u300d\u3060\u3051\u30c1\u30a7\u30c3\u30af\u3057\u3066\u307f\u3088\u3046\u3002<\/span><\/strong><\/p>\n
\n\n
\u6307\u6a19<\/th>\u5b9f\u7e3e<\/th>\u8abf\u67fb\u5bfe\u8c61\u30fb\u671f\u9593<\/th><\/tr><\/thead>\n
\u6848\u4ef6\u7372\u5f97\u7387<\/td>97.9%<\/td>\u53d7\u8b1b\u751f\u30a2\u30f3\u30b1\u30fc\u30c8\uff0f2025\u5e741\u6708\u301c12\u6708<\/td><\/tr>\n
\u53d7\u8b1b\u6599\u91d1\u5b8c\u6e08\u7387<\/td>84.7%<\/td>\u53d7\u8b1b\u751f\u30a2\u30f3\u30b1\u30fc\u30c8\uff0f2025\u5e746\u6708\u301c12\u6708<\/td><\/tr>\n
\u904b\u55b6\u4f53\u5236<\/td>Web\u5236\u4f5c\u4f1a\u793e\u304c\u76f4\u63a5\u904b\u55b6<\/td>\u73fe\u5f79\u5236\u4f5c\u4f1a\u793e\u304c\u76f4\u63a5\u6307\u5c0e<\/td><\/tr>\n<\/tbody>\n<\/table><\/figure>\n
\u203b\u53d7\u8b1b\u751f\u30a2\u30f3\u30b1\u30fc\u30c8\u306b\u57fa\u3065\u304f\u81ea\u793e\u8abf\u67fb\u7d50\u679c\uff082025\u5e741\u6708\u301c2025\u5e7412\u6708\u5b9f\u65bd\uff09\u203b\u53d7\u8b1b\u751f\u30a2\u30f3\u30b1\u30fc\u30c8\u306b\u57fa\u3065\u304f\u81ea\u793e\u8abf\u67fb\u7d50\u679c\uff082025\u5e746\u6708\u301c2025\u5e7412\u6708\u5b9f\u65bd\uff09<\/small><\/p>\n
\n\n\n
\u53c2\u8003\u30ea\u30f3\u30af<\/h2>
\"\u53c2\u8003\u30ea\u30f3\u30af\"<\/figure>\n\n\n\n