JavaScript | 配列、多次元配列から重複する値を削除する方法

2021-06-282021-07-18JavaScript 配列,JavaScript

JavaScriptで配列、多次元配列から重複する値を削除する方法を紹介しています。

配列から重複する値を削除する

JavaScriptのSet()オブジェクトを利用して配列から重複する値を削除するサンプルコードです。

Set()で返される値はオブジェクト型になりますので、Array.from()でオブジェクト型を配列に変換しています。

let array = [10, 10, 20, 30];

let new_array = Array.from(new Set(array));

console.log(new_array);
//[10, 20]

多次元配列から重複する配列を削除する

JavaScriptのSet()オブジェクトを利用して配列から重複する配列を削除するサンプルコードです。

多次元配列から重複する値を削除する方法1

filter()を使って多次元配列から重複する配列を削除する方法

const foods = [
	["apple", "pine", "banana", "orange"],
	["apple", "pine", "banana", "orange"],
	["carrot", "broccoli", "celery", "lettuce"],
	["carrot", "broccoli", "celery", "lettuce"],
	["coffee", "tea", "wine", "beer"],
	["apple", "pine", "banana", "orange"]
];

let new_array = foods.filter(function (i) {
	if (!this[i[1]]) {
		return this[i[1]] = true;
	}
});

アロー関数バージョンです。

const foods = [
	["apple", "pine", "banana", "orange"],
	["apple", "pine", "banana", "orange"],
	["carrot", "broccoli", "celery", "lettuce"],
	["carrot", "broccoli", "celery", "lettuce"],
	["coffee", "tea", "wine", "beer"],
	["apple", "pine", "banana", "orange"]
];

let new_array = foods.filter(i => {
	if (!this[i[1]]) {
		return this[i[1]] = true;
	}
});

参考：javascript – Remove duplicates from a multidimensional array – Stack Overflow

多次元配列から重複する値を削除する方法2

別の方法でスプレッド構文で配列をマージして、一度JSONにしてｍap()を使う方法。

const foods = [
	["apple", "pine", "banana", "orange"],
	["apple", "pine", "banana", "orange"],
	["carrot", "broccoli", "celery", "lettuce"],
	["carrot", "broccoli", "celery", "lettuce"],
	["coffee", "tea", "wine", "beer"],
	["apple", "pine", "banana", "orange"]
];

let new_array = [...new Set(foods.map(JSON.stringify))].map(JSON.parse);

参考：JavaScript – 多次元配列の重複削除【JavaScript】｜teratail