Map Objectを使う。
コンストラクタに2つの要素を持つ配列の配列を渡してやると、1つ目の要素をkey, 2つ目の要素をvalueとしたMapオブジェクトが生成される。
この時、keyが重複した場合上書きされる。
code:javascript
const map = new Map([
])
console.log(map)
// 出力内容
Map(2) {
'1' => { id: 1, name: 'user1' },
'2' => { id: 3, name: 'user3' }
}
// map.values()でvalueのみ抽出したIterable Objectを返却する。
// spread syntaxやArray.from()で配列に戻せる。
上記の性質を利用して、[key: 重複を消したいプロパティ, value: 最終的に残したいプロパティを揃えたオブジェクト]の配列をMapに渡してやると、指定のプロパティの重複を除ける。
code:javascript
const members = [
{ name: 'Alice', lang: 'Ruby' },
{ name: 'Bob', lang: 'JavaScript' },
{ name: 'Carol', lang: 'Ruby' },
{ name: 'Dave', lang: 'PHP' },
{ name: 'Eve', lang: 'Rust' },
]
const lang = new Map(kvp).values()
console.log(lang)
が、上記のようにvalueに当たる値がプリミティブ型の場合Set Objectで同じことができる。
code:javascript
const k = members.map(e => e.lang)
const set = new Set(k)
上記の例で言うと、langが{ id: string, name: string }のようなObject型の場合はSet Objectでは重複を除けない。
Object型の等価性は同一インスタンスかどうかで見ている為である。(内容が全く同じでもインスタンスが異なれば等価ではない)
code:javascript
const members = [
{ name: 'Alice', lang: { id: '001', name: 'Ruby' } },
{ name: 'Bob', lang: { id: '002', name: 'JavaScript' } },
{ name: 'Carol', lang: { id: '001', name: 'Ruby' } },
{ name: 'Dave', lang: { id: '003', name: 'PHP' } },
{ name: 'Eve', lang: { id: '004', name: 'Rust' } },
]
const ruby = members0.lang const ruby2 = { id: '001', name: 'Ruby' }
const ruby3 = { id: '001', name: 'Ruby' }
console.log(ruby === ruby2)
// => false
console.log(ruby === ruby3)
// => false
console.log(ruby2 === ruby3)
// => false
console.log(set)
// 出力内容
Set(3) {
{ id: '001', name: 'Ruby' },
{ id: '001', name: 'Ruby' },
{ id: '001', name: 'Ruby' }
}
const set2 = new Set(members.map(e => e.lang))
console.log(set2)
// 出力内容
Set(5) {
{ id: '001', name: 'Ruby' },
{ id: '002', name: 'JavaScript' },
{ id: '001', name: 'Ruby' },
{ id: '003', name: 'PHP' },
{ id: '004', name: 'Rust' }
}
この場合、各要素をkey value pairで指定できて単純に同一のkeyが存在しないMap Objectを用いるとシンプルに記述できる。
(keyをプリミティブ型で指定する必要はある)
code:javascript
const map = new Map(kvp)
// 出力内容
[
{ id: '001', name: 'Ruby' },
{ id: '002', name: 'JavaScript' },
{ id: '003', name: 'PHP' },
{ id: '004', name: 'Rust' }
]