javascriptで配列の重複するものをカウントして、結果を出力したい！！！

javascriptで配列の重複するものをカウントして、結果を出力したいのですが、やり方がわからず困ってます（ ; ; ）

例えば

let array1 = [ 100, 200, 200, 300, 300 400, 400, 400 ]

の配列があったとします。

この配列に

関数x

を実行すると、

100×1, 200×2, 300×2, 400×3

のように結果を出力したいです。

自分でも調べて試してみたのですが、なかなかうまくいきませんでした。
どのようなコードを書けばいいのかご教授いただけますと助かります。

よろしくお願いします。

行動規範の内容に同意します

回答2件

javascript
1<div id="view"></div>
2<script>
3const a=[100,200,200,300,300,400,400,400];
4[...new Set(a)].map(x=>[x,a.filter(y=>x==y).length]).forEach(x=>view.appendChild(Object.assign(document.createElement('span'),{innerHTML:`${x[0]}&times;${x[1]}`})));
5</script>

投稿2022/01/17 00:40

yambejp

総合スコア114784

ベストアンサー

javascript
1const array1 = [ 100, 200, 200, 300, 300, 400, 400, 400 ]
2let result = {}
3for (let v of array1) {
4    if (!(v in result)) result[v] = 0
5    result[v]++
6}
7console.log(result)

--- 追記 ---

javascript
1for (let k in result) {
2    console.log("<span>" + k + "×" + result[k] + "</span>")
3}

--- 追記 ---

html
1<html>
2<head>
3</head>
4<body>
5<div id="fuga"></div>
6<script>
7const array1 = [ 100, 200, 200, 300, 300, 400, 400, 400 ]
8let result = {}
9for (let v of array1) {
10    if (!(v in result)) result[v] = 0
11    result[v]++
12}
13let str = ""
14for (let k in result) {
15    str += "<span>" + k + "×" + result[k] + "</span><br>"
16}
17document.getElementById("fuga").innerHTML = str
18</script>
19</body>
20</html>

※REACTは分かりません。

投稿2022/01/16 12:27

編集2022/01/17 20:55

takasima20

総合スコア7458

lep-kop

2022/01/16 15:36

回答ありがとうございます！そのconsoleで出力したresultをreactでhtml要素として出力するにはどうすればいいでしょうか？現在、console.log(result)の結果は { 100:1, 200:2, 300:2, 400:3 } になっていると思います。これを 100×1 200×2 300×2 400×3 のような形で出力したいです。何卒、よろしくお願いします。

lep-kop

2022/01/17 13:56

何度もすみません。そのresultをconsoleではなくブラウザで見れるようにhtmlで出力したいです。一応、自分でもusestateを作り、resultをstateにセットした後、mapを使って出力できるか試してみたのですが、mapではresultがオブジェクトなため(?)実装できませんでした。他にやり方はございますか？

lep-kop

2022/01/22 02:40

ありがとうございます！なんとかできました！！