美文网首页
ES6(Set,WeakSet,Map,WeakMap数据结构)

ES6(Set,WeakSet,Map,WeakMap数据结构)

作者: 陈裔松的技术博客 | 来源:发表于2019-03-22 15:56 被阅读0次

Set类型

数据特点:是一种集合,与数组类似,集合中的元素不能重复
// 声明Set类型的数据
let list1 = new Set([1, 2, 3, 4, 5]);
console.log(list1);       // Set(5) {1, 2, 3, 4, 5}
console.log(list1.size);  // 5
使用场景:常用于去重
// 常用于去重
let list2 = new Set([1, 2, 2, 3, 4]);
console.log(list2);   // Set(4) {1, 2, 3, 4}

// 严格来说,2与'2'是不一致的,所以这里的结果与原先一致
let list3 = new Set([1, 2, '2', 3, 4]);
console.log(list3);   // Set(5) {1, 2, "2", 3, 4}
常用方法1:add(),has(),delete(),clear()
let list = new Set(['html', 'css']);

list.add('js');
list.add('js');                 // 这个操作是无效的
console.log(list);              // Set(3) {"html", "css", "js"}

console.log(list.has('html'));  // true

list.delete('html');
console.log(list);              // let list = new Set();

list.clear();
console.log(list);              // Set(0) {}
常用方法2:keys(),values(),entries()
let list = new Set(['html', 'css', 'js']);

for (let key of list.keys()) {
    console.log(key);
    // html
    // css
    // js
}

for (let value of list.values()) {
    console.log(value);
    // html
    // css
    // js
}

for (let [key, value] of list.entries()) {
    console.log(key, value);
    // html html
    // css css
    // js js
}

WeakSet类型

  • 集合中的元素只能是对象
  • 没有clear(),size,不能遍历
let weakList = new WeakSet();

weakList.add({});
// weakList.add(2);     // 报错

console.log(weakList);  // WeakSet {{…}}

Map类型

数据特点:是一种集合,与对象类似,key可以是任意数据类型(比如数组,对象等)
声明方式:
let map = new Map([
    ['a', 123],
    ['b', 456]
]);
console.log(map);           // Map(2) {"a" => 123, "b" => 456}
console.log(map.size);      // 2
常用方法1:get(),set(),has(),delete(),clear()
console.log(map.get('a'));  // 123

map.set('c',789);
console.log(map);           // Map(3) {"a" => 123, "b" => 456, "c" => 789}

console.log(map.has('a'));  // true

map.delete('a');
console.log(map);           // Map(1) {"b" => 456}

map.clear();
console.log(map);           // Map(0) {}
常用方法2:keys(),values(),entries()

与Set类似,省略...

WeakMap

WeakMap与Map的区别,和Set与WeakSet的区别是一样,省略..

横向对比:Set,Map,Array,Object

  • 优先使用Map
  • 如果对数据唯一性要求较高,使用Set
  • 尽量不使用Array与Object
let map = new Map();
let set = new Set();
let array = [];
let obj = {};

let setItem = {t: 1};

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

// 查
map.has("t");                  // true
set.has(setItem);              // true
array.some(item => item.t);    // true
't' in obj;                    // true

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

// 删
map.delete("t");                                    // Map(0) {}
set.delete(setItem);                                // Set(0) {}
const index = array.findIndex(item => item.t);
array.splice(index,1);                              // []
delete obj["t"];                                    // {}

相关文章

  • Set 和 Map 数据结构

    Set WeakSet Map WeakMap Set § ⇧ 基本用法 § ⇧ ES6 提供了新的数据结构 Se...

  • ES6中的Set和Map

    ES6中新增了Set、WeakSet、Map、WeakMap数据结构 一、Set Set是类似数组的数据结构,和数...

  • Map、WeakMap、Set、WeakSet

    ES6引入了四种新的数据结构:映射(Map)、集合(Set)、弱集合(WeakSet)和弱映射(WeakMap) ...

  • Set 和 Map 数据结构

    本文介绍 Set、WeakSet、Map、WeakMap 的基本用法 一、Set 1.1、基本用法 ES6 提供了...

  • ES6 笔记 集合

    ES6 中加入了Set, Map, WeakSet, WeakMap 为什么加入集合 Javascript中的Ob...

  • ES6中的Set和Map

    分四部分:Set、WeakSet、Map和WeakMap。 Set: 概念:类似于数组的数据结构,成员的值都是唯一...

  • Set Map WeakSet WeakMap

    本文转自博客:Set、WeakSet、Map及WeakMap Set 和 Map 主要的应用场景在于 数据重组 和...

  • ES-6--数据结构

    Set的用法,WeakSet的用法,Map的用法,WeakMap的用法 Set()基本用法 Set的add,del...

  • 木易杨前端面试题第四题 set 和 map

    第 4 题:介绍下 Set、Map、WeakSet 和 WeakMap 的区别? set 1.set的定义 se...

  • 『ES6脚丫系列』Set+WeakSet+Map+WeakMap

    『ES6脚丫系列』Set+WeakSet+Map+WeakMap 如果有理解不到位的地方,欢迎大家纠错。 一、Se...

网友评论

      本文标题:ES6(Set,WeakSet,Map,WeakMap数据结构)

      本文链接:https://www.haomeiwen.com/subject/kglrvqtx.html