ES6-15【map与set】

已于 2022-04-29 13:42:40 修改
阅读量2.1k 收藏
点赞数
分类专栏： # ES6 文章标签： es6
于 2022-04-27 09:23:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42647547/article/details/124442645
版权

一、ES6新增数据结构（set/map）

（1）set/map概念

两个都是es6新增的构造函数：

  1. set：类似于数组，只能存值没有键，值是唯一的
  2. map：类似于对象，可以存键和值，键名不限于字符串，键和值一一对应

set、map、Promise、Proxy四个无法通过babel编译语法降级（poly feel、babel poly feel）

（2）set/map深入

  1. set

    1. 原型

      var set = new Set();
console.log(set);
// Set(0) {size: 0}
// [[Entries]]
// No properties
// size: 0
// [[Prototype]]: Set
// add: ƒ add()
// clear: ƒ clear()
// constructor: ƒ Set()
// delete: ƒ delete()
// entries: ƒ entries()
// forEach: ƒ forEach()
// has: ƒ has()
// keys: ƒ values()
// size: (...)
// values: ƒ values()
// Symbol(Symbol.iterator): ƒ values()
// Symbol(Symbol.toStringTag): "Set"
// get size: ƒ size()
// [[Prototype]]: Object

    2. 参数

      参数是具备 iterator 接口的数据结构：[]，类数组

      var set = new Set([5,7]); 
console.log(set);
// Set(2) {5, 7}
// [[Entries]]
// 0: 5
// 1: 7
// size: 2
// [[Prototype]]: Set

    3. 声明方式

      //方法一
var set = new Set([1,2,3]);
console.log(set); //Set(3) {1,2,3}
//方法二
var set = new Set();
set.add(1).add(2).add(3);
console.log(set); //Set(3) {1,2,3}

    4. 值是唯一的

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

    5. 特殊值

      var set = new Set([undefined,undefined,null,null,5,'5',true,1,NaN,NaN,{},{},[],[]])
console.log(set);
// Set(11) {undefined, null, 5, '5', true, …}
// [[Entries]]
// 0: undefined
// 1: null
// 2: 5
// 3: "5"
// 4: true
// 5: 1
// 6: NaN     注意：1. 在set里面NaN是等于NaN的
// 7: Object        2. {},[]是构造器实例出来的唯一引用，所以不等
// 8: Object
// 9: Array(0)
// 10: Array(0)
// size: 11
// [[Prototype]]: Set

    6. 操作方法

      1. add
        追加数据，返回值是set实例

        var set = new Set();
var x = {id:1};
var y = {id:2};
//一般用法
set.add(x);
set.add(y);
//链式调用
set.add(x) // 返回值是set实例本身
   .add(y)
   .add(x); // 引用相同，无法添加
console.log(set); 
// Set(2) {{…}, {…}}
// [[Entries]]
// 0:
// value: {id: 1}
// 1:
// value: {id: 2}
// size: 2
// [[Prototype]]: Set

      2. size
        返回当前长度

        console.log(set.size); // 2

      3. delete
        清除某个值，返回值是布尔值，操作是实时的

        console.log(set.delete(y));  // false
console.log(set);
// Set(2) {{…}, {…}}
// [[Entries]]
// 0:
// value: {id: 1}
// [[Prototype]]: Set

      4. clear
        清空所有的值，返回值是undefined，操作是实时的

        // 注意打印位置： 发现输出结果一致，说明操作是实时的
console.log(set);
// Set(0) {size: 0}
// [[Entries]]
// No properties
// size: 0
// [[Prototype]]: Set
set.clear()
console.log(set);
// Set(0) {size: 0}
// [[Entries]]
// No properties
// size: 0
// [[Prototype]]: Set

      5. has
        判断是否有指定值，返回值是布尔值

        console.log(set.has(x)); // true

    7. 遍历方法

      1. keys/values/entries

        遍历键，值，键值对数组，返回值是迭代器对象

        set 不存在键名，故键名和键值是一致的

        let set = new Set([1, 2, 3, 4, 5, 6, 7]);
console.log(set.keys()); // SetIterator {1, 2, 3, 4, 5, …}
console.log(set.values()); // SetIterator {1, 2, 3, 4, 5, …}
console.log(set.entries()); // SetIterator {1 => 1, 2 => 2, 3 => 3, 4 => 4, 5 => 5, …}

