JavaScriptの配列から1回だけしか出現しない重複しないDataだけの配列を作成する方法

JavaScript_OneTimeList

こんにちはフロントエンドエンジニアのまさにょんです!

今回は、JavaScriptの配列から1回だけしか出現しない重複しないDataだけの配列を作成する方法について解説していきます。

配列から1回だけしか出現しない(重複しない)Dataだけの配列を作成する

配列から1回だけしか出現しない(重複しない)Dataだけの配列を作成する方法について解説します。

単純な配列からの重複削除とは、また別の話なので、ただ重複するDataを削除したい場合は、こちらをご覧ください。

1回だけ出現する数値だけを持つ配列を作成する

次のSampleCodeでは、数値の配列があり、そこから1回だけ出現する数値だけを持つ配列を作成します。

// 次のJavaScriptの配列の中から、1回だけ出現する数値だけを持つ配列を作ります。

const numList = [1, 2, 2, 3, 4, 4, 5];
const oneTimeList = [];
const countObj = {};

// 1. 各要素の出現回数を数える
numList.forEach((num) => {
  // 1-1. 初出現なら、0 + 1, それ以外は、count数 + 1 
  countObj[num] = (countObj[num] || 0) + 1;
});

// 2. 一回だけ出現する要素だけを取り出す
for (const num in countObj) {

  // 2-1. 数値のcountが、1のものだけ追加する
  if (countObj[num] === 1) {
    oneTimeList.push(parseInt(num));
  }
}
console.log(oneTimeList); // [1, 3, 5]

1つのグループにしか参加していないユーザーだけのListを作成する

次のSampleCodeでは、2つのグループがあり、そこから1つのグループにしか参加していないユーザーだけのListを作成します。

最終的に、SampleCodeだと、1つのグループにしか参加していないユーザーは、4人になるはずです。

// 2つのグループがあり、そこから1つのグループにしか参加していないユーザーだけのListを作成する

// 1. 名前と部署の名簿情報List
const groupList = [
  {id: 1, participant: 'ロボたま', affiliation: 'エンジニア'},
  {id: 2, participant: 'まりたま', affiliation: 'エンジニア'},
  {id: 3, participant: '白桃', affiliation: '営業部'},
  {id: 4, participant: 'ももちゃん', affiliation: '営業部'},
  {id: 5, participant: 'まさぴょん', affiliation: '営業部'},
  {id: 6, participant: 'まりぴょん', affiliation: 'デザイナー'},
  {id: 7, participant: 'ハム太郎', affiliation: 'エンジニア'},
  {id: 8, participant: 'ロボ太郎', affiliation: 'デザイナー'},
  {id: 9, participant: 'まり太郎', affiliation: 'デザイナー'},
  {id: 10, participant: 'ぷる玉', affiliation: '人事部'},
  {id: 11, participant: 'ぷるぷる玉', affiliation: '人事部'},
  {id: 12, participant: 'ロボ玉試作1号機', affiliation: 'エンジニア'},
  {id: 13, participant: 'ロボ玉試作2号機', affiliation: 'デザイナー'},
  {id: 14, participant: 'ロボ玉試作1号機', affiliation: 'ロボ玉開発部'},
];

const groupList2 = [
  {id: 2, participant: 'まりたま', affiliation: 'エンジニア'},
  {id: 5, participant: 'まさぴょん', affiliation: '営業部'},
  {id: 6, participant: 'まりぴょん', affiliation: 'デザイナー'},
  {id: 7, participant: 'ハム太郎', affiliation: 'エンジニア'},
  {id: 8, participant: 'ロボ太郎', affiliation: 'デザイナー'},
  {id: 9, participant: 'まり太郎', affiliation: 'デザイナー'},
  {id: 10, participant: 'ぷる玉', affiliation: '人事部'},
  {id: 12, participant: 'ロボ玉試作1号機', affiliation: 'エンジニア'},
  {id: 13, participant: 'ロボ玉試作2号機', affiliation: 'デザイナー'},
  {id: 14, participant: 'ロボ玉試作1号機', affiliation: 'ロボ玉開発部'},
];


// 1回しか出現しないDataだけの配列を作成する => 新規で作成された分だけを insertする
const oneTimeData = {};
[...groupList, ...groupList2].forEach((item) => {

  // keyがすでに、登録してあったら false にする
  if (oneTimeData.hasOwnProperty(`${item.id}`)) {
    oneTimeData[item.id] = false;
  } else {
    // 1回目は、trueで、Setする
    oneTimeData[item.id] = true;
  }
});
console.log('oneTimeData', oneTimeData);


// 既存のDataSetと、新しいDataSetをMergeして、さらに重複を削除する
const uniqeMemberList = [...groupList, ...groupList2].filter((item, index, array) => {
  return array.findIndex((element) => {
    return element.id === item.id;
  }) === index;
});
console.log('uniqeMemberList', uniqeMemberList);

// stock_id情報が、trueで登録されているものだけの配列を作成する
const oneTimeMemberList = uniqeMemberList.filter(item => oneTimeData[item.id]);
console.log('oneTimeMemberList', oneTimeMemberList);

JavaScript書籍 Ver. 中級-上級者向け

JavaScript書籍 Ver. 初級者向け

Twitterやってます!Follow Me!

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!

最近の投稿