new Map和new Set

new Map和new Set都是ES6的新语法,下面简单介绍一下,并举一个使用场景

new Set

new set()是es6新增的数据结构,类似于数组,但它的一大特性就是所有元素都是唯一的,没有重复的值,我们一般称为集合,Set本身是一个构造函数,用来生成 Set 数据结构。
使用场景:
用于数组去重、用于字符串去重、实现并集、交集、和差集

因为前端经常处理的数据就是普通数组[]和对象数组[{},{},{}],下面就只拿数组举例子

普通数组去重:在这里插入图片描述

对象数组根据某个值去重:
在这里插入图片描述

users.map() 返回的是一个包含id的数组[1,2,1]
然后用new Set去重 Set(2) { 1, 2 }
然后用Array.from把类数组转成数组[1,2]
最后结合map和find获取到最终去重的结果

new Map

在JavaScript中,new Map()用于创建一个新的 Map 对象。Map 对象是一种键值对的集合,其中的键是唯一的,值可以重复。与常规对象和Array不同的是,它是“键控集合“
在特定的上下文中使用,它可以提供相当大的性能优势
在这里插入图片描述

下面是一个常用的场景,从两个对象数组中找到属性相同的项并组成新数组(最后去重)
这个例子结合了new Map和new Set

看这个例子前,你需要知道map(),find(),filter()的使用方法和类数组的概念还有如何把类数组转换成数组(Array.from()或[…arr])

const users1 = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 1, name: "Alice" },
  { id: 3, name: "Tom" },
  { id: 4, name: "Mike" },
  { id: 5, name: "Jack" },
];

const users2 = [
  { id: 1, name: "Alice" },
  { id: 6, name: "Charlie" },
  { id: 2, name: "Bob" },
  { id: 6, name: "Charlie" },
  { id: 4, name: "Mike" },
];

//一般做法:(时间复杂度O(m.n)),m和n分别是两个数组的长度
let match = users1
  .map((item) => users2.find((jtem) => item.id == jtem.id))
  .filter((item) => item); //[{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 1, name: 'Alice' },{ id: 4, name: 'Mike' }]
let res = [...new Set(match.map((item) => item.id))].map((id) =>
  match.find((jtem) => id == jtem.id)
);//[{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 4, name: 'Mike' }]
);
//这种方法的时间复杂度为 𝑂(𝑛⋅𝑚),其中 𝑛 是 users1 的长度,𝑚 是 users2 的长度。因为 find 在最坏情况下需要遍历整个 users2 数组,所以每次查找的时间复杂度是 𝑂(𝑚)。当 users1 有 𝑛 个元素时,总的查找时间就是 𝑂(𝑛⋅𝑚)。

//高效做法:(时间复杂度O(m+n))
let users2Map = new Map(users2.map((item) => [item.id, item]));
let match = users1
  .map((item) => (users2Map.has(item.id) ? item : ""))
  .filter((item) => item);
let res = Array.from(new Set(match.map((item) => item.id))).map((id) =>
  match.find((item) => item.id === id)
);
//创建 Map 的时间复杂度是 𝑂(𝑚),因为需要遍历一次 users2 数组。之后每次查找 users2Map.get(user.id) 的时间复杂度是 𝑂(1)。当 users1 有 𝑛 个元素时,总的查找时间就是 𝑂(𝑛)。整体时间复杂度为 𝑂(𝑚)+𝑂(𝑛)=𝑂(𝑛+𝑚)。
//注意:用new Map的时候,选数组短的那一个用来生成new Map,虽然后续longArr.map循环的次数变多,而且实际上复杂度都是𝑂(𝑚)+𝑂(𝑛)=𝑂(𝑛+𝑚)。但底层的某些实现,这样方式快一点。当需要处理的数据有几百到上千条的时候,就可以用new Map提高效率,通常情况下,直接用map+find也不是不行。

总结一下:
new Set就是去重
new Map就是一个键值对集合,某些场景下提高性能

