【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版)》

相关文章
|
19天前
|
存储 JavaScript 前端开发
js中map属性
js中map属性
31 1
|
3天前
|
JSON 前端开发 JavaScript
|
1天前
|
JavaScript 前端开发 API
揭秘现代前端开发秘籍:Vue.js与ES6如何联手打造惊艳应用?
【8月更文挑战第30天】本文介绍如何从零开始使用Vue.js与ES6创建现代前端应用。首先,通过简要介绍Vue.js和ES6的新特性,使读者了解这两者为何能有效提升开发效率。接着,指导读者使用Vue CLI初始化项目,并展示如何运用ES6语法编写Vue组件。最后,通过运行项目验证组件功能,为后续开发打下基础。适用于希望快速入门Vue.js与ES6的前端开发者。
11 3
|
2天前
|
JavaScript 前端开发 索引
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
这段代码和说明介绍了JavaScript中数组的一些常用方法。函数接收三个参数:`item`(数组项的值)、`index`(项的位置,可选)和`array`(数组本身,可选)。示例展示了如何使用`filter()`过滤非空项、`forEach()`遍历数组、`map()`处理并返回新数组、`every()`检查所有元素是否满足条件、`some()`检查是否存在满足条件的元素、`find()`获取首个符合条件的元素值以及`findIndex()`获取其索引位置。这些方法都不会修改原数组。
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
|
4天前
|
前端开发 JavaScript 开发者
翻天覆地!ES6+新特性大爆发,揭秘JavaScript代码的惊人蜕变!
【8月更文挑战第27天】自ES6标准发布以来,JavaScript新增的特性极大地提升了编程效率并简化了代码。本文重点介绍了五大特性:函数默认参数简化、模板字符串的强大功能、解构赋值的便捷性、箭头函数的简洁之美。这些特性不仅使代码更加简洁、易读,还解决了传统写法中的诸多问题。通过学习和应用这些新特性,开发者可以编写出更高效、更优雅的代码,以应对日益复杂的编程挑战。
16 2
|
9天前
|
JSON JavaScript 前端开发
JS 和 ES6 补充学习
【8月更文挑战第21天】
23 4
|
16天前
|
JavaScript 前端开发 索引
JS - includes 方法和 map 方法使用方式
这篇文章介绍了JavaScript中数组的`includes`方法和`map`方法的用法,包括它们的语法、参数说明和具体的示例代码。`includes`方法用于判断数组是否包含特定元素,而`map`方法用于对数组中的每个元素执行操作并返回新数组。
16 1
|
28天前
|
存储 JavaScript 前端开发
ES6新特性(四): Set 和 Map
ES6新特性(四): Set 和 Map
|
2月前
|
JavaScript API
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
45 1
|
存储 JavaScript 前端开发
JavaScript中的Set数据操作:交集、差集、交集、对称差集
在许多情况下,需要比较多个列表,获取它们有或没有交集、差集等等,在 Javascript 有一个数据类型可以很好的实现这些需求,那就是 Set 。
347 0

热门文章

最新文章

下一篇
云函数