JavaScript配列から一意の値（重複なし）を取得する方法
JavaScriptの配列に含まれる重複した値を取り除き、一意の値（ユニークな値）だけを取得したい場合は、Setオブジェクトを使うのが最もシンプルで効率的な方法です。
Setは同じ値を1つしか格納できないデータ構造のため、配列をnew Set()に渡すだけで自動的に重複が排除されます。その後、スプレッド構文（[...set]）を使えば、簡単に元の配列形式へ戻すことができます。
サンプルコード
以下は、JavaScriptの配列からすべての一意の値を取得する実際のコード例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,
.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.result {
color: red;
}
</style>
</head>
<body>
<h1>配列の一意の値を取得する</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると、配列から重複した値が削除されます</h3>
<script>
let resultEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
let arr = [2, 3, 4, 2, 3, 4, "A", "A", "B", "B"];
sampleEle.innerHTML = "arr = " + arr;
document.querySelector(".Btn").addEventListener("click", () => {
let set1 = new Set(arr);
resultEle.innerHTML = "arr = " + [...set1] + "<br>";
});
</script>
</body>
</html>
実行結果
ページを読み込むと、元の配列が表示されます。
「ここをクリック」ボタンを押すと、Setによって重複が除去され、次のように一意の値のみが出力されます。
ポイント解説
new Set(arr): 配列からSetオブジェクトを作成します。この時点で数値・文字列を問わず重複が自動的に削除されます。[...set1]: スプレッド構文を使って、Setを再び通常の配列に変換しています。- ES6以降の環境で動作するため、モダンブラウザやNode.jsであれば追加のライブラリ不要で利用できます。
-
JavaScriptで配列を空にする方法まとめ【3つの手法と使い分けのポイント】
JavaScriptで配列を空にする（初期化する）方法は複数あります。それぞれの手法には特徴や注意点があり、状況に応じて適切に使い分けることが重要です。この記事では、代表的な3つの方法と、それぞれのメリット・デメリットを詳しく解説します。まず、以下のような配列があると仮定します。let arr = [1, test, {}, 123.43];方法1：新しい空の配列で置き換えるarr = [];変数arrに新しい空の配列を再代入する方法です。最もシンプルかつ高速な手法として知られています。ただし注意点として、元の配列への参照がプログラムの他の場所に存在する場合、それらの参照は自動的に更新されませ
-
JavaScriptのArray.values()メソッドとは？使い方とサンプルコードを徹底解説
JavaScriptのArray.values()メソッドとは？ JavaScriptのArray.values()メソッドは、対象の配列に含まれるすべての値を格納したイテレーターオブジェクトを返します。ES2015（ES6）以降で利用可能なこのメソッドは、for...ofループやスプレッド構文（[...arr]）と組み合わせることで、配列の各要素を効率的に取り出せます。 なお、keys()やentries()がインデックス情報も一緒に返すのに対し、values()は純粋に「値」だけを順番に提供する点が大きな特徴です。 基本構文 arr.values() 引数は不要で、戻り値として新しいArr