JavaScript集合类：Array、Map、Set

谁借莪１个温暖的怀抱￠ 2021-10-15 20:23 380阅读 0赞

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。  
本文链接：https://blog.csdn.net/cathar/article/details/53363845  
在JavaScript中不像java有那么多的数据结构。在实际工作中，使用对象还是数组需要仔细考虑下。例如：如果实现 Map的功能，既可以使用关联数组，也可以使用对象，那么区别是什么呢？   
需要注意的是，在JavaScript中，所有变量实际上都是某种类型的对象。记住这点，就不难理解一个数组其实就是一个Array() 类型的对象，那么就可以给它添加各种属性。而所谓的关联数组，其实就是给该数组对象增加了很多属性，这在访问时就可以看出区别。

一、基本概念  
对象：对象的每个值都是对象的一个属性。创建对象可以用var obj = \{\}：  
var person = \{age:18,name:"John"\};  
var person2 = Object()  
person2.age = 19  
person2.name = "Tim"  
  
Array()：传统数组（下标访问）；关联数组（其实是数组对象的属性）.

var persons = Array(4) //创建只有四个元素的数组   
var names1 = \['a','b','c'\]//   
var persons2 = Array()   
persons2\["age"\] = 18   
persons2\["name"\] = "John"

既然对象就可以实现Map的功能，为啥要有map？ 注意：JavaScript的对象的键必须是字符串。  
Map：是一组键值对的结构，具有极快的查找速度。通过传入数组的数组来建立。通过调用 .set(key,value) 来添加新的元素。  
var m = new Map(\[\['Michael', 95\], \['Bob', 75\], \['Tracy', 85\]\]);  
m.get('Michael'); // 95  
m.set('Adam', 67); // 添加新的key-value  
  
Set：Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set：  
var s1 = new Set(); // 空Set  
var s2 = new Set(\[1, 2, 3\]); // 含1, 2, 3  
  
重复元素在Set中自动被过滤，add(key) 方法可以添加元素到Set中。

二、iterable类型遍历集合：Array、Map和Set都属于iterable类型  
具有iterable类型的集合可以通过新的for … of 循环来遍历。  
var a = \['A', 'B', 'C'\];  
var s = new Set(\['A', 'B', 'C'\]);  
var m = new Map(\[\[1, 'x'\], \[2, 'y'\], \[3, 'z'\]\]);  
for (var x of a) \{ // 遍历Array  
    alert(x);  
\}  
for (var x of s) \{ // 遍历Set  
    alert(x);  
\}  
for (var x of m) \{ // 遍历Map  
    alert(x\[0\] + '=' + x\[1\]);  
\}  
  
for … of循环和for … in循环有何区别？前者只取集合本身元素，而不是属性，后者当我们给数组人为天添加属性后，就会方位所有的key，原数组则返回数组下标。  
var a = \['A', 'B', 'C'\];  
a.name = 'Hello';  
for (var x in a) \{  
    alert(x); // '0', '1', '2', 'name'  
\}  
/\* for ... in循环将把name包括在内，但Array的length属性却不包括在内。for ... of循环则完全修复了这些问题，它只循环集合本身的元素：\*/   
var a = \['A', 'B', 'C'\];  
a.name = 'Hello';  
for (var x of a) \{  
    alert(x); // 'A', 'B', 'C'  
\}  
  
直接使用iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。   
以Array为例：  
var a = \['A', 'B', 'C'\];  
a.forEach(function (element, index, array) \{  
    // element: 指向当前元素的值  
    // index: 指向当前索引  
    // array: 指向Array对象本身  
    alert(element);  
\});  
// 注意，forEach()方法是ES5.1标准引入的，你需要测试浏览器是否支持。Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身：  
var s = new Set(\['A', 'B', 'C'\]);  
s.forEach(function (element, sameElement, set) \{  
    alert(element);  
\});  
// Map的回调函数参数依次为value、key和map本身：  
var m = new Map(\[\[1, 'x'\], \[2, 'y'\], \[3, 'z'\]\]);  
m.forEach(function (value, key, map) \{  
    alert(value);  
\});  
  
那么对于之前提到的 for… in 出现的返回key 的问题用 for … of 或者 forEach 回调都可以解决。

var a = \['A', 'B', 'C'\];  
a.name = 'Hello';  
for (var x of a) \{  
    alert(x); // 'A', 'B', 'C'  
\}  
a.forEach(function(v,i)\{  
    alert(v); // 'A', 'B', 'C' 与 for ... of 功效相同  
\})   
 ————————————————   
版权声明：本文为CSDN博主「cathar」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/cathar/article/details/53363845