JavaScriptで値のユニークな配列を利用する方法(Set)

2019-07-04JavaScript

はじめに

「Vue.js」や「Nuxt.js」を使って開発をする機会が増えてきました。
しばらくコマンドラインと戯れる年月が長かったで、浦島太郎状態です。
ES2015～2018 で提供された新しい言語使用が便利で改めて学習し直しているところです。

JavaScriptの Array は重複を許してしまう

本題に貼ります。
JavaScriptの Array は値の重複を許してしまいます。

let numbers = [
  1,
  2,
  3,
]

console.log("=== first ===")
console.log(numbers)

// 要素を追加
numbers.push(4)
numbers.push(5)
console.log("=== first ===")
console.log(numbers)

// すでに格納されている同値を追加
numbers.push(3)
numbers.push(3)
console.log("=== third ===")
console.log(numbers)
JavaScript

実行結果は以下の通り。
3 の値が重複していることがわかります。

=== first ===
[ 1, 2, 3 ]
=== first ===
[ 1, 2, 3, 4, 5 ]
=== third ===
[
  1, 2, 3, 4,
  5, 3, 3
]
Bash

JavaScriptの Set は重複を許さない

「ES2015」で提供された新しいオブジェクト「Set」を利用すれば、値の重複が発生しません。

let numbers = new Set([
  1,
  2,
  3,
])

console.log("=== first ===")
console.log(numbers)

// 要素を追加
numbers.add(4)
numbers.add(5)
console.log("=== first ===")
console.log(numbers)

// すでに格納されている同値を追加
numbers.add(3)
numbers.add(3)
console.log("=== third ===")
console.log(numbers)
JavaScript

実行結果は以下のようになります。
あとから追加された 3 が重複せずに1つだけとなっていることがわかります。

=== first ===
Set { 1, 2, 3 }
=== first ===
Set { 1, 2, 3, 4, 5 }
=== third ===
Set { 1, 2, 3, 4, 5 }
Bash

Setオブジェクトがもつメソッドをいろいろ呼んでみる

Set は Array と同じような操作が可能です。
用意されているメソッドを呼び出してみます。

// Setの初期化
let numbers = new Set([
  1,
  2,
  3,
])

console.log("=== 要素を追加")
numbers.add(4)
console.log(numbers)

console.log("=== 要素が存在しているかを確認")
console.log(numbers.has(4))
console.log(numbers.has(5))

console.log("=== 要素数を取得")
console.log(numbers.size)

console.log("=== 要素を削除")
numbers.delete(2)
console.log(numbers)

console.log("=== 各要素ごとに処理を行う")
for (let n of numbers) {
  console.log(n)
}

console.log("=== 要素をすべて削除し空にする")
numbers.clear()
console.log(numbers)
JavaScript

実行結果は以下のようになります。

=== 要素を追加
Set { 1, 2, 3, 4 }
=== 要素が存在しているかを確認
true
false
=== 要素数を取得
4
=== 要素を削除
Set { 1, 3, 4 }
=== 各要素ごとに処理を行う
1
3
4
=== 要素をすべて削除し空にする
Set {}
Bash

ひとこと

ES2016 で用意された Map についてもまたエントリを上げたいと思います。

2019-07-04JavaScript