javascript中Set、Map、WeakSet、WeakMap區(qū)別
前言
在學(xué)習(xí)vue官方源碼解析的過程中，看到了有關(guān)這一塊的解析，所以跟著學(xué)習(xí)并且記錄一下
Set
之前我對Set的了解還是僅僅停留在數(shù)組去重，但是我并沒有在項目中用過，深入學(xué)習(xí)后，發(fā)現(xiàn)有時候用這個特性還挺方便的。
介紹Set之前我們先來介紹一下集合，集合是由一群無序的、不重復(fù)的元素組成的集合。
Set對象是一個由任意唯一值組成的的集合，這個唯一值可以是基本類型，也可以是引用類型，并且Set是可迭代的。
Set的使用
const set = new Set([1, 2, 3, 4, 5, 6, 5, 6]); console.log(set);
運行代碼可知Set()方法最終生成的是一個去重過后的類數(shù)組結(jié)構(gòu)對象。
屬性
返回類數(shù)組的元素數(shù)量
const set = new Set([1, 2, 3, 4, 5, 6, 5, 6]); console.log(set.size); // size: 6
方法
- add(value): 向集合中添加一個新的項
let set = new Set();
set.add(1);
console.log(set); // set: { 1 }
- delete(value): 從集合中刪除一個值
let set = new Set();
set.add(1);
set.add(2);
set.delete(1);
console.log(set); // set: { 2 }
- has(value): 如果值在集合中存在，返回ture, 否則返回false
let set = new Set(); set.add(1); console.log(set.has(1)); // true console.log(set.has(2)); // false
- clear(): 移除集合中的所有項
let set = new Set();
set.add(1);
set.add(2);
set.clear();
console.log(set.clear()) // undefined
console.log(set) // {size:0}
遍歷方法
因為Set方法返回的數(shù)據(jù)結(jié)構(gòu)是類數(shù)組，所以我們要使用Array,form()去將其轉(zhuǎn)化為數(shù)組，也可以用ES6的結(jié)構(gòu)將其轉(zhuǎn)化為數(shù)組
因為Set是值的集合，它沒有鍵，只有值，所以遍歷鍵和值是的結(jié)果是一樣的。
keys(): 返回鍵名的遍歷器
let set = new Set([1, 2, 3, 4]); console.log(Array.from(set.keys())); // [1,2,3,4]
values(): 返回鍵值的遍歷器
let set = new Set([1, 2, 3, 4]); console.log(Array.from(set.values())); // [1,2,3,4]
entries(): 返回鍵值對的遍歷器(解構(gòu)類數(shù)組)
let set = new Set([1, 2, 3, 4]); console.log([...set.entries()]); // [[1,1],[2,2],[3,3],[4,4]]
forEach(): 使用回調(diào)函數(shù)遍歷每個成員
let set = new Set([1, 2, 3, 4]);
set.forEach((item: number) => {
console.log(item); // 輪流輸出1,2,3,4
});
小結(jié)
當(dāng)我們的業(yè)務(wù)需求中有數(shù)組去重時可以用，代碼量少
也可以用于去交集并集差集時可以用
// 數(shù)組去重
let arr = [1, 2, 3, 4, 5, 5];
let arrSet = [... new Set(arr)]; // [1,2,3,4]
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]
JS垃圾回收機制
介紹WeakSet和WeakMap時得先簡單的介紹一下垃圾回收機制
什么是垃圾回收機制
搞清楚什么是垃圾回收機制，首先要知道什么是垃圾，所謂的垃圾指的是不再被使用的變量和引用的對象，也有可能是對象直接相互訪問，導(dǎo)致的死循環(huán)。那么垃圾回收機制就是不停的在尋找這些不再被使用的和不再被引用的變量，將他們清除并且釋放內(nèi)存。
標(biāo)記清除法
現(xiàn)在大多數(shù)瀏覽器使用的都是標(biāo)記清除法，當(dāng)變量在運行環(huán)境中被聲明時給它添加一個標(biāo)記，當(dāng)變量離開運行環(huán)境時清除內(nèi)存并清除標(biāo)記
引用計數(shù)法
當(dāng)我們在創(chuàng)建對象時，給對象的引用計數(shù)加一，對象引用完計數(shù)減一，最終當(dāng)引用計數(shù)為0時，可被垃圾回收機制回收。
WeakSet
WeakSet是對象的集合，它的成員只能是對象，并且都是弱引用的對象，如何理解弱引用，就是當(dāng)對象不再被引用時，對象會被垃圾回收機制回收，所以沒法確認(rèn)它的成員數(shù)量，所以WeakSet它是不可迭代的，無法使用forEach等方法去遍歷。
WeakSet方法
add(value): 向集合中添加一個新的項
const Weakset = new WeakSet();
const a = {};
const b = {};
Weakset.add(a);
Weakset.add(b);
console.log(Weakset);
delete(value): 從集合中刪除一個值
const Weakset = new WeakSet();
const a = {};
const b = {};
Weakset.add(a);
Weakset.add(b);
Weakset.delete(b);
console.log(Weakset);
has(value) 如果值在集合中存在，返回ture, 否則返回false
const a = {};
const b = {};
Weakset.add(a);
Weakset.add(b);
Weakset.delete(b);
console.log(Weakset.has(a)); // true
console.log(Weakset.has(b)); // false
Map
記得第一次接觸Map還是在做算法題的時候，當(dāng)時第一題用雙重for循環(huán)的話，時間復(fù)雜度為O(n^2)，但是用map來處理就變成了O(n)，至今印象深刻。Map是由鍵和值組成的集合，就相當(dāng)于將key也就是指針存在了棧內(nèi)存中，通過指針去尋找它的值。并且Map是可迭代的集合，每次迭代后都會返回一個[key，value]的數(shù)組。
屬性
size 返回集合元素的數(shù)量
let map = new Map();
map.set('xiao', 'chen');
map.set('a', 'b');
console.log(map.size); // 2
方法
set(key, value): 往Map中設(shè)置新的值
let map = new Map();
map.set('xiao', 'chen');
map.set('a', 'b');
console.log(map);
get(key): 通過key去獲取它的值，如果拿不到就返回與undefined
let map = new Map();
map.set('xiao', 'chen');
map.set('a', 'b');
console.log(map.get('a')); // b
console.log(map.get('c')); // undefined
has(key): 判斷當(dāng)前鍵是否在當(dāng)前集合中,返回一個布爾值，存在返回true,不存在則返回false
let map = new Map();
map.set('xiao', 'chen');
map.set('a', 'b');
console.log(map.has('a')); // true
console.log(map.has('c')); // false
delete(key): 刪除集合中的某個元素，通過key去查找,刪除后返回一個布爾值,刪除成功返回true,否則返回false
let map = new Map();
map.set('xiao', 'chen');
map.set('a', 'b');
console.log(map.delete('a'));
console.log(map);
5. clear(): 刪除集合中的所有元素，沒有返回值
let map = new Map();
map.set('xiao', 'chen');
map.set('a', 'b');
console.log(map.clear()); // undefined
console.log(map); // {size: 0}
遍歷方法
keys()：返回的是一個迭代后的對象，其中包含著Map對象所有的鍵。
let map = new Map();
map.set('xiao', 'chen');
map.set('a', 'b');
console.log([...map.keys()]); // ['xiao', 'a']
values()：返回的是一個迭代后的對象，其中包含Map對象中所有的值。
let map = new Map();
map.set('xiao', 'chen');
map.set('a', 'b');
console.log([...map.values()]); // ['chen', 'b']
entries()：返回的是一個迭代后的對象，其中包含Map對象中所有的鍵值對。
let map = new Map();
map.set('xiao', 'chen');
map.set('a', 'b');
console.log([...map.entries()]);
forEach()：遍歷Map對象的所有成員
let map = new Map();
map.set('xiao', 'chen');
map.set('a', 'b');
map.forEach((value, key) => {
console.log(key, value);
});
// xiao chen
// a b
WeakMap
WeakMap和Map一樣是鍵值的集合，但是它的鍵必須是對象，并且它的鍵也是弱引用，所有它也有可能被垃圾回收機制所回收且是不可迭代的
以上就是javascript中Set、Map、WeakSet、WeakMap區(qū)別的詳細內(nèi)容，更多關(guān)于javascript中Set、Map、WeakSet、WeakMap區(qū)別的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了element實現(xiàn)合并單元格通用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue項目接入高德地圖點擊地圖獲取經(jīng)緯度以及省市區(qū)功能
這篇文章主要給大家介紹了關(guān)于vue項目接入高德地圖點擊地圖獲取經(jīng)緯度以及省市區(qū)功能的相關(guān)資料,開發(fā)中我們需要地圖定位,就是用戶輸入位置,自動定位獲取經(jīng)緯度,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue彈窗的兩種實現(xiàn)方式,一種使用.sync修飾符另一種使用v-model，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-08-08
Vue子組件關(guān)閉后調(diào)用刷新父組件的實現(xiàn)
這篇文章主要介紹了Vue子組件關(guān)閉后調(diào)用刷新父組件的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
今天小編就為大家分享一篇Vue修改項目啟動端口號方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細介紹了如何利用Vue2實現(xiàn)簡單基礎(chǔ)的圖片裁剪功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2022-09-09
vue實現(xiàn)頁面上傳文件夾壓縮后傳給服務(wù)器的操作
這篇文章主要介紹了vue實現(xiàn)頁面上傳文件夾壓縮后傳給服務(wù)器的操作,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue.js中組件中的slot實例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
本篇文章主要介紹了vue-cli如何引入bootstrap工具的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)發(fā)表評論功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04