Set、Map、类数组，傻傻区分不清楚？
前言
大家都知道，数组和对象是两种不同的数据结构，虽说在js数据类型中都属于Object，但是还是有一定的区别，通过字面量以及isArray、instanceof等方法，我们很好区分这两者。由于使用场景的原因js中衍生了很多类似的数据结构，这些数据结构和数组、对象非常接近，使用过少或基础不牢固的同学（没错，说的是我）对他们的概念、用法不是很清晰，并且很容易混淆。今天在这里对这一类的数据结构做一个总结，让我们能明确区分他们的使用场景和用法。
类数组
在js中，具有length属性，但却不能使用数组类的方法的数据结构被称为类数组。
arguments
arguments是一个可表示传递给函数的参数的类数组对象，所有非箭头函数都可以使用。
function fun(a, b) {
//Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
console.log(arguments)
//1
console.log(arguments[0])
}
fun(1,2);
arguments包含一个callee属性，该属性可指向参数所属的当前执行函数；
其他
NodeList：节点的集合，通常是某些方法属性返回的实时集合。如Node.childNodes或document.querySelectorAll方法返回的标签、节点。
HTMLCollection：表示一个包含了元素的通用集合（根据文档流顺序展示）；
其他符合类数组概念的数据结构；
剩余参数
在ES6中，可以使用剩余参数语法来表示一个不定量的参数，这个参数为数组，以三个点为前缀。
function(...args) {
}
和arguments的区别：
- 剩余参数表示无对应形参的实参，arguments对象表示传给函数的所有实参；
- arguments是类数组，剩余参数是数组，具有数组的属性和方法；
- 剩余参数没有arguments自身的属性；
剩余参数语法可以用来展开数组和对象
//展开数组
//123
console.log(...[1,2,3]);
//展开对象,必须放在一个对象内
//{a: 1, b: 2, c: 3}
console.log({...{a:1,b:2,c:3}});
通过展开语法可以复制、合并数组；字符串转数组（字符串可看作类数组，通过展开运算符直接展开）；类数组转换数组；复制对象、和解构赋值结合使用等等。
Set
Set是一种特殊的对象，是一系列无序、无重复值的数据集合，无字面量写法，通过Set构造函数的实例创建。
const s = new Set();
Set的方法和属性
Set.add() 在Set的尾部添加一个元素，可连续调用：
const s = new Set();
s.add(a).add(1).add(2);
Set.has() 检测是否包含某个值的方法，返回一个布尔值
const s = new Set();
s.has(1);
Set.delete() 删除指定值
const s = new Set();
s.delete(1);
Set.clear() 删除所有值，清空set；
const s = new Set();
s.clear();
Set.forEach() 按照成员添加时的顺序进行遍历，键和值相等；
const s = new Set();
//它有两个参数第一个是回调，第二个表示this指向；
s.forEach(function(value,key,set){// value与key相等，set为原set；console.log(value,key,set)
},windows)
Set.entries() 返回一个新的迭代器对象，包含所有Set值的数组，键和值相等；
const s = new Set();
s.add(1).add(2);
const i = s.entries();
for (const entry of i) {console.log(entry);//[1, 1]//[2, 2]
}
Set.size() 表示set的长度,类似于数组的length;
const s = new Set();
//0
s.size;
Set的用法及使用场景
添加不同参数的形式创建Set：
//数组
const s = new Set([1,2,3]);
console.log(s);//Set(3) {1, 2, 3}
//字符串
const s = new Set("abc");
console.log(s);//Set(3) {a, b, c}
//类数组
function fun() {const s = new Set(argument);console.log(s);//Set(3) {1, 2, 3}
}
fun(1,2,3)
//Set
const s = new Set("abc");
const s1 = new Set(s);
console.log(s1);//Set(3) {a, b, c}
使用场景：
- 字符串或数组去重；
- 仅遍历，不需要数组下标访问时；
- 使用Set自身的方法和属性时；
注意：Set中判断成员值重复是通过===，特殊的是在Set中NaN被认为与NaN重复（Map同理）；
Map
Map是一种键值对的集合，和普通对象非常接近区别是对象的键一般是字符串，Map的键任何类型的数据都可以；通过Map构造函数实例创建；
let m = new Map();
m.set(key,value);
Map的方法和属性
Map.set() 在Map中添加一组指定键关联的值：
const m = new Map();
//Map(3) {"a" => 1, "b" => 2, "c" => 3}
m.set("a",1).set("b",2).set("c",3);
Map.get() 返回Map中指定键的值，没有则返回undefined
//1
m.get("a");
Map.delete() 删除指定键的值，返回布尔值
//true
m.delete("a");
Map.clear() 删除所有值，清空Map；
m.clear();
Map.forEach() 按照成员添加时的顺序进行遍历,执行回调；
const m = new Map();
//它有两个参数第一个是回调，第二个表示this指向；
m.forEach(function(value,key,Map){console.log(value,key,Map)
},windows)
Map.entries() 返回一个新的迭代器对象，包含所有Map键和值的数组，以插入顺序排列；
const m = new Map();
m.set('a', 1);
m.set('b', 2);
const i = m.entries();
console.log(i.next().value);
// expected output: ["a", 1]
Map.size() 表示Map的长度,类似于数组的length;
const m = new Set();
//0
m.size;
Map的用法及使用场景
添加不同参数的形式创建Map：
//数组，必须是二维数组,键和值对应
const m = new Map([["a",1],["b",2]]);
console.log(m);//Map(2) {"a" => 1, "b" => 2}
//Set,必须键和值都有
const s = new Set([["a",1],["b",2]]);
const m = new Map(s);
console.log(m);//Map(2) {"a" => 1, "b" => 2}
//Map
const m = new Map([["a",1],["b",2]]);
const m1 = new Map(m);
console.log(m);//Map(2) {"a" => 1, "b" => 2}
使用场景：
- 字符串以外的值做key；
- 复制Map；
- 只需要键值对时可使用Map；
- 使用Map自身的方法和属性时；
- 当模拟现实世界实体时，如人、物等使用对象，字面量表示比较合适；
写在最后
js因其弱类型语言的特点，数据类型之间转换非常容易、灵活，它的标准内置对象及所携带的方法和属性非常丰富，熟练的掌握它们才能根据业务场景灵活的应用。
最后
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
有需要的小伙伴，可以点击下方卡片领取，无偿分享