JavaScript配列のreduceメソッドの使い方をメモしておく。
JavaScriptでブラウザに以下のような表示をしたいとする。

解法の一つとしてreduceメソッドを使うことができる。
※簡略化のためscriptタグ内に記述しておく。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>プログラミング言語</title>
</head>
<body>
<ul id="p-lang"></ul>
<script>
'use strict';
const pLang = ['C', 'C++', 'JavaScript', 'C#', 'PHP', 'Python', 'Ruby'];
const pList = pLang.reduce(function(accu, curr){
return `${accu}<li>${curr}</li>`;
}, "");
document.querySelector('#p-lang').innerHTML = pList;
</script>
</body>
</html>
この例ではreduceメソッドの第一引数に関数を第二引数にaccu(アキュムレータ)の初期値として空文字列を渡している。reduceに渡す関数の第二引数currには配列の要素が渡されてくる。そしてreduceに渡す関数の戻り値が次のaccuとなる。
accu –> “” curr –> ‘C’
accu –> “<li>C</li>” curr –> ‘C++’
accu –> “<li>C</li><li>C++</li>” curr –> ‘JavaScript’
accu –> “<li>C</li><li>C++</li><li>JavaScript</li>” curr –> ‘C#’
のように続いていく。
コメント