javascript 配列に重複した値を追加できないようにする

作成日 2022.10.30
javascript
javascript

javascriptで、配列に重複した値を追加できないようにするサンプルコードを記述してます。方法は「indexOf」や「includes」を使用して存在チェックを行ったあとで追加するという方法があります。パフォーマンスは「includes」を使用した方が良さそうです。

OS windows11 pro 64bit
ブラウザ chrome 107.0.5304.63

Javascript サンプル集はこちら

1. 重複した値を追加させない
2. サンプルコード

重複した値を追加させない

重複した値を追加させない方法は、「indexOf」などで存在チェックしてから追加します。

const arr = ['aaa', 'bbb', 'ccc'];

let str = 'aaa';

// indexOfは値が存在しない場合は「-1」が返ります
if (arr.indexOf(str) === -1) arr.push(str);

console.log(arr); // ['aaa', 'bbb', 'ccc']

str = 'aab';

if (arr.indexOf(str) === -1) arr.push(str);

console.log(arr); // ['aaa', 'bbb', 'ccc', 'aab']

「null」にも使用できます。

const arr = ['aaa', 'bbb', 'ccc', null];

let str = null;

// indexOfは値が存在しない場合は「-1」が返ります
if (arr.indexOf(str) === -1) arr.push(str);

console.log(arr); // ['aaa', 'bbb', 'ccc', null]

他には、「includes」を使用することもできます。

const arr = ['aaa', 'bbb', 'ccc', null];

let str = null;

// includesは値が存在してる場合は「true」が返るので「!」を使用します
if (!arr.includes(str)) arr.push(str);

console.log(arr); // ['aaa', 'bbb', 'ccc', null]

str = 'ddd';

if (!arr.includes(str)) arr.push(str);

console.log(arr); // ['aaa', 'bbb', 'ccc', null, 'ddd']

配列内に少なくとも1つが含まれていれば「true」が返る「some」と「includes」を使用する方法もありますが、

const arr = ['aaa', 'bbb', 'ccc'];

let str = 'aaa';

if (!arr.some(function(v){ return v.includes(str)})) arr.push(str);

console.log(arr); // ['aaa', 'bbb', 'ccc']

str = 'ddd';

if (!arr.some(function(v){ return v.includes(str)})) arr.push(str);

console.log(arr); // ['aaa', 'bbb', 'ccc', 'ddd']

こちらは、配列内に「null」が含まれるとエラーとなります。

const arr = ['aaa', 'bbb', 'ccc', null];

let str = 'aaa';

// Uncaught TypeError: Cannot read properties of null (reading 'includes')
if (!arr.some(function(v){ return v.includes(str)})) arr.push(str);

console.log(arr);

パフォーマンスは「includes」を使用したものが一番いいです。

また、重複した値を許さない「set」に変換してから値を追加する方法もあります。

const arr = ['aaa', 'bbb', 'ccc', null];

let str = null;

// setに変換
let s = new Set(arr);
s.add(str);

// 再度配列に戻す
console.log([...s]); // ['aaa', 'bbb', 'ccc', null]

str = 'ddd';

s = new Set(arr);
s.add(str);

console.log([...s]); // ['aaa', 'bbb', 'ccc', null, 'ddd']

サンプルコード

以下は、
「実行」ボタンをクリックすると、テキストフォームに入力した値が配列に存在しない場合は追加、存在する場合は何もせずにそのままにする
サンプルコードとなります。

※cssには「tailwind」を使用してます。関数はアロー関数を使用してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

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

<body>
  <div class="container text-center w-25" style="margin-top:200px">

    <h2><span class="badge badge-success">結果</span></h2>
    <ul id="txt1" class="list-group"></ul>

    <form>
      <div class="form-group">
        <input type="text" id="setData">
      </div>
    </form>

    <button id="btn" type="button" class="btn btn-success mt-1">
      実行
    </button>

  </div>
<script>

  //フロントに表示する関数
  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('');

  }

  // 配列を用意
  let arr = ['aaa', 'bbb', 'ccc'];

  window.onload = () => {

    // クリックイベントを登録
    btn.onclick = () => {

      if(!arr.includes(setData.value)) arr.push(setData.value);

      // arr表示
      disp(arr, "txt1");

    };
  }

</script>


</body>

</html>

存在しない場合のみ追加されていることが確認できます。