【深入淺出ES6】Set\Map

Eric_zhang發表於2019-03-04

【深入淺出ES6】Set\Map

背景

ES6新增了兩種集合型別Set、Map，用來實現不同的功能

  • Set 是不包含重複值的列表，常被用來檢查某個值是否存在
  • Map 是鍵值對的集合，多用來作為快取，儲存和提取資料。Object的屬性型別都會預設轉成字串，比如obj['5']與obj[5]是等價的；Map的屬性型別可以其他型別

Set

  1. new Set()建立Set型別
  2. add()向Set中新增新的元素
  3. size屬性返回當前Set列表包含幾個元素
  4. has()判斷當前呼叫的Set是否包含某個值
  5. delete()刪除指定元素
  6. clear()清空當前Set列表
  7. Set不會對元素做強制型別轉換，比如5與'5'是兩個不同的元素
  8. Set列表不存在索引，所以無法像陣列一樣通過索引獲取某一個值，可以使用forEach()依次遍歷列表中的元素
  9. 對於只想儲存物件型別元素的列表，並且擔心Set列表中的物件強引用造成記憶體洩漏等問題，建議使用new WeakSet()建立弱引用的Set列表，要求所有元素必須為物件型別，否則會報錯。當Weak Set中的物件在Weak Set之外不存在任何引用時，該物件就會被銷燬，也就不會存在干擾垃圾回收，記憶體洩漏的問題(與傳統的Set用法還有些區別，感興趣的可以自己進一步瞭解下)

將陣列轉換成Set，可以刪除掉重複的元素

let arr = [1,2,3,4,5,5,5,4]
let set = new Set(arr)
console.log(set) // Set(5){1, 2, 3, 4, 5}
set.forEach((value) => {
    console.log(value) // 1,2,3,4,5
})
複製程式碼

將Set轉換成陣列，使用擴充套件運算子

let arr = [1,2,3,4,5,5,5,4]
let set = new Set(arr)
let array = [...set]
console.log(array) // [1, 2, 3, 4, 5]
複製程式碼

常用來刪除陣列重複陣列的方法

[...new Set(array)]
複製程式碼

Map

Map型別是鍵值對的有序列表，鍵和值可以為任何型別，特別是對鍵的型別不會強制轉換(內部管理鍵的值是使用Object.is()全等於的方式，因此5與'5'是兩個不同的鍵)

  1. new Map()建立Map列表
  2. set(key,value)建立鍵值對
  3. get(key)索引鍵值
  4. 使用物件作為鍵，每一個不同的物件例項都不相等 Object.is({},{}) //false
    Object.is({},{}) //false

let map = new Map(),
    key1 = {},
    key2 = {};
 map.set(key1, 'Tome');
 map.set(key2,'1234');
 console.log(map.get(key1)) //Tom
 console.log(map.get(key2)) // 1234
複製程式碼
  5. has(key) 判斷Map列表是否存在該鍵值對
  6. delete(key) 刪除對應的鍵值對
  7. clear() 清空本Map列表
  8. size屬性，返回Map列表內有幾個鍵值對
  9. new WeakMap() 建立弱引用Map，當Weak Map中鍵在Weak Map之外不存在任何引用時，該物件就會被銷燬

Map初始化陣列

let map = new Map([['name','Tom'],['age',20],[3,99]]) // 陣列中有多個含有兩個子元素的子陣列，子陣列中第一個元素作為Map列表的key，第二個值作為Map列表的value
console.log(map.size) //3
console.log(map.get('name')) //Tom
console.log(map.get('age')) //20
console.log(map.get(3)) //99
複製程式碼

forEach(value, key, ownerMap)方法

  • value 當前位置鍵值對的值
  • key 當前位置鍵值對的鍵
  • ownerMap 被呼叫的Map列表
map.forEach((value, key, ownerMap)=>{
console.log(key + ' ' + value)
console.log(ownerMap === map)
})

name Tome
true
age 20
true
3 99
true
複製程式碼

相關文章