【ES6】JS的Set和Map数据结构

简介: 【ES6】JS的Set和Map数据结构
引言:Java、C++早就有了Map、泛型等概念。ES6正式归纳了Set和Map数据结构。

一、Set


1、基本用法


  ES6提供了新的数据结构Set。 它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数, 用来生成Set数据结构。

var S = new Set();
[2,3,5,4,5,2,2].map(x => s. add(x))
for (i of s) {console.log(i)}
//2 3 5 4

       上面的代码通过add方法向Set 结构加入成员,结果表明Set结构不会添加重复的值。

       Set函数可以接受一个数组(或类似数组的对象)作为参数,用于初始化。

var set = new Set([1, 2, 3, 4, 4])
[...set]
//[1,2,3,4]</code>
var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5
function divs () {
  return [...document. querySelectorAll('div')]
}
var set = new Set(divs())
set.size // 56
//类似于
divs(). forEach(div => set.add(div))
set.size // 56

      向Set加入值时不会发生类型转换,所以5和"5"是两个不同的值。

2、4种操作方法


  • add(value):添加某个值,返回Set结构本身。
  • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • has(value):返回一个布尔值,表示参数是否为Set的成员。
  • clear():清除所有成员,没有返回值。

3、4种遍历方法


Set结构的实例有4个遍历方法,可用于遍历成员。

  • keys():返回一个键名的遍历器。
  • values():返回一个键值的遍历器。
  • entries():返回一个键值对的遍历器。
  • forEach(): 使用回调函数遍历每个成员。
  • 【注:】由于Set结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致。

4、Set的应用


1)Set转化为数组

由于扩展运算符( … )内部使用for…of循环,所以也可以用于Set结构。代码如下。

let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
// ['red', 'green', 'blue']

2)去除数组的重复元素

方法一: 如下代码。

let arr=[3,5,2,2,5,5];
let unique = [...new Set(arr)];
//[3,5,2];

方法二: 如下代码。

let arr=new Set([3,5,2,2,5,5]);
let unique = Array.from(arr);
//[3,5,2];

3)实现并集(Union)、交集(Intersect)、差集(Difference)

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
//并集
let union = new Set([...a, ...b]);
//[1, 2, 3, 4]
//交集
let intersect = new Set([...a].filter(x => b.has(x)));
//[2,3]
//差集
let difference = new Set([..a].filter(x => !b.has(x)));
//[1]

二、Map


1、基本用法


       JavaScript的对象(Object)本质上是键值对的集合(Hash结构),但是只能用字符串作为键。这给它的使用带来了很大的限制。

var data = {};
var element = document.getElementById("myDiv");
data[element] = metadata;
data["[object HTMLDivElement]"] // metadata

       上面的代码原意是将一个DOM节点作为对象data的键,但是由于对象只接受字符串作为键名,所以element被自动转为字符串[0bject HTMLDivElement]。

       为了解决这个问题,ES6 提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值( 包括对象)都可以当作键。也就是说,Object 结构提供了“字符串一值”的对应,Map结构提供了“值一值"的对应,是-种更完善的Hash结构实现。

如果你需要“键值对”的数据结构,Map比Object更合适。

var m= new Map();
var o ={p: "Hello World"};
m.set(o, "content")
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false

2、操作方法


size属性

size属性返回Map结构的成员总数。

let map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size //2

set(key, value)

set方法设置key所对应的键值,然后返回整个Map结构。如果key已经有值,则键值会被更新,否则就新生成该键。

var m = new Map();
m.set("edition", 6) //键是字符串
m.set(262,"standard") //键是数值
m.set(undefined, "nah") //键是undefined

set方法返回的是Map本身,因此可以采用链式写法。

let map = new Map().set(1, 'a' ).set(2, 'b').set(3, 'C' );

get(key)

get方法读取key对应的键值,如果找不到key,则返回undefined。

var m = new Map();
var hello = function() {console.log("hello");}
m.set(hello, "Hello ES6!") //键是函数
m.get(hello) // Hello ES6!

has(key)

has方法返回一个布尔值,表示某个键是否在Map数据结构中。

