ES6 系列六：set和map

"Code tailor"，爲前端開發者提供技術相關資訊以及系列基礎文章，微信關注「小和山的菜鳥們」公衆號，及時獲取最新文章。

前言

在開始學習以前，咱們想要告訴您的是，本文章是對阮一峯《ECMAScript6 入門》一書中 "Set 和 Map" 章節的總結，若是您已掌握下面知識事項，則可跳過此環節直接進入題目練習

• 什麼是 Set 和 Map？
• Set 和 Map 的經常使用方法

若是您對某些部分有些遺忘，👇🏻 已經爲您準備好了！

學習連接

set 和 map 的學習

彙總總結

概念

Set 對象是值的集合，你能夠按照插入的順序迭代它的元素。 Set中的元素只會出現一次，即 Set 中的元素是惟一的。

Map 對象保存鍵值對，而且可以記住鍵的原始插入順序。任何值(對象或者原始值) 均可以做爲一個鍵或一個值。

set 和 map 的經常使用方法

Set

• Set()

建立一個新的 Set 對象。

let mySet = new Set()

• Set.prototype.size

返回 Set 對象中的值的個數

let mySet = new Set()

mySet.add(1) // Set [ 1 ]
mySet.add(5) // Set [ 1, 5 ]
mySet.size // 2

• Set.prototype.add(value)

在 Set 對象尾部添加一個元素。返回該 Set 對象

let mySet = new Set()
mySet.add(1) // Set [ 1 ]
mySet.add(5) // Set [ 1, 5 ]

• Set.prototype.clear()

移除 Set 對象內的全部元素。

let mySet = new Set()
mySet.add(1) // Set [ 1 ]
mySet.add(5) // Set [ 1, 5 ]
mySet.clear()
mySet.size // 0

• Set.prototype.delete(value)

移除 Set 中與這個值相等的元素，返回 Set.prototype.has(value) 在這個操做前會返回的值（即若是該元素存在，返回 true，不然返回 false）。 Set.prototype.has(value) 在此後會返回 false。

let mySet = new Set()
mySet.add(1) // Set [ 1 ]
mySet.add(5) // Set [ 1, 5 ]
mySet.delete(5) // true,  從set中移除5
mySet.size // 1

• Set.prototype.has(value)

返回一個布爾值，表示該值在 Set 中存在與否。

let mySet = new Set()

mySet.add(1) // Set [ 1 ]
mySet.add(5) // Set [ 1, 5 ]

mySet.has(1) // true
mySet.has(3) // false

mySet.delete(5) // true,  從set中移除5
mySet.has(5) // false, 5已經被移除

mySet.size // 1, 剛剛移除一個值

Map()

• Map()

用於建立 Map 對象

let myMap = new Map()

• Map.prototype.size

返回 Map 對象的鍵/值對的數量。

let myMap = new Map()
let keyString = 'a string'
myMap.set(keyString, "和鍵'a string'關聯的值")
myMap.size //1

• Map.prototype.clear()

移除 Map 對象的全部鍵/值對 。

myMap.clear()

• Map.prototype.delete(key)

若是 Map 對象中存在該元素，則移除它並返回 true；不然若是該元素不存在則返回 false。隨後調用 Map.prototype.has(key) 將返回 false

let keyString = 'a string'
myMap.set(keyString, "和鍵'a string'關聯的值")
myMap.delete('a string') //true
myMap.delete('xhs') //false(由於沒有set)

• Map.prototype.get(key)

返回鍵對應的值，若是不存在，則返回 undefined。

myMap.get(keyString) // "和鍵'a string'關聯的值"

• Map.prototype.has(key)

返回一個布爾值，表示 Map 實例是否包含鍵對應的值。

myMap.has('a string') // true

• Map.prototype.set(key, value)

設置 Map 對象中鍵的值。返回該 Map 對象。

myMap.set(keyString, "和鍵'a string'關聯的值")

let myMap = new Map()
let keyString = 'a string'
myMap.set(keyString, "和鍵'a string'關聯的值")
myMap.size //1
myMap.get(keyString) // "和鍵'a string'關聯的值"
myMap.has('a string') // true
myMap.delete('a string') //true
myMap.clear()

題目自測

一：Map 和 Set 的區別

---

二：求數組的並集與交集

題目解析

1、

Answer:

Set 對象是值的集合，Map 對象是鍵值對的集合 Set 對象的元素只會出現一次，即 Set 中的元素是惟一的。Map 對象因爲若是有重複的鍵值，則後面的會覆蓋前面的，相對來講鍵也是惟一的

2、

Answer:

const array1 = [1, 3, 5, 7, 9]
const array2 = [2, 3, 4, 5, 6]

const s1 = new Set([...array1, ...array2]) //並集
let Union = [...s1]
console.log(Union) // [1, 3, 5, 7, 9, 2, 4, 6]

const s2 = new Set(array1) //交集
const Intersection = array2.filter((item) => s2.has(item))
console.log(Intersection) // [3, 5]