es6的set和map的差別是什麼

青灯夜游
發布: 2022-04-15 18:38:11
原創
7957 人瀏覽過

區別:1、set指的是「集合」結構,而Map指的是「字典」結構;2、set是以「[value, value]」的形式儲存元素,而Map是以「[key, value]」的形式儲存;3、Map可用get()透過鍵查找特定值並返回,而set不行。

es6的set和map的差別是什麼

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

簡述:

  • Set 和 Map 主要的應用場景在於 資料重組 和 資料儲存。
  • Set 是一種稱為集合的資料結構,Map 是一種稱為字典的資料結構。

集合與字典的區別:

  • #共同點:集合、字典可以儲存不重複的值
  • #不同點:集合是以[value , 值]的形式儲存元素,字典是以[key, 值] 的形式儲存

集合(Set)

ES6 新增的一種新的資料結構,類似數組,但成員是唯一且無序的,沒有重複的值。

Set 本身就是一種建構函數,用來產生 Set 資料結構。

Set 物件允許你儲存任何類型的唯一值,無論是原始值或是物件參考。

const s = new Set()
[1, 2, 3, 4, 3, 2, 1].forEach(x => s.add(x))
for (let i of s) {
    console.log(i)	// 1 2 3 4
}
// 去重数组的重复对象
let arr = [1, 2, 3, 2, 1, 1]
[... new Set(arr)]	// [1, 2, 3]
登入後複製

注意:向 Set 加入值的時候,不會發生型別轉換,所以`5`和`"5"`是兩個不同的值。 Set 內部判斷兩個值是否不同,使用的演算法叫做“Same-value-zero equality”,它類似於**精確相等**運算子(`===`),主要的區別是**`NaN`等於自身,而精確相等運算子認為`NaN`不等於自身。 **

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}

let set1 = new Set()
set1.add(5)
set1.add('5')
console.log([...set1])	// [5, "5"]
登入後複製

操作方法:

  • add(value):新增,相當於 array裡的push。

  • delete(value):存在即刪除集合中value。

  • has(value):判斷集合中是否存在 value。

  • clear():清空集合。

遍歷方法:遍歷方法(遍歷順序為插入順序)

  • #keys():傳回一個包含集合中所有鍵的迭代器。

  • values():傳回一個包含集合中所有值得迭代器。

  • entries():傳回一個包含Set物件中所有元素得鍵值對迭代器。

  • forEach(callbackFn, thisArg):用於對集合成員執行callbackFn操作,如果提供了 thisArg 參數,回呼中的this會是這個參數,沒有傳回值。

字典(Map):

是一組鍵值對的結構,具有極快的查找速度。

const m = new Map()
const o = {p: 'haha'}
m.set(o, 'content')
m.get(o)	// content

m.has(o)	// true
m.delete(o)	// true
m.has(o)	// false
登入後複製

操作方法:

  • set(key, 值):在字典中新增元素。
  • get(key):透過鍵找出特定的數值並傳回。
  • has(key):判斷字典中是否存在鍵key。
  • delete(key):透過鍵 key 從字典中移除對應的資料。
  • clear():將這個字典中的所有元素刪除。

遍歷方法:

  • Keys():將字典中包含的所有鍵名以迭代器形式傳回。
  • values():將字典中包含的所有數值以迭代器形式傳回。
  • entries():傳回所有成員的迭代器。
  • forEach():遍歷字典的所有成員。

總結**:**

Set:

  • 指的是「集合」結構

  • [value, value],鍵值與鍵名是一致的(或只有鍵值,沒有鍵名)。

  • 不能透過鍵來尋找特定值

Map:

  • #指的是「字典」結構

  • # [key, value],鍵值與鍵名是不一致的

  • #Map可用get()透過鍵來找出特定值並傳回

【相關推薦:javascript影片教學web前端

以上是es6的set和map的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板