var m = new Map();
m.set("edition", 6);
m.set(262, "standard");
m.set(undefined, "nah' );
m.has("edition")
// true
m.has("years")
// false
m.has(262)
// true
m.has(undefined)
// true

delete(key)

delete方法删除某个键,返回true。如果删除失败,则返回false。

var m = new Map();
m.set(undefined, "nah");
m.has(undefined)// true
m.delete(undefined)
m.has(undefined)// false

clear()

clear方法清除所有成员,没有返回值。

let map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2
map.clear()
map.size // 0

3、4种遍历方法


Map原生提供3个遍历器生成函数和1个遍历方法。

keys():返回键名的遍历器。

values():返回键值的遍历器。

entries():返回所有成员的遍历器。

forEach():遍历Map的所有成员。

查看更多ES6教学文章:


1. 【ES6】let与const 详解

2. 【ES6】变量的解构赋值

3. 【ES6】字符串的拓展

4. 【ES6】正则表达式的拓展

5. 【ES6】数值的拓展

6. 【ES6】数组的拓展

7. 【ES6】函数的拓展

8. 【ES6】对象的拓展

9. 【ES6】JS第7种数据类型:Symbol

10. 【ES6】Proxy对象

11. 【ES6】JS的Set和Map数据结构

12. 【ES6】Generator函数详解

13. 【ES6】Promise对象详解

14. 【ES6】异步操作和async函数

15. 【ES6】JS类的用法class

16. 【ES6】Module模块详解

17. 【ES6】ES6编程规范 编程风格

参考文献


阮一峰 《ES6标准入门(第2版)》

相关文章
|
存储 Java
告别混乱!用Java Map优雅管理你的数据结构
【10月更文挑战第17天】在软件开发中,随着项目复杂度增加,数据结构的组织和管理至关重要。Java中的Map接口提供了一种优雅的解决方案,帮助我们高效、清晰地管理数据。本文通过在线购物平台的案例,展示了Map在商品管理、用户管理和订单管理中的具体应用,有效提升了代码质量和维护性。
272 2
|
存储 Java 开发者
Java Map实战:用HashMap和TreeMap轻松解决复杂数据结构问题!
【10月更文挑战第17天】本文深入探讨了Java中HashMap和TreeMap两种Map类型的特性和应用场景。HashMap基于哈希表实现,支持高效的数据操作且允许键值为null;TreeMap基于红黑树实现,支持自然排序或自定义排序,确保元素有序。文章通过具体示例展示了两者的实战应用,帮助开发者根据实际需求选择合适的数据结构,提高开发效率。
321 2
|
JavaScript 前端开发 Java
除了 JavaScript,还有哪些编程语言支持 Set 类型
【10月更文挑战第30天】这些编程语言中的 `Set` 类型虽然在语法和具体实现细节上有所不同,但都提供了类似的集合操作功能,方便开发者在不同的编程场景中处理集合相关的数据和逻辑。
475 113
|
12月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
存储 安全 Go
Go语言中的map数据结构是如何实现的?
Go 语言中的 `map` 是基于哈希表实现的键值对数据结构,支持快速查找、插入和删除操作。其原理涉及哈希函数、桶(Bucket)、动态扩容和哈希冲突处理等关键机制,平均时间复杂度为 O(1)。为了确保线程安全,Go 提供了 `sync.Map` 类型,通过分段锁实现并发访问的安全性。示例代码展示了如何使用自定义结构体和切片模拟 `map` 功能,以及如何使用 `sync.Map` 进行线程安全的操作。
425 9
|
开发者
除了交集运算,Set 类型还可以用于哪些数据结构的操作?
【10月更文挑战第30天】`Set`类型在数据结构操作方面提供了丰富的功能和便利,能够帮助开发者更高效地处理各种数据集合相关的任务,提高代码的简洁性和性能。
|
存储 算法 Java
Set接口及其主要实现类(如HashSet、TreeSet)如何通过特定数据结构和算法确保元素唯一性
Java Set因其“无重复”特性在集合框架中独树一帜。本文解析了Set接口及其主要实现类(如HashSet、TreeSet)如何通过特定数据结构和算法确保元素唯一性,并提供了最佳实践建议,包括选择合适的Set实现类和正确实现自定义对象的hashCode()与equals()方法。
368 4
|
存储 Java 开发者
Java中的Map接口提供了一种优雅的方式来管理数据结构,使代码更加清晰、高效
【10月更文挑战第19天】在软件开发中,随着项目复杂度的增加,数据结构的组织和管理变得至关重要。Java中的Map接口提供了一种优雅的方式来管理数据结构,使代码更加清晰、高效。本文通过在线购物平台的案例,展示了Map在商品管理、用户管理和订单管理中的具体应用,帮助开发者告别混乱,提升代码质量。
183 1
ES6中的Set数据结构的常用方法和使用场景
ES6中的Set数据结构的常用方法和使用场景