内容摘要：本文转载自公众号“读芯术”(ID：AI_Discovery)。许多年来，程序员们一直使用Object和Array来存储数据，这种趋势不仅仅局限于JavaScript。除了这两个选项外，没有其他选择来存

本文转载自公众号“读芯术”(ID：AI_Discovery)。不想

许多年来，用O有程序员们一直使用Object和Array来存储数据，和和这种趋势不仅仅局限于JavaScript。存储数除了这两个选项外，据还没有其他选择来存储多个值和处理数据结构。不想然而，用O有在使用Object和Array时有几个限制，和和例如：

Array可以存储重复的存储数元素。 没有像Array那样找到Object长度的据还方法。 只有字符串可以存储在Object中，不想不记插入顺序。用O有 开发人员必须根据用例选择数组或对象。和和 像Lodash这样的存储数第三方库被用来增强数组的功能。

随着2015年ES6的据还发布，情况开始好转。ES6引入了对Map和Set的支持，旨在克服上述限制。

什么是Set和Map?

如前所述，这两个功能都是在JavaScript的ES6版本中引入的。Set是唯一元素的有序集合。“唯一元素”是b2b供应网最重要的，因为它意味着一个Set中不能存储重复的元素。但是它没有键-值对系统。

Map是Array和Object数据结构的组合。它像Object一样是键-值对的Set，但它也记住插入格式，并具有length(.size)属性。

Set的声明和初始化：一个集合可以像这样初始化。

const set = new Set(); 

const set = new Set();

· 从Set中添加和删除元素：你可以使用.add()方法轻松地将元素插入到集合中。

const set = new Set();set.add(John);set.add(Martha)set.add(Bryan);set.add(John);//set = {John,Martha,Bryan} 

JavaScript中的Set借用了很多数学集合的属性，并且只包含唯一的元素。删除元素也非常简单，使用.delete()方法删除单个元素，或使用.clear()方法删除所有元素。

set.add(John);set.add(Martha)set.add(Bryan);set.delete(Martha)//set= {John,Bryan}set.clear(); // removes all the element 

· Set的大小：使用.size，你可以很容易地找到有用的Set的大小。

set.add(a)set.add(b);set.add(c);console.log(set.size) // => 3 

· 访问Set中的元素：Set在尝试记录或访问其值时的方式不同。云服务器你可以记录数组并查看元素，但这不适用于Set。

var arr=[1,2,3];const set = new Set(arr);console.log(set) // => [objectSet]console.log(arr) // => (3) [1,2,3] 

为了访问Set，我们需要一个SetIterator()来获取所有的值。JavaScript提供了一个属性.values()来获取一个迭代器，然后我们可以将该迭代器与循环结合使用获取所有的值。如以下代码片段演示：

var arr=[1,2,3];const set = new Set(arr);variterator=set.values()console.log(iterator.next().value) //1 

检索所有元素更简单的方法是使用.forEach()，如下所示：

var arr=[1,2,3];const set = new Set(arr);set.forEach(v=>console.log(v)) 

输出：

1 2 3 

此外，你可以使用.has()方法检查是否存在某个值，如果找到该元素，该方法将返回true。

var arr=[1,2,3];const set = new Set(arr);console.log(set.has(1)); // true 

值得一提的是，尽管Set不支持键-值对元素，但keys()和entries()等方法对Set是可用的。

Set vs Array

Set和Array倾向于执行和处理相同的操作，但存在一些差异。最大的区别是Set不能像Array那样有重复项，而Set提供了一种更简单的方法来删除项。此外，Set的香港云服务器元素在插入顺序上是可迭代的。

与数学集合一样，JavaScript中的集合也可以用于执行union和intersection等操作，这些操作可以在合并数据或在两个Set中寻找公共元素时使用。

初始化和声明Map：

与Set类似，Map也可以用同样的方式声明。

const map = new Map(); 

从Map中添加和删除元素：Map支持类似Object的键值对。因此，在增加价值的同时，我们也需要提供一个密钥。这和我们在Set中看到的不一样。

const map = new Map();map.set(Name, iPhone); // map.set(key,value)formatmap.set(Brand, Apple);map.set(Price, $1000); 

要从Map中删除一个值，我们可以简单地将键传递给.delete()属性。

const map = new Map();map.set(Name, iPhone); map.set(Brand,Apple);map.set(Price, $1000);map.delete(Price); //removes the elementwith key Price 

与Set类似，可以使用.clear()删除所有元素。

map.clear() // removes all the element 

Map的大小：使用.size可以很容易地检索Map的大小(长度)。

const map = new Map();map.set(Name, iPhone);map.set(Brand,Apple);map.set(Price, $1000);console.log(map.size)//=> 3 

访问Map中的元素：Map为我们提供了一个.get()方法，通过将键作为参数传递到方法中来快速获取值。

const map = new Map();map.set(Name, iPhone);map.set(Brand,Apple);map.set(Price, $1000);console.log(map.get(Name));//iPhoneconsole.log(map.get(Brand)); // Apple 

但是如果你只想要键、值，或者键和值都想要，该怎么办呢?Map有.keys()，.values()和.entries()分别实现相同的功能。使用上面代码中的相同Map：

console.log(map.keys()); // iterator {Name,Brand,Price}console.log(map.values()); // iterator {iPhone,Apple,$1000}console.log(map.entries()); //iterator {Name:iPhone,Brand:Apple,Price:$1000} 

Map的迭代也非常简单：

//with for-each map.forEach((value, key) => {    console.log(`${key} is ${value} yearsold!`); }); // with for-of for(const [key, value] of map) {   console.log(`${key} : ${value}`); } 

此外，你可以使用.has()属性并传递键轻松地检查元素是否存在。

var map = new Map(); map.set(age,19);console.log(map.has(age)) // true since age key ispresent 

如果你决定将object转换为map，JavaScript已经搞定了。我们之前使用.entries()来获取所有键-值对，但这次我们将使用针对Object的方法。

const myObject= {   Age: 25,   Gender: Male,   Nationality: Australian }; const myMap = new Map(Object.entries(myObject)); //object to mapconstanotherObject = Object.fromEntries(myMap) // map to object 

你可以轻松地将map转换为object，如上所示。要将Map转换为Array，可以使用array .from(myMap)。

Map vs Array &Objects

Map似乎解决了Array和Object的许多缺点，比如它能够处理更复杂的操作。Map就像是Array和Object的混合体。它有一个类似array的size属性，可以以键-值对格式存储元素。除此之外，它还提供了.has()之类的方法来检查元素是否存在，这可以节省大量时间。

而且，它不要求键必须是字符串类型。你甚至可以使用一个对象作为键来帮助你编写更好的代码。

虽然Array和Object已经成为存储集合和键-值对元素的事实上的标准，但通过引入Map和Set，你可以为代码提供一种有趣的方法。Set和Map是JavaScript提供的用于存储复杂数据结构的新标准。

此外，使用这些数据结构还消除了使用第三方库(如Lodash)的需要，因为这些新的数据结构默认提供了.has()和.delete()等方法。

图源：unsplash

Array和Object在任何意义上都不是过时的，不过使用Set和Map肯定是处理数据更好的方法，尤其是在构建大型复杂应用程序时。