Map和Set到底有啥用

握风
237 阅读3分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

作为一个后端，js还真没少写，但是还真没有系统的去看过js相关文档。
都是工作需要，够用就用
最近有时间了，随便翻了一下ES6文档涨了不少见识

Iterable类

es6版本中规范的一种新的类型
将Array、Map、Set都归到它里面
Array比较常用，也比较熟悉，够用即可，就不展开了

而Iterable类最大的特点就是，属于他里面的数据类型的数据，可以使用for-of来遍历

Map

类数组、又类对象的一种数据类型，最大特点可以自定义各种类型的键（Key）

相比array数组，数组一般都不写键，用默认的数字下标，从0开始，自增
就算自定义下标，也很局限，要么是默认的0、1、2、3....，要么是字符串，还可以是 Symbol（也是一种新数据类型，具有唯一性）

同理，对象的Key、json的key 也一般都是string
Map的key可以是对象、函数，以及任意类型，可以把他看成是一个键值对集合类型吧

再有就是Map对象的处理方法非常丰富，日常处理数据非常方便，比如Map对象长度直接调用size等
最重要的一点就是，官方推荐使用Map，因为底层对他的性能进行了优化
因此，处理对象上Map不仅有丰富的api优势，还有性能优势，这才是它最大的亮点

简单使用

var m = new Map();
//添加：null做键...
m.set(null, "123456");
//访问
m.get(null);

image.png

还可以一次输出所有的键和值

var m2 = new Map([[1, "a"], ["b", 2], [undefined, Symbol("234")]]);
m2.keys();
m2.values();

image.png

Set

类数组的一种数据类型，最大特点就是内部元素值不会重复

根据他的这个特点，非常适合做数组去重

var arr = [1,2,3,4,1,1,24,1,0,45,2];
var ss = new Set(arr);
console.log(ss);

image.png

就这一个不重复特点，完全可以把去重这个功能垄断了

扩展运算符（...）

结合中括号一起 [ ] 使用 ---> 相当于快速处理完数据后再次快速转为数组类型 image.png

还可以快速合并 image.png

arguments

他是一个对象，只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数！它是类数组对象
除了箭头函数以外，该对象是所有函数中都可以使用的局部变量 只能在函数内使用！！！

当不确定调用函数时，传进来几个参数时可以用它！

function F() {
    var sum = 0,
        len = arguments.length;
    for (var i = 0; i < len; i++) {
        sum += arguments[i];
    }
    return sum;
}
F(1, 2, 3, 4, 5); //15

可以获取传入的所有参数：

function F() {
    var len = arguments.length;
    for (var i = 0; i < len; i++) {
        console.log(arguments[i]);
    }
}
F(1, 2, 3, 4, 5); //1,2,3,4,5

其实最常用的，一般是用来判断函数中参数的个数，然后根据结果做出相应的逻辑处理

结合上面的...(扩展运算符)，可以表示 若干参数

function F(...rest){
    //逻辑代码
}

一些个人理解哈

Map和Set的用处，个人感觉就是给Array/Object 锦上添花用的。
万变不离其宗，无非就是使用过程中，发现 array/Object 有设计上的缺陷，当前规则内无法解决了或者说解决取来比较麻烦和繁琐，甚至性能有问题，于是新增些东西，去弥补不足！
那为什么不在原来基础上修改呢？ ---> 为了更好的向下兼容？ 那就不得而知了

文末总结

还是那句话，存在即合理。
没有一开始就完美的作品，人也一样。摸索中前进吧，虽然无法达到完美，但是可以无限趋于完美。

avatar
文章
阅读
粉丝