不想用Object和Array存储数据,你还有Set和Map

更新时间:2020-12-16 15:13:50点击次数:396次
什么是Set和Map?
如前所述,这两个功能都是在JavaScript的ES6版本中引入的。Set是唯一元素的有序集合。“唯一元素”是最重要的,因为它意味着一个Set中不能存储重复的元素。但是它没有键-值对系统。
Map是Array和Object数据结构的组合。它像Object一样是键-值对的Set,但它也记住插入格式,并具有length(.size)属性。
· 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))
输出:
此外,你可以使用.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()等方法。
Array和Object在任何意义上都不是过时的,不过使用Set和Map肯定是处理数据更好的方法,尤其是在构建大型复杂应用程序时。

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息