Map和Set兩種數(shù)據(jù)結(jié)構(gòu)在ES6的作用是什么

這篇文章主要介紹“Map和Set兩種數(shù)據(jù)結(jié)構(gòu)在ES6的作用是什么”，在日常操作中，相信很多人在Map和Set兩種數(shù)據(jù)結(jié)構(gòu)在ES6的作用是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Map和Set兩種數(shù)據(jù)結(jié)構(gòu)在ES6的作用是什么”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

Set是一種叫做集合的數(shù)據(jù)結(jié)構(gòu)，Map是一種叫做字典的數(shù)據(jù)結(jié)構(gòu)

那什么是集合？什么又是字典呢？

•  集合

集合，是由一堆無序的、相關(guān)聯(lián)的，且不重復(fù)的內(nèi)存結(jié)構(gòu)【數(shù)學(xué)中稱為元素】組成的組合

•  字典

字典（dictionary）是一些元素的集合。每個元素有一個稱作key 的域，不同元素的key 各不相同

它們之間又有什么區(qū)別呢？

•  共同點(diǎn)：集合、字典都可以存儲不重復(fù)的值

•  不同點(diǎn)：集合是以[值，值]的形式存儲元素，字典是以[鍵，值]的形式存儲

背景

大多數(shù)主流編程語言都有多種內(nèi)置的數(shù)據(jù)集合。例如Python擁有列表（list）、元組（tuple）和字典（dictionary）,Java有列表（list）、集合（set)、隊(duì)列（queue）

然而  JavaScript 直到ES6的發(fā)布之前，只擁有數(shù)組（array）和對象（object）這兩個內(nèi)建的數(shù)據(jù)集合

在 ES6 之前,我們通常使用內(nèi)置的 Object 模擬Map

但是這樣模擬出來的map會有一些缺陷，如下:

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  Object的屬性鍵是String或Symbol，這限制了它們作為不同數(shù)據(jù)類型的鍵/值對集合的能力

3.  Object不是設(shè)計來作為一種數(shù)據(jù)集合，因此沒有直接有效的方法來確定對象具有多少屬性

Set

定義: Set 對象允許你存儲任何類型的唯一值，無論是原始值或者是對象引用，Set對象是值的集合，你可以按照插入的順序迭代它的元素。Set中的元素只會出現(xiàn)一次，即 Set 中的元素是唯一的

Set本身是一個構(gòu)造函數(shù)，用來生成 Set 數(shù)據(jù)結(jié)構(gòu)

基本使用

•  語法

new Set([iterable]) 接收一個數(shù)組（或者具有 iterable 接口的其他數(shù)據(jù)結(jié)構(gòu)）, 返回一個新的Set對象

const set = new Set([1,2,1,2])  console.log(set) // {1,2}

上面代碼可以看出 Set 是可以去除數(shù)組中的重復(fù)元素

屬性及方法

屬性

•  size: 返回集合中所包含的元素的數(shù)量 

console.log(new Set([1,2,1,2]).size) // 2

操作方法

•  add(value): 向集合中添加一個新的項(xiàng)

•  delete(value): 從集合中刪除一個值

•  has(value): 如果值在集合中存在，返回ture, 否則返回false

•  clear(): 移除集合中的所有項(xiàng) 

let set = new Set()  set.add(1)  set.add(2)  set.add(2)  set.add(3)  console.log(set) // {1,2,3}  set.has(2) // true  set.delete(2)    set.has(2) // false  set.clear()

遍歷方法

•  keys(): 返回鍵名的遍歷器

•  values(): 返回鍵值的遍歷器

•  entries(): 返回鍵值對的遍歷器

•  forEach(): 使用回調(diào)函數(shù)遍歷每個成員 

let set = new Set([1,2,3,4])  // 由于set只有鍵值，沒有鍵名，所以keys() values()行為完全一致  console.log(Array.from(set.keys())) // [1,2,3,4]  console.log(Array.from(set.values())) // [1,2,3,4]  console.log(Array.from(set.entries())) //  [[1,1],[2,2],[3,3],[4,4]]  set.forEach((item) => { console.log(item)}) // 1,2,3,4

應(yīng)用場景

因?yàn)?Set 結(jié)構(gòu)的值是唯一的，我們可以很輕松的實(shí)現(xiàn)以下

// 數(shù)組去重  let arr = [1, 1, 2, 3];  let unique = [... new Set(arr)];  let a = new Set([1, 2, 3]);  let b = new Set([4, 3, 2]);    // 并集  let union = [...new Set([...a, ...b])]; // [1,2,3,4]  // 交集  let intersect = [...new Set([...a].filter(x => b.has(x)))]; [2,3]    // 差集  let difference = Array.from(new Set([...a].filter(x => !b.has(x)))); [1]

WeakSet

WeakSet 對象是一些對象值的集合, 并且其中的每個對象值都只能出現(xiàn)一次。在WeakSet的集合中是唯一的

WeakSet 的出現(xiàn)主要解決弱引用對象存儲的場景, 其結(jié)構(gòu)與Set類似

與Set的區(qū)別

•  與Set相比，WeakSet 只能是對象的集合，而不能是任何類型的任意值

•  WeakSet集合中對象的引用為弱引用。如果沒有其他的對WeakSet中對象的引用，那么這些對象會被當(dāng)成垃圾回收掉。這也意味著WeakSet中沒有存儲當(dāng)前對象的列表。正因?yàn)檫@樣，WeakSet 是不可枚舉的

WeakSet 的屬性跟操作方法與 Set 一致，不同的是 WeakSet 沒有遍歷方法，因?yàn)槠涑蓡T都是弱引用，弱引用隨時都會消失，遍歷機(jī)制無法保證成員的存在

