Setオブジェクトについて（Javascript）

初めに

今回はPaizaのスキルチェックで問題を解いていく中で学んだオブジェクトを備忘録としてまとめた記事です。

Setオブジェクトとは

Set オブジェクトは値のコレクションです。挿入順に要素を反復することができます。Set に重複する値は格納出来ません。Set 内の値はコレクション内で一意となります。

※MDN記事を引用
参考記事：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set

Paizaスキルチェックを解いていく中で学んだ使い方

・配列の要素が同じデータで重複していた際に、重複分を取り除いてくれる

let array = [1,2,3,3,3,4,5,5,6]

let setArray = new Set(array)
console.log(setArray)

// { 1, 2, 3, 4, 5, 6 }

・new Set()で求めた値の要素数の求め方（length❌ → size⭕️）

console.log(setArray.size)
// 6

・setArrayに要素を追記したい場合

setArray.add(7)
console.log(setArray)

// { 1, 2, 3, 4, 5, 6, 7 }

/*以下は5を代入しているが既に同じデータが存在しているため、内容に変更なし*/
setArray.add(5)
console.log(setArray)

// { 1, 2, 3, 4, 5, 6, 7 }

・setArrayの要素を削除したい場合

setArray.delete(3)
console.log(setArray)

// { 1, 2, 4, 5, 6, 7 }

Setオブヘクトの中身を配列に変換

上の記事では中身のデータをそのまま取り出して使用することができない（可能だったらごめんなさい🙇‍♂️）ので、配列型に直してあげる

let array = [1,2,3,3,3,4,5,5,6]

let data = [...new Set(array)]
console.log(data)

// [ 1, 2, 3, 4, 5, 6 ]

・以下のような書き方でもOK

let array = [1,2,3,3,3,4,5,5,6]
let setArray = new Set(array)
console.log(setArray)

// { 1, 2, 3, 4, 5, 6 }

let newArray = Array.from(setArray)
console.log(newArray)

// [ 1, 2, 3, 4, 5, 6 ]

最後に

慣れてきたと思ってましたが、まだまだ知らないものがあるのだな〜と実感しました。
ただ、これらを知っておくことで、何かを制作する際に役立つかもしれないので、日々勉強しないとと思いました。