ES6 是 JavaScript 中非常重要和受欢迎的版本之一,其中增加了许多新特性和 API,其中包括 Set 和 Map,这是两种新的数据结构,可以极大地简化代码并使其更加可读。
Set
Set 是一个无序的集合,内部的数据不会重复。通过使用 Set,可以使用非常简单的代码来执行许多操作,例如添加,删除和查找元素。
创建 Set
要创建一个 Set,请使用以下语法:
let set = new Set();
Set 中添加元素
我们可以通过使用 add
方法将元素添加到 Set 中,例如:
set.add("Apple"); set.add("Banana"); set.add("Pear");
Set 中删除元素
我们可以通过使用 delete
方法将元素从 Set 中删除,例如:
set.delete("Apple");
Set 中查找元素
我们可以通过使用 has
方法查找 Set 中的元素,例如:
set.has("Banana"); // true
Set 中遍历元素
有许多方法可以遍历 Set 中的元素,包括 forEach()
,for...of
等,例如:
set.forEach((item) => { console.log(item); }); for (let item of set) { console.log(item); }
Map
Map 是一个无序的键值对集合,它与对象(Object)有点相似,但与对象不同的是,Map 中的键可以是任何值(包括原始类型,对象甚至是函数),而对象的键只能是字符串。
创建 Map
要创建一个 Map,请使用以下语法:
let myMap = new Map();
Map 添加键值对
我们可以通过使用 set
方法将键值对添加到 Map 中,例如:
myMap.set("name", "Bob"); myMap.set("age", 25);
Map 删除元素
我们可以通过使用 delete
方法将键值对从 Map 中删除,例如:
myMap.delete("age");
Map 查找元素
我们可以通过使用 get
方法查找 Map 中的元素,例如:
myMap.get("name"); // 'Bob'
Map 中遍历元素
有许多方法可以遍历 Map 中的元素,包括 forEach()
,for...of
等,例如:
myMap.forEach((value, key) => { console.log(key + " = " + value); }); for (let [key, value] of myMap) { console.log(key + " = " + value); }
Map 的应用场景
通过上述内容,我们可以看到 Set 和 Map 的基本操作,那么这两个数据结构在前端中有哪些实际应用场景呢?
Set 的应用场景
- 去重:使用 Set 可以轻松去重,例如:
let arr = [1, 2, 2, 3, 3, 3, 4, 4, 5]; let uniqueArr = [...new Set(arr)]; // [1, 2, 3, 4, 5]
- 判重:使用 Set 可以轻松判断某个元素是否在数组中出现过,例如:
let arr = [1, 2, 3, 4, 5]; let set = new Set(arr); set.has(3); // true
Map 的应用场景
- 缓存:使用 Map 可以轻松实现缓存,例如:
-- -------------------- ---- ------- --- ----- - --- ------ -------- -------------- - -- ---------------- - ------ -------------------------------- - ---- - ------ --------------------- -- ----------------------- -- - -------------- ------ ------ ----- --- - -
这里,我们将请求的 URL 当做 Map 的键,请求返回的数据缓存在 Map 中,如果下一次再次请求相同的 URL,就可以直接从缓存中获取数据,避免重复请求。
- 统计词频:使用 Map 可以轻松地统计字符串中的单词数量,例如:
-- -------------------- ---- ------- --- --- - -- ---- ----------- ---------- -- --- ---- ---------- --- --- - ----------- --- --- --------- - --- ------ --- ---- ---- -- ---- - -- --------------------- - ------------------- ------------------- - --- - ---- - ------------------- --- - - ----------------------------------------- -- -
通过这个例子,我们可以看到,使用 Map 可以轻松统计字符串中单词的出现次数。
总结
以上就是 ES6 中 Set 和 Map 的详解及其应用场景。无论在前端开发还是后端开发中,Set 和 Map 都有很大的实用性,学习掌握它们,可以在实际开发中为我们带来许多便利和提高效率的作用。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/649136e148841e9894f37a20