こんにちはフロントエンドエンジニアのまさにょんです!
今回は、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!
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!