es6中Set和Map的對比介紹（附代碼）

來源：懂視網責編：小采時間：2020-11-27 19:29:26

es6中Set和Map的對比介紹（附代碼）

es6中Set和Map的對比介紹（附代碼）:本篇文章給大家帶來的內容是關于es6中Set和Map的對比介紹（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。Set1、add()方法和size屬性{ let list = new Set(); // add()方法向Set數據添加元素 list.add(5); li

推薦度：

點擊下載本文 文檔為doc格式

導讀es6中Set和Map的對比介紹（附代碼）:本篇文章給大家帶來的內容是關于es6中Set和Map的對比介紹（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。Set1、add()方法和size屬性{ let list = new Set(); // add()方法向Set數據添加元素 list.add(5); li

本篇文章給大家帶來的內容是關于es6中Set和Map的對比介紹（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

Set

1、add()方法和size屬性

{
 let list = new Set();
 // add()方法向Set數據添加元素
 list.add(5);
 list.add(7);
 // size屬性返回數據的長度
 console.log(list.size); // 2

 let arr = [1, 2, 3, 4, 5];
 let set = new Set(arr);
 console.log(set, set.size); // Set(5) {1, 2, 3, 4, 5} 5
}

2.Set的元素必須是唯一的

{
 let list = new Set();
 list.add(1);
 list.add(2);
 list.add(1); // 重復元素不會添加進去
 console.log(list); // Set(2) {1, 2}

 // 數組去重
 let arr = [1, 2, 3, 1, '2'];
 let list2 = new Set(arr);
 console.log(list2); // Set(4) {1, 2, 3, "2"}
}

3.has(),delete(),clear()

{
 let arr = ['add', 'delete', 'clear', 'has'];
 let list = new Set(arr);
 console.log(list.has('add')); // true
 list.delete('add');
 console.log(list); // Set(3) {"delete", "clear", "has"}
 list.clear();
 console.log(list); // Set(0) {}
}

4.Set的遍歷

{
 let arr = ['add', 'delete', 'clear', 'has'];
 let list = new Set(arr);
 // Set結構的數據，key和value是同一個值
 for (let value of list) {
 console.log('value', value); // 'add' 'delete' 'clear' 'has'
 }
 for (let key of list.keys()) {
 console.log('keys', key); // 'add' 'delete' 'clear' 'has'
 }
 for (let value of list.values()) {
 console.log('values', value); // 'add' 'delete' 'clear' 'has'
 }
 for (let [key, value] of list.entries()) {
 console.log('entries', key, value);
 }
 list.forEach(function (item) {
 console.log(item); // 'add' 'delete' 'clear' 'has'
 });
}

WeakSet

WeakSet和Set的不同點：

WeakSet的元素只能是對象，不能是數值、字符串、布爾值...
WeakSet中的對象都是弱引用，垃圾回收機制不考慮WeakSet對該對象的引用。WeakSet里面的引用，都不計入垃圾回收機制，所以不會引發內存泄漏的問題。所以，WeakSet適合臨時存放一組對象，以及存放跟對象綁定的信息。只要這些對象在外部消失，它在WeakSet里面的引用就會自動消失。

{
 let weakList = new WeakSet();
 let arg = {name: 'hhh'};
 weakList.add(arg); // WeakSet的元素只能是對象
 // weakList.add(2); // Uncaught TypeError: Invalid value used in weak set
 console.log(weakList); // WeakSet {{name: 'hhh'}}
 // 注意：WeakSet沒有size屬性，沒有clear方法，不能遍歷。其他的用法和Set相同
}

Map

1.set()方法和get()方法

{
 let map = new Map();
 let arr = ['123'];
 // Map的key可以是任意數據類型
 map.set(arr, 456); // map.set(key, value)，這里用數組作為key,添加一個值為456的元素
 console.log(map.get(arr)); // 456
}

2.Map的另一種定義方式

{
 let map = new Map([['a', 123], ['b', 456]]); // 接收一個數組作為參數，數組的每一項為：[key,value]
 console.log(map); // Map(2) {"a" => 123, "b" => 456}
 console.log(map.size); // 2
 console.log(map.has('b')); // true
 map.delete('a');
 console.log(map); // Map(1) {"b" => 456}
 map.clear();
 console.log(map); // Map(0) {}
}

WeakMap

WeakMap和Map的不同點：

WeakMap的key只能是對象
WeakMap的鍵名所引用的對象都是弱引用，垃圾回收機制不考慮對此對象的引用。（注意，WeakMap弱引用的只是鍵名，而不是鍵值。鍵值依然是正常引用。）基本上，如果你要往對象上添加數據，又不想干擾垃圾回收機制，就可以使用WeakMap。

{
 let weakmap = new WeakMap();
 let o = {};
 weakmap.set(o, 123);
 console.log(weakmap.get(o)); // 123
 // 注意：WeakMap沒有size屬性，沒有clear方法，不能遍歷。類似于Set與WeakSet的區別
}

Set,Map和Array,Object的對比

Map與Array對比

{
 // 數據結構橫向對比，增 查 改 刪
 let map = new Map();
 let array = [];

 // 增
 map.set('t', 1);
 array.push({'t': 1});
 console.log(map, array); // {"t" => 1} [{'t': 1}]

 // 查
 let map_exist = map.has('t');
 let array_exist = array.find(item => item.t);
 console.log(map_exist, array_exist); // true {t: 1}

 // 改
 map.set('t', 2);
 array.forEach(item => item.t ? item.t = 2 : '');
 console.log(map, array); // {"t" => 2} [{'t': 2}]

 // 刪
 map.delete('t');
 let index = array.findIndex(item => item.t);
 array.splice(index, 1);
 console.log(map, array); // {} []
}

Set與Array對比

{
 let set = new Set();
 let array = [];
 let item = {'t': 1};

 // 增
 set.add(item);
 array.push(item);
 console.log(set, array); // {{'t': 1}} [{'t': 1}]

 // 查
 let set_exist = set.has(item);
 let array_exist = array.find(item => item.t);
 console.log(set_exist, array_exist); // true {t: 1}

 // 改
 set.forEach(item => item.t ? item.t = 2 : '');
 array.forEach(item => item.t ? item.t = 2 : '');
 console.log(set, array); // {{'t': 2}} [{'t': 2}]

 // 刪
 set.forEach(item => item.t ? set.delete(item) : '');
 let index = array.findIndex(item => item.t);
 array.splice(index, 1);
 console.log(set, array); // {} []
}

Map,Set與Object對比

{
 let item = {t: 1};
 let map = new Map();
 let set = new Set();
 let obj = {};

 // 增
 map.set('t', 1);
 set.add(item);
 obj['t'] = 1;
 console.log(obj, map, set); // {t: 1} Map(1) {"t" => 1} Set(1) {{t: 1}}

 // 查
 console.log(map.has('t'), set.has(item), 't' in obj); // true true true

 // 改
 map.set('t', 2);
 item.t = 2;
 obj['t'] = 2;
 console.log(obj, map, set); // {t: 2} Map(1) {"t" => 2} Set(1) {{t: 2}}

 // 刪
 map.delete('t');
 set.delete(item);
 delete obj['t'];
 console.log(obj, map, set); // {} Map(0) {} Set(0) {}
}

建議：