ES6 - 你知道Map和Set和Array哪个执行查找的效率最高吗？

目录

1 说一说Set 

1.1 什么是Set?

1.2 定义一个Set

1.3 Array和Set互转

2 说一说Map 

2.1 Map和JSON对象类似？

2.2 Map的key值可以是对象

3 对比一下执行查找元素的效率

---

1 说一说Set 

1.1 什么是Set?

Set是ES6中的一个类数组，意思就是他类似数组。而且内部元素都是唯一的，所以我们常常用他来做数组去重。

1.2 定义一个Set

首先定义一个Set，估计将值设置为重复

<script>
    let mySet = new Set([1, 2, 3, 1, 3, "我们", "nimen", "我们"]);
    console.log('定义的mySet长什么样？', mySet);
</script>

打印效果如下：

由此可见，重复内容被去掉了。那么如果我们定义元素是一个对象呢？来看一下

<script>
            let mySet = new Set([1, 2, 3, 1, 3, "我们", "nimen", "我们", 
                {"name": "jim"}, 
                {"name": "jim"}
            ]);
            console.log('定义的mySet长什么样？', mySet);
</script>

 效果如下：

由此可见，重复的对象，我们虽然眼睛看上去是重复的，但在JS程序看来，对象的引用值却是不同的，也就是不同的元素，所以并没有去重。

1.3 Array和Set互转

这个很重要，一定要熟练掌握，为什么呢？因为面试的时候很多人我发现不熟练啊。互转代码如下：

<script>
            let mySet = new Set([1, 2, "我们", null, 3, 5]); // 这是一个Set
            let myArray = new Array(1, 2, 3, "我们", null, "我们"); // 这是一个Array
            console.log('Set：：', mySet);
            console.log('Array：：', myArray);
            let mySetToArray = [...mySet]; // Set转为数组
            let mySetToArray2 = Array.from(mySet);
            console.log('Set到Array的转换1', mySetToArray);
            console.log('Set到Array的转换2', mySetToArray2);
            let myArrayToSet = new Set(myArray);
            console.log('Array到Set的转换', myArrayToSet);
</script>

2 说一说Map 

2.1 Map和JSON对象类似？

其实也可以说类似吧，甚至没有Map的时候，很多时候大家常常这样说，我给你传了一个JSON，我给你传了一个对象，我给你传了一个Map，其实是比较混淆的，但大家都知道，你给我传了一个大括号，然后套了一些键值对。那么他们长的区别大吗？

<script>
            let myMap = new Map();
            myMap.set("name", "jim");
            myMap.set("age", 25);
            myMap.set("name", "tom");
            console.log('看一下我的May:：：', myMap);
            let myObject = {"name": "jim", "age": 25};
            console.log('看一下我的Object:：：', myObject);
</script>

由此可见，Map中对同一个key值重复赋值，内容也会被覆盖掉。 

2.2 Map的key值可以是对象

我们一般常常喜欢定义对象的时候，key值是一个字符串，这样开发的时候可以少出问题，所以就是为什么有些人做着做着发现bug多了，弄不过来了。有时候又发现，明明代码是好使的，我没有动他，为啥又坏啦，就是因为其实代码我们没有使用的地方还有很多，我们只是在用常用的知识点，这同时也是面试的问题，面试官就爱问一些不常用的东西，然后考你平时接触的多不多。

比如我们试一下Map和JSON对象的key值是否可以定义一些乱七八糟的东西。

<script>
            let myMap = new Map();
            let myObj = {"name": "jim"};
            let myArray = [1, 2];
            let myNull = null;
            let myFn = function() {
                return "age"
            }
            myMap.set(myObj, "我的key值是对象");
            myMap.set(myArray, "我的key值是数组");
            myMap.set(myNull, "我的key值null");
            myMap.set(myFn, "我的key值函数");
            console.log('乱七八糟的Map::', myMap);
</script>

由此可见，功能强大了，也越来越乱套了。 而之前的JSON对象，你可以试一下，其实key值倒是也能设置很多乱七八糟的东西，但明显不如Map这么强大而乱糟糟。

3 对比一下执行查找元素的效率

比如我们分别定义一个1000个元素的数组、Set和Map，然后分别从中查找一个元素

<script>
            let arr = [];
            let mySet = new Set();
            let myMap = new Map();
            for (let i=0;i<1000;i++) {
                arr.push(i);
                mySet.add(i);
                myMap.set(i);
            }

            console.time();
            console.log('-----------数组查找----------');
            let hasElement1 = false;
            for (let x=0;x<1000;x++) {
                if (arr.includes(500)) {
                    hasElement1 = true;
                    break;
                }
            }
            console.timeEnd();
            console.time();
            console.log('-----------Set查找----------');
            let hasElement2 = false;
            for (let y=0;y<1000;y++) {
                if (mySet.has(500)) {
                    hasElement2 = true;
                    break;
                }
            }
            console.timeEnd();
            console.time();
            console.log('-----------Map查找----------');
            let hasElement3 = false;
            for (let z=0;z<1000;z++) {
                if (myMap.has(500)) {
                    hasElement3 = true;
                    break;
                }
            }
            console.timeEnd();
</script>

貌似这两个 has 方法更快一些