javascript 配列内のユニークな要素の数をカウントする
- 作成日 2022.10.31
- javascript
- javascript

javascriptで、配列内のユニークな要素の数をカウントするサンプルコードを記述してます。方法は複数ありますがユニークな値しかもたない「set」を使用するのが一番シンプルかと思われます。
- OS windows11 pro 64bit
- ブラウザ chrome 107.0.5304.63
ユニークな要素の数をカウント
ユニークな要素の数をカウントする簡単な方法は、一意の値しかもたない「set」に変換した後にカウントします。
// ユニークな要素は'aaa', 'bbb', 'ccc'の3つ
const arr = ['aaa', 'bbb', 'ccc', 'ccc', 'bbb'];
const uniq = new Set(arr).size;
console.log(uniq); // 3
「filter」を使用して重複を除外した後に「length」でカウントする方法もあります。
const arr = ['aaa', 'bbb', 'ccc', 'ccc', 'bbb'];
const result = arr.filter( function( x, i, s ) {
return s.indexOf( x ) === i
}).length;
console.log( result );
他には、下記の方法を使用すればカウントすることができると思います。
サンプルコード
以下は、
「実行」ボタンをクリックすると、ランダムに生成した配列のユニークな要素をカウントして表示する
サンプルコードとなります。
※cssには「tailwind」を使用してます。関数はアロー関数を使用してます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mebeeサンプル</title>
<!-- MDB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>
<style>
.main {
margin: 0 auto;
margin-top: 200px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 30px;
}
</style>
<script>
const radarr = (len) => {
//ランダムな9までの配列を生成
let arr = [];
let num = 10;
let length = len;
for (let i = 0; i < length; i++) {
arr.push(Math.floor(Math.random() * num));
}
return arr;
}
//フロントに表示する関数
const disp = (arr, id) => {
let text = [];
// for ofを使用
for (let item of arr) {
text.push('<li class="list-group-item">' + item + '</li>');
}
//innerHTMLを使用して表示
document.getElementById(id).innerHTML = text.join('');
}
window.onload = () => {
// クリックイベントを登録
btn.onclick = () => {
// ランダムな5つの値がある配列を生成
let arr = radarr(5);
// arr1表示
disp(arr, "txt1");
// 結果表示
document.getElementsByClassName("badge")[1].textContent = new Set(arr).size;
};
}
</script>
<body>
<div class="main">
<h2 class="badge badge-success">配列を生成</h2>
<ul id="txt1" class="list-group"></ul>
<h2 class="badge badge-success">結果</h2>
<button id="btn" type="button" class="btn btn-raised btn-danger">
実行
</button>
</div>
</body>
</html>
ユニークな値がカウントされて表示されていることが確認できます。

-
前の記事
phpMyFAQ インストール時に「The following extensions are missing! Please enable the PHP extension(s) in php.ini.」が発生した場合の対処法 2022.10.30
-
次の記事
javascript 区切り文字を指定して文字列を分割する 2022.10.31
コメントを書く