上面一直有提到弱引用，那弱引用到底是指什么呢？

弱引用是指不能確保其引用的對象不會被垃圾回收器回收的引用，換句話說就是可能在任意時間被回收

Map

Map 對象保存鍵值對，并且能夠記住鍵的原始插入順序。任何值(對象或者原始值) 都可以作為一個鍵或一個值。一個Map對象在迭代時會根據(jù)對象中元素的插入順序來進(jìn)行 — 一個  for...of 循環(huán)在每次迭代后會返回一個形式為[key，value]的數(shù)組

基本使用

•  語法

new Map([iterable]) Iterable 可以是一個數(shù)組或者其他 iterable 對象，其元素為鍵值對(兩個元素的數(shù)組，例如: [[ 1, 'one' ],[ 2, 'two' ]])。每個鍵值對都會添加到新的 Map

let map = new Map()  map.set('name', 'vuejs.cn');  console.log(map.get('name'))

屬性及方法

基本跟 Set 類似，同樣具有如下方法屬性

•  size: 返回 Map 結(jié)構(gòu)的元素總數(shù) 

let map = new Map()  map.set('name', 'vuejs.cn'); console.log(map.size) // 1  console.log(new Map([['name','vue3js.cn'], ['age','18']]).size) // 2

操作方法

•  set(key, value): 向 Map 中加入或更新鍵值對

•  get(key): 讀取 key 對用的值，如果沒有，返回 undefined

•  has(key): 某個鍵是否在 Map 對象中，在返回 true 否則返回 false

•  delete(key): 刪除某個鍵，返回 true, 如果刪除失敗返回 false

•  clear(): 刪除所有元素 

let map = new Map()  map.set('name','vue3js.cn')  map.set('age','18') console.log(map) // Map {"name" => "vuejs.cn", "age" => "18"}  map.get('name') // vue3js.cn   map.has('name') // true  map.delete('name')    map.has(name) // false  map.clear() // Map {}

遍歷方法

•  keys()：返回鍵名的遍歷器

•  values()：返回鍵值的遍歷器

•  entries()：返回所有成員的遍歷器

•  forEach()：遍歷 Map 的所有成員 

let map = new Map()  map.set('name','vue3js.cn')  map.set('age','18')   console.log([...map.keys()])  // ["name", "age"]  console.log([...map.values()])  // ["vue3js.cn", "18"]  console.log([...map.entries()]) // [['name','vue3js.cn'], ['age','18']]  // name vuejs.cn  // age 18  map.forEach((value, key) => { console.log(key, value)})

應(yīng)用場景

Map 會保留所有元素的順序, 是在基于可迭代的基礎(chǔ)上構(gòu)建的，如果考慮到元素迭代或順序保留或鍵值類型豐富的情況下都可以使用，下面摘抄自 vue3 源碼中依賴收集的核心實(shí)現(xiàn)

let depsMap = targetMap.get(target)   if (!depsMap) {     targetMap.set(target, (depsMap = new Map()))   }   let dep = depsMap.get(key)   if (!dep) {     depsMap.set(key, (dep = new Set()))   }   if (!dep.has(activeEffect)) {     dep.add(activeEffect)     activeEffect.deps.push(dep)     ...   }

WeakMap

WeakMap 對象是一組鍵/值對的集合，其中的鍵是弱引用的。其鍵必須是對象，而值可以是任意的

與Map的區(qū)別

•  Map 的鍵可以是任意類型，WeakMap 的鍵只能是對象類型

•  WeakMap 鍵名所指向的對象，不計入垃圾回收機(jī)制

WeakMap 的屬性跟操作方法與 Map 一致，同 WeakSet 一樣，因?yàn)槭侨跻茫?WeakSet 也沒有遍歷方法

類型的轉(zhuǎn)換

•  Map 轉(zhuǎn)為 Array 

// 解構(gòu)  const map = new Map([[1, 1], [2, 2], [3, 3]])  console.log([...map]) // [[1, 1], [2, 2], [3, 3]]  // Array.from()  const map = new Map([[1, 1], [2, 2], [3, 3]])  console.log(Array.from(map)) // [[1, 1], [2, 2], [3, 3]]

•  Array 轉(zhuǎn)為 Map 

const map = new Map([[1, 1], [2, 2], [3, 3]])  console.log(map) // Map {1 => 1, 2 => 2, 3 => 3}

•     Map 轉(zhuǎn)為 Object 

// 非字符串鍵名會被轉(zhuǎn)換為字符串  function mapToObj(map) {      let obj = Object.create(null)      for (let [key, value] of map) {          obj[key] = value      }      return obj  }  const map = new Map().set('name', 'vue3js.cn').set('age', '18')  mapToObj(map)  // {name: "vue3js.cn", age: "18"}

•  Object 轉(zhuǎn)為 Map 

let obj = {"a":1, "b":2};  let map = new Map(Object.entries(obj))

總結(jié)

•  Set、Map、WeakSet、WeakMap、都是一種集合的數(shù)據(jù)結(jié)構(gòu)

•  Set、WeakSet 是[值,值]的集合，且具有唯一性

•  Map 和 WeakMap 是一種[鍵,值]的集合，Map 的鍵可以是任意類型，WeakMap 的鍵只能是對象類型

•  Set 和 Map 有遍歷方法，WeakSet 和 WeakMap 屬于弱引用不可遍歷 

到此，關(guān)于“Map和Set兩種數(shù)據(jù)結(jié)構(gòu)在ES6的作用是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！