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

作成日 2022.10.31
javascript
javascript

javascriptで、配列内のユニークな要素の数をカウントするサンプルコードを記述してます。方法は複数ありますがユニークな値しかもたない「set」を使用するのが一番シンプルかと思われます。

OS windows11 pro 64bit
ブラウザ chrome 107.0.5304.63

1. ユニークな要素の数をカウント
2. サンプルコード

ユニークな要素の数をカウント

ユニークな要素の数をカウントする簡単な方法は、一意の値しかもたない「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 );

他には、下記の方法を使用すればカウントすることができると思います。

配列から重複を除外する5つの方法

サンプルコード

以下は、
「実行」ボタンをクリックすると、ランダムに生成した配列のユニークな要素をカウントして表示する
サンプルコードとなります。

※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>

ユニークな値がカウントされて表示されていることが確認できます。