for (let i of set.keys()) {
    console.log(i); // 1 2 3 4 5 6 7
}
for (let i of set.values()) {
    console.log(i); // 1 2 3 4 5 6 7
}
for (let i of set.entries()) {
    console.log(i); // [1,1] [2,2] [3,3] [4,4] [5,5] [6,6] [7,7]
}

      2. 迭代器
        set对象上也部署了迭代器，可通过for…of遍历

        // 判断遍历的是键还是值，结果是一致的，说明实际上是在调用set实例上的values方法
console.log(Set.prototype[Symbol.iterator] === Set.prototype.values);//true
for(let values of set){
    console.log(values); //1 2 3 4 5 6 7
}

      3. forEach
        遍历成员（键、值、set结构）

        let set = new Set(['a', 'b', 'c', 'd']);
set.forEach((value, keys, s) => {
    console.log(value, keys, s)
})
// a a Set(4) {'a', 'b', 'c', 'd'}
// b b Set(4) {'a', 'b', 'c', 'd'}
// c c Set(4) {'a', 'b', 'c', 'd'}
// d d Set(4) {'a', 'b', 'c', 'd'}

    8. 使用场景

      1. 拓展运算符-set 结构转化为数组，去重

        去重最简单的方式就是收集到set当中，再展开到一个数组里

        // ...能展开具备迭代器接口的数据结构
let set = new Set(['a','b','c','d','e','f','g']); 
console.log(...set); //a b c d e f g

