【Javascript】Setについて

初めに

setについて学習した内容のoutput用記事です。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。

setとは

配列や文字列の重複する値を排除し、ユニークな値だけを格納することができるオブジェクト

使ってみる

重複する値が存在する配列があった場合、配列の値からユニークな値だけを抽出することができます。

//配列の場合
const foods = new Set([
        "hamburger",
        "potato",
        "potato",
        "chicken",
        "hamburger",
        "chicken",
]);

console.log(foods);
//Set(3) {"hamburger", "potato", "chicken"}

このようにpotatoやchicken,hamburgerは同じ値が２個ずつありますが、setを使うとそれぞれ一つだけの値が残ります。

//文字列の場合
      const name = new Set("potato");
      console.log(name);

//Set(4) {"p", "o", "t", "a"}

setの中にある要素の数はlenghtメソッドではなく、sizeを使います。

//要素の数を調べる

console.log(foods.length);
//undefined

console.log(foods.size);
//3

setに値があるかどうかを調べることもできます。これも配列とは似ていますが、includesメソッドを使うとエラーが出てしまいます。setにはhasメソッドが用意されています。

//要素が存在するかどうか調べる

console.log(foods.includes("hamburger"));
//エラーが出る

console.log(foods.has("hamburger"));
//true

addメソッドを使えばsetに新しい要素を追加することもできます。ただ、同じ要素を2回追加しようとしても1つの値とかカウントされません。

//要素の追加

foods.add("pizza");
foods.add("pizza");

console.log(foods);
//Set(4) {"hamburger", "potato", "chicken", "pizza"}

deleteメソッドでsetの要素を簡単に削除できます。

//要素の削除

foods.delete("pizza");

console.log(foods);
//Set(3) {"hamburger", "potato", "chicken"}
      
const { a, b, c } = foods;

配列ではないので、次のように添字を使って削除することはできません。

console.log(foods.delete[0]);
//undefined

setはユニークな値を残し、その中にある値が存在するかどうかを調べることに向いています。データを取り出す場合にはsetではなく配列を使うべきです。
clearメソッドでsetの中身を全て削除することもできます。

//要素をすべて削除
foods.clear();

console.log(foods);
//Set(0) {}

setはiterable（反復可能）なので、for of文を使うこともできます。

//for of文を使って要素を個別に表示する
for (const food of foods) console.log(food);

配列からユニークな値を抽出し、スプレッド構文を使ってさらに配列に格納することもできます。

//Setの使用例
const tools = [
  "hammer",
  "screwdriver",
  "scraper",
  "hammer",
  "spanner",
  "screwdriver",
  "scraper",
  "spaner",
  "hammer",
  ];

//setを使ってユニークな要素だけを抽出
const setTools = new Set(tools);
//spread構文を使ってSetを配列にする
const toolsUnique = [...setTools];

console.log(toolsUnique);
//(5) ["hammer", "screwdriver", "scraper", "spanner", "spaner"]

参考サイト

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes