JavaScript配列のreduceメソッドの使い方

JavaScript

2021.01.25

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#’

のように続いていく。