set

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

Set本身是一個構造函數，用來生成 Set 數據結構

語法：

let set = new Set([1, 1, 2, 2])console.log(...set)

屬性：size? ? ?返回長度

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

操作方法：

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

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

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

clear(): 移除集合中的所有項?

?

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(): 使用回調函數遍歷每個成員?

?

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

?

應用場景

?

// 數組去重 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]

?

?

map

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

?

Map的使用場景

Map和Object很類似，但Map有一個比較特殊的應用場景。如果你在開發時不確定鍵值對里面的鍵的名稱，那么你需要用Map。舉例來說，你需要動態地從MongoDB里獲取鍵值并顯示給用戶，但也許你并不關心這些鍵值的鍵名到底是什么，那么在這種情況下，你可以用Map，例如這樣：

?

var?myMap?=?new?Map();var?keyObj?=?{},keyFunc?=?function?()?{?return?'hey'},keyString?=?"a?string";myMap.set(keyString,?"value?associated?with?'a?string'"); myMap.set(keyObj,?"value?associated?with?keyObj"); myMap.set(keyFunc,?"value?associated?with?keyFunc");console.log(myMap.get(keyFunc));

語法

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

屬性??size: 返回 Map 結構的元素總數?

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)})

?

類型的轉換

• ?Map 轉為 Array

?

// 解構 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 轉為 Map?

?

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

• Map 轉為 Object?

?

// 非字符串鍵名會被轉換為字符串 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 轉為 Map

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

?

總結

以上是生活随笔為你收集整理的es6 map与set的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。