<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Map与Set on Last Stand</title><link>https://amatsuzero.github.io/LastStand/tags/map%E4%B8%8Eset/</link><description>Recent content in Map与Set on Last Stand</description><generator>Hugo</generator><language>zh-cn</language><lastBuildDate>Thu, 17 Jul 2025 00:00:00 +0800</lastBuildDate><atom:link href="https://amatsuzero.github.io/LastStand/tags/map%E4%B8%8Eset/index.xml" rel="self" type="application/rss+xml"/><item><title>Map与Set</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/es6/es6-012/</link><pubDate>Wed, 02 Oct 2024 00:00:00 +0800</pubDate><guid>https://amatsuzero.github.io/LastStand/posts/frontend/es6/es6-012/</guid><description>&lt;p&gt;每当去学习ES6的时候，我都会不由自主的打开阮一峰老师的&lt;a href="http://es6.ruanyifeng.com/#docs/set-map"&gt;《ES6入门》&lt;/a&gt;去学习和查找用法，相信大多数同学也都和我一样看过阮老师写的文章。&lt;/p&gt;
&lt;p&gt;当然大家也都知道ES6里常用的API就那么些，不多不少，用在项目中也是刚刚好。&lt;/p&gt;
&lt;p&gt;不过在每次读到Set和Map数据结构那一章的时候，总是有点不知所措，因为我不明白实现这样的数据结构，目的是什么，意义又是什么呢&lt;/p&gt;
&lt;p&gt;Set和Map主要的应用场景在于&lt;strong&gt;数组去重&lt;/strong&gt;和&lt;strong&gt;数据存储&lt;/strong&gt;，幸运的是在读了关于数据结构和算法之类的书籍后，恍然大悟的发现&lt;/p&gt;
&lt;p&gt;原来Set是一种叫做&lt;strong&gt;集合&lt;/strong&gt;的数据结构，Map是一种叫做&lt;strong&gt;字典&lt;/strong&gt;的数据结构&lt;/p&gt;
&lt;p&gt;那么下面就来了解下这两种数据结构，最后来亲手实现的一个ES6中的Set和Map吧&lt;/p&gt;
&lt;h3 id="集合"&gt;集合&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;集合是由一组无序且唯一(即不能重复)的项组成的，可以想象成集合是一个既没有重复元素，也没有顺序概念的数组&lt;/li&gt;
&lt;li&gt;ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值&lt;/li&gt;
&lt;li&gt;Set 本身是一个构造函数，用来生成 Set 数据结构&lt;/li&gt;
&lt;li&gt;这里说的Set其实就是我们所要讲到的集合，先来看下基础用法&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-bash" data-lang="bash"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;const s &lt;span style="color:#f92672"&gt;=&lt;/span&gt; new Set&lt;span style="color:#f92672"&gt;()&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#f92672"&gt;[&lt;/span&gt;2, 3, 5, 4, 5, 2, 2&lt;span style="color:#f92672"&gt;]&lt;/span&gt;.forEach&lt;span style="color:#f92672"&gt;(&lt;/span&gt;x &lt;span style="color:#f92672"&gt;=&lt;/span&gt;&amp;gt; s.add&lt;span style="color:#f92672"&gt;(&lt;/span&gt;x&lt;span style="color:#f92672"&gt;))&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;for&lt;/span&gt; &lt;span style="color:#f92672"&gt;(&lt;/span&gt;let i of s&lt;span style="color:#f92672"&gt;)&lt;/span&gt; &lt;span style="color:#f92672"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; console.log&lt;span style="color:#f92672"&gt;(&lt;/span&gt;i&lt;span style="color:#f92672"&gt;)&lt;/span&gt;; // &lt;span style="color:#ae81ff"&gt;2&lt;/span&gt; &lt;span style="color:#ae81ff"&gt;3&lt;/span&gt; &lt;span style="color:#ae81ff"&gt;5&lt;/span&gt; &lt;span style="color:#ae81ff"&gt;4&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#f92672"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;// 去除数组的重复成员
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;let array &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#f92672"&gt;[&lt;/span&gt;1,2,1,4,5,3&lt;span style="color:#f92672"&gt;]&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#f92672"&gt;[&lt;/span&gt;...new Set&lt;span style="color:#f92672"&gt;(&lt;/span&gt;array&lt;span style="color:#f92672"&gt;)]&lt;/span&gt; // &lt;span style="color:#f92672"&gt;[&lt;/span&gt;1, 2, 4, 5, 3&lt;span style="color:#f92672"&gt;]&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;具体用法如果还有不清楚的，这里我会在后面一一细说。现在还是来看一下以ES6中Set类(数据结构)为基础实现的集合吧&lt;/p&gt;
&lt;h4 id="set实例的属性和方法"&gt;Set实例的属性和方法&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;Set的属性：&lt;br&gt;
&lt;ul&gt;
&lt;li&gt;size：返回集合所包含元素的数量&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Set的方法：&lt;br&gt;
&lt;ul&gt;
&lt;li&gt;操作方法&lt;br&gt;
&lt;ul&gt;
&lt;li&gt;add(value)：向集合添加一个新的项&lt;/li&gt;
&lt;li&gt;delete(value)：从集合中移除一个值&lt;/li&gt;
&lt;li&gt;has(value)：如果值在集合中存在，返回true,否则false&lt;/li&gt;
&lt;li&gt;clear(): 移除集合里所有的项&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;遍历方法&lt;br&gt;
&lt;ul&gt;
&lt;li&gt;keys()：返回一个包含集合中所有键的数组&lt;/li&gt;
&lt;li&gt;values()：返回一个包含集合中所有值的数组&lt;/li&gt;
&lt;li&gt;entries：返回一个包含集合中所有键值对的数组(感觉没什么用就不实现了)&lt;/li&gt;
&lt;li&gt;forEach()：用于对集合成员执行某种操作，没有返回值&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id="创建一个集合"&gt;创建一个集合&lt;/h3&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-bash" data-lang="bash"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;function&lt;/span&gt; Set&lt;span style="color:#f92672"&gt;(&lt;/span&gt;arr &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#f92672"&gt;[])&lt;/span&gt; &lt;span style="color:#f92672"&gt;{&lt;/span&gt; // 可以传入数组
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; let items &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#f92672"&gt;{}&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; this.size &lt;span style="color:#f92672"&gt;=&lt;/span&gt; 0; // 记录集合中成员的数量
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#f92672"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;module.exports &lt;span style="color:#f92672"&gt;=&lt;/span&gt; Set;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;这里用{}对象来表示集合，也是因为对象不允许一个键指向两个不同的属性，保证了集合里的元素都是唯一的&lt;/p&gt;</description></item></channel></rss>