当然new Set和new Map一样也有很多方法
Set:有 add、delete、has、clear …方法。
Map:有 set、delete、has、clear …方法。

new Map的key可以不是字符串,写代码更方便之类的其它优点这里不赘述

就举这个简单例子介绍一下new Map和new Set,当然还有很多其它用法,可以再去看看。

(function(a){a.N={VERSION:"4.1.0",ROOT_URL:a.L_ROOT_URL||function(){var a=document.getElementsByTagName("script"),b=/\/?newmap[\-\._]?([\w\-\._]*)\.js\??/,c,d,e,f;for(c=0,d=a.length;c<d;c++){e=a[c].src,f=e.match(b);if(f)return f[1]==="include"?"../../dist/":e.replace(b,"")+"/"}return""}(),noConflict:function(){return a.N=this._original,this},_original:a.N}})(this),NUtil={extend:function(a){var b=Array.prototype.slice.call(arguments,1);for(var c=0,d=b.length,e;c2?Array.prototype.slice.call(arguments,2):null;return function(){return a.apply(b,c||arguments)}},tryFuncs:function(){var a=null;for(var b=0,c=arguments.length;b<c;b++){var d=arguments[b];try{a=d();break}catch(e){}}return a},getParameterString:function(a){var b=[];for(var c in a){var d=a[c];if(d!=null&&typeof d!="function"){var e;if(typeof d=="object"&&d.constructor==Array){var f=[],g;for(var h=0,i=d.length;h<i;h++)g=d[h],f.push(encodeURIComponent(g===null||g===undefined?"":g));e=f.join(",")}else e=encodeURIComponent(d);b.push(encodeURIComponent(c)+"="+e)}}return b.join("&")},containsStr:function(a,b){return a.indexOf(b)!=-1},getParameters:function(a){a=a===null||a===undefined?window.location.href:a;var b="";if(NUtil.containsStr(a,"?")){var c=a.indexOf("?")+1,d=NUtil.containsStr(a,"#")?a.indexOf("#"):a.length;b=a.substring(c,d)}var e={},f=b.split(/[&;]/);for(var g=0,h=f.length;g<h;++g){var i=f[g].split("=");if(i[0]){var j=i[0];try{j=decodeURIComponent(j)}catch(k){j=unescape(j)}var l=(i[1]||"").replace(/\+/g," ");try{l=decodeURIComponent(l)}catch(k){l=unescape(l)}l=l.split(","),l.length==1&&(l=l[0]),e[j]=l}}return e},urlAppend:function(a,b){var c=a;if(b){var d=(a+" ").split(/[?&]/);c+=d.pop()===" "?b:d.length?"&"+b:"?"+b}return c},upperCaseObject:function(a){var b={};for(var c in a)b[c.toUpperCase()]=a[c];return b},createUrlObject:function(a,b){b=b||{};if(!/^\w+:\/\//.test(a)){var c=window.location,d=c.port?":"+c.port:"",e=c.protocol+"//"+c.host.split(":").shift()+d;if(a.indexOf("/")===0)a=e+a;else{var f=c.pathname.split("/");f.pop(),a=e+f.join("/")+"/"+a}}b.ignoreCase&&(a=a.toLowerCase());var g=document.createElement("a");g.href=a;var h={};h.host=g.host.split(":").shift(),h.protocol=g.protocol,b.ignorePort80?h.port=g.port=="80"||g.port=="0"?"":g.port:h.port=g.port==""||g.port=="0"?"80":g.port,h.hash=b.ignoreHash||g.hash==="#"?"":g.hash;var i=g.search;if(!i){var j=a.indexOf("?");i=j!=-1?a.substr(j):""}return h.args=NUtil.getParameters(i),h.pathname=g.pathname.charAt(0)=="/"?g.pathname:"/"+g.pathname,h},stamp:function(){var a=0,b="_newmap_id";return function(c){return c[b]=c[b]||"_newmap_id_"+ ++a,c[b]}}(),requestAnimFrame:function(){function a(a){window.setTimeout(a,1e3/60)}var b=window.requestAnimationFrame||
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值