# Setオブジェクト

Set オブジェクトは、プリミティブ値・オブジェクト参照を問わず、  
あらゆる型で一意の値を格納できる[^1]。

```js:example.js

const users = new Set(['Tanaka','Ito']);

users.add('Yamada')
users.add('Tanaka')

console.log(...users)
// output
// "Tanaka" "Ito" "Yamada"

```

## Set を使ったテクニック

配列から重複した値を除外するために Set オブジェクトを用いて実現ができる。  

```js:example2.js
let users = ['Tanaka','Ito','Yamada','Tanaka']
console.log(...users)
// output
// "Tanaka" "Ito" "Yamada" "Tanaka"

users = Array.from(new Set(users))
console.log(...users)
// output
// "Tanaka" "Ito" "Yamada"
```

[GROWI](https://tips.weseek.co.jp/5e393927e848c600487d6a01) では Tag 検索で次のように実現されている。

[該当の File](https://github.com/weseek/growi/blob/3435b18e300f5d820f15f6c740b54ca594c48275/src/client/js/components/Page/TagsInput.jsx#L45)

```js:TagsInput.jsx
async handleSearch(query) {
    this.setState({ isLoading: true });
    const res = await this.props.appContainer.apiGet('/tags.search', { q: query });
    res.tags.unshift(query); // selectable new tag whose name equals query
    this.setState({
      resultTags: Array.from(new Set(res.tags)), // use Set for de-duplication
      isLoading: false,
    });
}
```

## 出典
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set

[^1]: コード例では [スプレッド構文](https://tips.weseek.co.jp/5e39828be848c600487d6a27) を用い要素のみを出力している


---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/用語集/Javascript/Setオブジェクト
- Permalink: https://tips.weseek.co.jp/5e4252bbdecd0a0049953aea
- Parent: [Javascript](/5e392e88e848c600487d69db.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 14 total
  - [Angular](/5e393953e848c600487d6a04.md)
  - [ECMAScript](/5e39820de848c600487d6a24.md)
  - [Object_entries ](/5e3f9391f5921400485be6a8.md)
  - [React](/5e3930c8e848c600487d69ed.md)
  - [Svelte](/5e3980bde848c600487d6a1e.md)
  - [Vue](/5e3930f3e848c600487d69f0.md)
  - [protypeMethodのmap()とforEach()の違い](/5e57b3b07887d100480949fe.md)
  - [protypeMethodのthen()について](/5f163aac647aac00495efa7d.md)
  - [throttle-debouceのthrottleとdebouceの違い](/5e785068f78b4b0048b6add1.md)
  - [スプレッド構文](/5e39828be848c600487d6a27.md)
  - [ローカルストレージ](/5e86b4db139099004805819c.md)
  - [分割代入](/5e3af26c25751e0049929801.md)
  - [宣言（varとletとconstの違い）](/5e5de1da3051ce00499cac5e.md)
  - [正規表現](/5e633bb4d9ebf700489783ea.md)
- Last updated: 2020-03-06T12:45:27.352Z by deleted_at_1672138397219
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=5e4252bbdecd0a0049953aea