欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript中Set、Map、WeakSet、WeakMap區(qū)別

 更新時間：2022年12月23日 15:55:42   作者：weixin_48727473  
這篇文章主要介紹了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垃圾回收機(jī)制

介紹WeakSet和WeakMap時得先簡單的介紹一下垃圾回收機(jī)制

什么是垃圾回收機(jī)制

搞清楚什么是垃圾回收機(jī)制，首先要知道什么是垃圾，所謂的垃圾指的是不再被使用的變量和引用的對象，也有可能是對象直接相互訪問，導(dǎo)致的死循環(huán)。那么垃圾回收機(jī)制就是不停的在尋找這些不再被使用的和不再被引用的變量，將他們清除并且釋放內(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時，可被垃圾回收機(jī)制回收。

WeakSet

WeakSet是對象的集合，它的成員只能是對象，并且都是弱引用的對象，如何理解弱引用，就是當(dāng)對象不再被引用時，對象會被垃圾回收機(jī)制回收，所以沒法確認(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一樣是鍵值的集合，但是它的鍵必須是對象，并且它的鍵也是弱引用，所有它也有可能被垃圾回收機(jī)制所回收且是不可迭代的

以上就是javascript中Set、Map、WeakSet、WeakMap區(qū)別的詳細(xì)內(nèi)容，更多關(guān)于javascript中Set、Map、WeakSet、WeakMap區(qū)別的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • Vue.js中Line第三方登錄api的實現(xiàn)代碼

    Vue.js中Line第三方登錄api的實現(xiàn)代碼

    這篇文章主要介紹了Vue.js中Line第三方登錄api實現(xiàn)代碼，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-06-06
  • 關(guān)于vue父組件調(diào)用子組件的方法

    關(guān)于vue父組件調(diào)用子組件的方法

    本文主要介紹了vue父組件調(diào)用子組件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • Vue 3.0中Treeshaking特性及作用

    Vue 3.0中Treeshaking特性及作用

    Tree shaking 是一種通過清除多余代碼方式來優(yōu)化項目打包體積的技術(shù),就是在保持代碼運行結(jié)果不變的前提下,去除無用的代碼,本文給大家介紹Vue 3.0中Treeshaking特性是什么,感興趣的朋友一起看看吧
    2023-10-10
  • Vue中emit事件無法觸發(fā)的問題及解決

    Vue中emit事件無法觸發(fā)的問題及解決

    這篇文章主要介紹了Vue中emit事件無法觸發(fā)的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • vue中如何使用唯一標(biāo)識uuid(uuid.v1()-時間戳、uuid.v4()-隨機(jī)數(shù))

    vue中如何使用唯一標(biāo)識uuid(uuid.v1()-時間戳、uuid.v4()-隨機(jī)數(shù))

    這篇文章主要給大家介紹了關(guān)于vue中如何使用唯一標(biāo)識uuid(uuid.v1()-時間戳、uuid.v4()-隨機(jī)數(shù))的相關(guān)資料,當(dāng)使用Vue.js生成UUID時,我們可以使用uuid庫來幫助我們生成通用唯一標(biāo)識符(UUID),需要的朋友可以參考下
    2023-12-12
  • 使用vue中的v-for遍歷二維數(shù)組的方法

    使用vue中的v-for遍歷二維數(shù)組的方法

    下面小編就為大家分享一篇使用vue中的v-for遍歷二維數(shù)組的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue元素樣式實現(xiàn)動態(tài)改變方法介紹

    vue元素樣式實現(xiàn)動態(tài)改變方法介紹

    vue通過js動態(tài)修改元素的樣式，如果是固定的幾個樣式，我常用的是綁定元素的calss,給不同的class寫好需要的樣式，js控制是否使用這個class
    2022-09-09
  • Vue移動端實現(xiàn)圖片上傳及超過1M壓縮上傳

    Vue移動端實現(xiàn)圖片上傳及超過1M壓縮上傳

    這篇文章主要為大家詳細(xì)介紹了Vue移動端實現(xiàn)圖片上傳及超過1M壓縮上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-12-12
  • Nuxt.js SSR與權(quán)限驗證的實現(xiàn)

    Nuxt.js SSR與權(quán)限驗證的實現(xiàn)

    這篇文章主要介紹了Nuxt.js SSR與權(quán)限驗證的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-11-11
  • vue-cli2與vue-cli3在一臺電腦共存的實現(xiàn)方法

    vue-cli2與vue-cli3在一臺電腦共存的實現(xiàn)方法

    這篇文章主要介紹了vue-cli2與vue-cli3在一臺電腦共存的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09

最新評論