【JavaScript】配列から重複を削除する方法 | filterメソッドとindexOfメソッド

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

今回は、JavaScriptで配列から重複を削除する方法を解説します。

いくつか方法はありますが、今回は Array.prototype.filter() と Array.prototype.indexOf() を活用した配列の重複valueを削除する方法を解説していきます。

Array.prototype.filter() と Array.prototype.indexOf() のどちらも以前に記事で解説しています。

気になる方は、そちらの記事もCheckしてみてください！

【JavaScript】mapメソッドとfilterメソッドの違いと使い方・使い分け方 | 配列メソッド

【 mapメソッドと filterメソッドの違いと使い方・使い分け方】

【JavaScript入門】indexOf()とfindIndex()の違いは？ | 配列のindex検索

【 indexOf() と findIndex() の違いは？】

1 JavaScript の配列から重複を削除する方法 Ver. filter() & indexOf
2 より実践的なSample-Code
3 JavaScript書籍 Ver. 中級-上級者向け
4 JavaScript書籍 Ver. 初級者向け
5 最近の投稿

JavaScript の配列から重複を削除する方法 Ver. filter() & indexOf

JavaScript の配列から重複を削除するために、

まずは filter() で条件で絞り込んだ配列を作りますが、その条件文で indexOf() が活躍します。

indexOf() は、見つかった「最初」の配列要素のindex番号を返すメソッドです。

なので、filter をかけている配列に対して、indexOf() をかけて「最初」に見つかったvalueだけで絞り込んでいる分けです

// < JavaScript の配列から重複を削除する方法 Ver. filter() & indexOf >

const animalList = [ 'ロボ玉', '白桃', 'ももちゃん', 'ロボ玉'];

// 1. filter() で、条件で絞り込んだ配列を作る
// => 今回は、重複したvalueのない Primary-Array
const primaryAnimalList = animalList.filter(animal, index => {

    // 2. indexOf() は、見つかった「最初」の配列要素のindex番号を返す。
    return animalList.indexOf(animal) === index;
});

より実践的なSample-Code

より実践的なSample-Codeも掲載しておきます！ぜひ活用してみてください。

// < より実践的なSample-Code >

const projectList = [
    { value: 'ロボ玉試作1号機', group_name: 'ロボ玉組' },
    { value: '白桃', group_name: null },
    { value: 'ロボ玉試作2号機', group_name: 'ロボ玉組' },
    { value: 'ももちゃん', group_name: 'ロボ玉組' },
    { value: 'ロボ玉試作3号機', group_name: null },
];


// 1. group_name だけを抽出する！
const robotamaFilter = projectList.filter(project => project.group_name).map(groupExistProject => groupExistProject.group_name);
console.log({robotamaFilter});
// robotamaFilter: (3) ['ロボ玉組', 'ロボ玉組', 'ロボ玉組']


// 2. 配列から重複を削除する => Array.prototype.filter() の活用

const primaryGroupList = robotamaFilter.filter( (group, index) => {
    return robotamaFilter.indexOf(group) === index;
} );

console.log({primaryGroupList});
// primaryGroupList: ['ロボ玉組']


// 3. 新しい形に変換していく！
const submitList = primaryGroupList.map(group => ( {value: group, robotamaFlag: true} ));

console.log({submitList});
// submitList: Array(1)
    // 0: {value: 'ロボ玉組', robotamaFlag: true}
    // length: 1