let set = new Set(['a','b','c','d','e','f','g'];
console.log([...set]); //['a','b','c','d','e','f','g']

      2. map-操作成员

        let set = new Set([1,2,3,4,5,6,7])
let set1 = new Set([...set].map(value => value*2)); 
console.log(set1); // Set(7) {2, 4, 6, 8, 10, …}

        难点

        var arr = [1,2,3,4]
var arr1 = arr.map(parseInt);
console.log(arr1);//[1,NaN,NaN,NaN]
//原理就是map里的参数 value, index，默认传给了parseInt
var arr1 = arr.map((value,idx)=> console.log(value,idx));
//1 0
//2 1
//3 2
//4 3
//那么就代表着，第二个参数转换进制，无法转换就是NaN
parseInt(1,0)parseInt(2,1)parseInt(3,2)parseInt(4,3);
	
let set2 = new Set([[...set].map(parseInt)]);  //这里是数组里嵌套数组，所以size是1
console.log(set2);
// Set(1) {Array(7)}           
// [[Entries]]
// 0: Array(7)
// value: Array(7)
// 0: 1
// 1: NaN
// 2: NaN
// 3: NaN
// 4: NaN
// 5: NaN
// 6: NaN
// length: 7
// [[Prototype]]: Array(0)
// size: 1
// [[Prototype]]: Set

      3. filter-过滤成员

        let set2 = new Set([...set].filter(x => (x%2) == 0))
console.log(set2); //{2,4,6}

    9. 交集并集差集

      let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
//并集
let union = new Set([...a, ...b]);
console.log(union); //Set(4) {1, 2, 3, 4}
//交集
let intersect = new Set([...a].filter(x => b.has(x)));
console.log(intersect); //Set(2) {2, 3}
//差集
let difference = new Set([...a].filter(x => !b.has(x)));
console.log(difference) //Set(1) {1}

    10. 映射新的结构

      //方法一
let set = new Set([1,2,3]);
let set1 = new Set([...set].map(value => value*2)); 
//写法二
let set = new Set([1,2,3]);
let set1 = new Set(Array.from(set,value=>value*2));

  2. map

    1. 原型

      和set的原型基本一致，只是多了set、get方法，主要用于存取键值，而set本身没有键，所以不需要这两个方法

    2. 与对象对比

      1. 普通对象

        键和值不能实现一一对应

        var m = {}
var x = {id:1},
	y = {id:2};
m[x] = "foo"; // => m['object Object'] = "foo"; 
m[y] = "bar"; // => m['object Object'] = "bar";
console.log(m); //{[object Object]:"bar"}
console.log(m[x]); //bar
console.log(m[y]); //bar    
//当键名是对象的时候会调用toString从而发生覆盖

      2. map结构

        键和值一一对应

        let m = new Map();
var x = {id:1},
    y = {id:2};
m.set(x,'foo'); // Tips: 1.这里是通过set设置的
m.set(y,'bar');
console.log(m.get(x));//foo 2. 这里通过get访问的
console.log(m.get(y));//bar

    3. 参数

      1. 参数是具备 iterator 接口的数据结构：[]，类数组
      2. 参数是以键值对存在的二维数组 [['键名', '键值'], ...]
      let m = new Map([
	['name', 'zhangsan'],
	['title', 'lisi']
])
console.log(m)
// Map(2) {'name' => 'zhangsan', 'title' => 'lisi'}
// [[Entries]]
// 0: {"name" => "zhangsan"}
// 1: {"title" => "lisi"}
// size: 2
// [[Prototype]]: Map

    4. 声明方式

      // 方法一
let m = new Map([
	['name', 'wangwu'],
	['title', 'zhaoliu']
])
//传参实现原理：
var items = [['name','wagwu'],['title','zhaoliu']]
let m = new Map();
items.forEach(([key,value]) => m.set(key,value))

// 方法二
let m = new Map();
map.set('name','zhangsan')
map.set('title','lisi')

    5. 覆盖问题

      1. 原始值

        const map  = new Map();
// 地址相同所以会覆盖
map.set(1, 'foo'); // Map(1) {1 => 'foo'}
map.set(1, 'bar'); // Map(1) {1 => 'bar'}
// 认定-0和+0是全等的，只是Object.is判断是false
map.set(-0,123);
console.log(map.get(+0)) //123
// 不会有隐式转换
map.set(true,1);
map.set('true',2);
console.log(true); // 1
// 键名也可以是undefined和unll
map.set(undefined,1)
map.set(null,2)
log(map.get(undefined)); //1
log(map.get(null)); //2
// 认定NaN是等于NaN的，只是Object.is判断是true
map.set(NaN,123);
log(map.get(NaN));//123

      2. 引用值

        // 指针不同所以访问不到
map.set([5],555);
console.log(map.get([5])); // undefined
// 指针相同所以可以访问
var arr = [5];
map.set(arr,555); 
console.log(map.get(arr)); //555

        原始值在栈里面存储的是地址，引用值在栈里面存储的是指向堆的指针

    6. 操作方法

      1. set
        添加成员，返回值set实例本身
        const m  = new Map();
// 链式调用
m.set(1,"foo").set(2,"bar");  
console.log(m); // Map(2) {1 => 'foo', 2 => 'bar'}
      2. get
        获取成员，返回值set实例本身
        m.get(1); //'foo'
      3. size
        获取成员长度
        var x = {id:1},
    y = {id:2};
m.set(x,"foo");
m.set(y,"bar") ;  
cosnole.log(m.size); //2
      4. delete
        删除成员，返回值是布尔值，操作是实时的
        var x = {id:1},
    y = {id:2};
m.set(x,"foo");
m.set(y,"bar") ;  
cosnole.log(m.delete(x)); //true
m.delete(x); // Map(1) {{...} => "bar"}
      5. clear
        清空成员，返回值undefined，操作是实时的
        var x = {id:1},
    y = {id:2};
m.set(x,"foo");
m.set(y,"bar") ;  
cosnole.log(m.clear()); //undefined
m.clear(); // Map(0) {}
      6. has
        判断成员，返回值是布尔值
        var x = {id:1},
    y = {id:2};
m.set(x,"foo");
m.set(y,"bar") ;  
cosnole.log(m.has(x)); //true

    7. 遍历方法

      1. keys/values/entries
        var x = {id:1},
    y = {id:2}
m.set(x,"foo")
m.set(y,"bar") 
 
for(let keys of m.keys()){
    console.log(keys)
}
// {id:1}
// {id:2}
 
for(let keys of m.values()){
    console.log(values)
}
// foo
// bar
 
for(let keys of m.entries()){
    console.log(entries)
}
// [{...},'foo']
// [{...},'bar']
      2. 迭代器
        console.log(m[Symbol.iterator] === m.entries) //true 说明实际在调用map实例上的entries方法
for(let i of m){
    console.log(i)
}
// [{...},"foo"]
// [{...},"bar"]

// 模式匹配
for(let [key,values] of m){
    console.log(key,values)
}
// {id:1}"foo"
// {id:2}"bar"

    8. 使用场景

      1. 拓展运算符-map 结构转化为数组

        const myMap = new Map();
myMap.set(true,7)
	 .set({foo:3},['abc']);
console.log(myMap); //Map(2) {true=>7, {...}=>Array(1)}
console.log([...myMap]); 
// (2) [Array(2), Array(2)]
// 0: (2) [true, 7]
// 1: (2) [{...}, Array(1)]
// length: 2
// __proto__: Array(0)

      2. 拓展运算符-数组转化为map 结构

        const map = new Map([
    [true,7],
    [{foo:3},['abc']]
]);
console.log(map); // Map(2) {true => 7, {…} => Array(1)}

      3. 拓展运算符-map 结构转化为对象（条件：键名为字符串）

        const myMap = new Map();
myMap.set({},7)
    .set({},'abc');
function strMapToObj(strMap){
    let obj = Object.create(null);
    for(let [key,val] of strMap.entries()){
        obj[key] = val;
    }
    return obj;
}   
console.log(strMapToObj(myMap)); //{true: 7, a: 'abc'}

      4. 拓展运算符-对象转化为map 结构

        function objToStrMap(obj){
    let map = new Map();
    for(let key of Object.keys(obj)){
        map.set(key,obj[key]);
    }
    return map
}
console.log(objToStrMap({true:7,no:false})); //Map(2) {'true' => 7, 'a' => 'abc'}

        对象没有部署迭代器接口，为什么这里还能使用for…of呢？
        这是因为Object.keys把它变成了键名构成的数组

（3）set/map对比array/object

  1. set对比array

    let set = new Set();
let arr = new Array;
 
//增加
set.add({t:1}); //Set(1) {{t:1}}
arr.push({t:1}); //[{t:1}]
 
//查询
set.has({t:1}); //false 因为不是同一个指针
arr.find(item => item.t); //{t: 1}
 
//修改
set.forEach(item => item.t ? item.t = 2:""); //Set(1) {{t:2}}
arr.forEach(item => item.t ? item.t = 2:""); //[{t:2}]
 
//删除
set.forEach(item => item.t ? set.delete(item):''); //Set(0) {size: 0}
let index = arr.findIndex(item => item.t);
arr.splice(index,1); //[]

  2. map对比array

    let map = new Map();
let arr = new Array();
//增加
map.set('t',1); //Map(1) {'t' => 1}
arr.push({'t':1}); //[{t,1}]
 
//查询
map.has('t'); //true
arr.find(item => item.t); //{t: 1}
 
//修改
map.set('t',2); //Map(1) {'t' => 2}
arr.forEach(item => item.t ? item.t = 2 : ''); //[{t,2}]
 
//删除
map.delete('t'); //Map(0) {size: 0}
let index = arr.findIndex(item => item.t);
arr.splice(index,1); //[]

  3. map/set对比object

    let map = new Map();
let set = new Set();
let item = {t:1}
let obj= {} 
//增加
map.set('t',1); //Map(1) {'t' => 1}
set.add(item); //Set(1) {{t:1}}
obj['t'] = 1; //{t:1}
 
//查询
map.has('t'); //true
set.has(item); //true
't' in obj; //true
obj.hasOwnProperty('t') //true 
 
//修改
map.set('t',2); //Map(1) {'t' => 2}
item.t = 2; //Set(1) {{t:2}}
obj['t'] = 2; //{t:2}
 
//删除
map.delete('t'); //Map(0) {size: 0}
set.delete(item); //Set(0) {size: 0}
delete obj['t']; //{}

（4）结论

map/set都有迭代器接口，底层优化比array/object做得更好，结构操作比array/object更优雅，若对数据结构要求比较高，且保证数据唯一性的话就用map/set而不用array/object

小管打天下
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js高级之｜ES6新增数据结构Set和Map
qq_45313933的博客
01-14 373
数据结构有：数组、对象、set和map
一文搞懂ES6中的Map和Set
10-16
主要介绍了ES6中的Map和Set，本文给大家提到了map和object的区别 ,需要的朋友可以参考下
es6学习--set map数据结构
weixin_30412013的博客
08-29 288
1.Set 它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set 本身是一个构造函数，用来生成 Set 数据结构。 const s = new Set(); [2,3,1,2,4,5,1].forEach(x=>s.add(x)); for(let i of s){ console.log(i); // 2,3,1,4,5 } add(...
ES6新增Set、Map两种数据结构
最新发布
唯见青山不见君
05-20 780
ES6新增Set、Map两种数据结构
JavaScript（ES6）新增的map和set
舒小罗
08-12 238
JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构，即一组键值对。 但是JavaScript的对象有个小问题，就是键必须是字符串
ES6中Map和Set
AKALXH的博客
04-20 1485
前言 ◣ ES6是JavaScript语言的新标准，2015年6月正式发布后，迅速推广, 现在大多数浏览器都支持ES6中的大多数特性. 而本文将对ES6新增数据结构集Map和Set进行了解. Map ◣ Map结构是键值的组合,它的key不止限于字符串类型 , key可以为任何类型.[如下所示:] 在这里插入代码片 ...
ES6 Map和Set
amy acker的博客
04-15 534
1.Map ES6中提供了Map数据结构，是键值对的集合 方法 方法 描述 clear 移除Map对象的所有键/值对 forEach 对映射中的每个元素执行指定操作。 delete 从映射中移除指定的元素 get 返回映射中的指定元素 set 添加一个新建元素到映射 has 如果映射包含指定元素，则返回 true 示例 var m = new Map...
详解ES6中的Map与Set集合
10-17
主要介绍了详解ES6中的Map与Set集合，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ES6-专案：ES6-专案
02-16
**ES6专题：深入理解与实战应用** 在现代前端开发中，ES6（ECMAScript 2015）已经成为JavaScript编程的主流标准，它引入了一系列新的语法特性，极大地提升了开发效率和代码可读性。这个名为"ES6-专案"的练习专案...
es6-for-everyone
05-02
- `Map` 提供了键值对的存储，键可以是任何类型，与对象不同，键是有序的。 ### 12. **尾调用优化** - 当函数的最后一步是调用另一个函数时，解释器会优化这种调用，避免栈溢出。 ### 13. **展开运算符（Spread ...
ES6中Set和Map用法实例详解
10-15
主要介绍了ES6中Set和Map用法,结合实例形式详细分析了ES6中Set和Map的基本功能、原理、使用方法及操作注意事项,需要的朋友可以参考下
[ES6] Map & Set
前端
04-20 890
forEach 方法的第二个参数，表示绑定处理函数内部的 this 对象，如果省略则表示是调用对象本身，上述可省略第二个参数。Map 对象中的元素是按顺序插入的，迭代 Map 对象也是按顺序迭代，每一次迭代返回 [key, value] 数组。函数也类似，所以复杂类型的键值并不是形式看着一样就是同一个值，必须是指针指向的是同一个地址的键值才能获取到对应值。合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的。Map 的克隆是 Map 对象构造函数生成实例，迭代出新的对象。
ES6新特性之Map和Set
红岸基地
08-15 618
今天写一下关于面试中反反复复被问到的一个知识点，map和set的数据结构，文章内容会很短，方便大家快速查看，废话不说，直接讲以上就是关于set和map的使用总结，总体来说不难，只是需要我们熟练的使用即可，因为是新特性所以开发的过程中使用的时候需要注意一些写法的兼容性。.........
ES6中的map和set
Harley567
08-09 257
es6中的map和set
ES6 中的Set和Map
weixin_49342009的博客
01-24 419
ES6中的set let m = new Set(); console.log(m); //往set中添加元素 m.add(1); m.add("str"); m.add([4,2,3]); //查看set中是否有某个元素 console.log(m.has("str")); m.delete("str"); //set遍历 m.forEach((val,key)=>{ console.log(val); console.log(key); }) 使用扩展运算符将set转换成数组 l
ES6中的set与map
开发要有产品的思维
10-28 4826
1.set 1.1创建set集合 1.2 如何对set集合进行后续操作 1.3 如何与数组进行相互转换 1.4 如何遍历 1.5set的应用 2.map集合 2.1 如何创建map 2.2 如何进行后续操作 2.3 如何与数组转换 2.4 遍历
ES6中map和set用法
qq_15732905的博客
06-10 148
ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 （1）.打印：console.log 　　　　var data = new Set([1,2,3]); 　　　　//Set {1, 2, 3} 　　　　console.log(data); （2）.添加: add 　　　　data.add(4); 　　　　//Set {1, 2, 3, 4} 　　　　consol...
es6 Set和Map
xu_song的专栏
07-09 1593
es6 中 set和map的使用
ES6之Set与Map
热门推荐
仇益阳的博客
12-17 1万+
什么是Set和Map? Set 是不包含重复值的列表。你一般不会像对待数组那样来访问 Set 中的某个项；相反更常见 的是，只在 Set 中检查某个值是否存在。 Map 则是键与相对应的值的集合。因此，Map中的每个项都存储了两块数据，通过指定所需读取的键即可检索对应的值。 Map 常被用作缓存，存储数据以便此后快速检索。 创建 Set 并添加项目 Set 使用 new Set() 来创建，而调用...
es6 set和map
07-27
- *3* [ES6中的set与map](https://blog.csdn.net/weixin_44247866/article/details/127561391)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值