JavaScript ES6 全新的Set、Map数据结构

JavaScript ES6 全新的Set、Map数据结构

Map、Set都是ES6新的数据结构, 都是新的内置构造函数, 也就是说typeof的结果, 多了两个:

Set 是不能重复的数组, 但不能[某一项来枚举出来]

Map 是可以任何东西当做键的对象

set()数据结构

ES6 提供了新的数据结构 Set。它类似于数组, 但是成员的值都是唯一的, 没有重复的值。

复制代码
let s = new Set();
s.add(1);
s.add(2);
s.add(3);
s.add(3);
s.add(3);
s.add(4);
s.add(5);
console.log(s) //Set { 1, 2, 3, 4, 5, 6 }

集合中添加数据用add()方法, 会自动过滤已经有的元素。

最快的数组去重方法, 转化为数组:

复制代码
let s = new Set([1,2,3,3,3,4,5]);
console.log([...s]) //[ 1, 2, 3, 4, 5 ]
let s = new Set([1,2,3,4,5]);
console.log(s.size) // 5
console.log(s.has(5)) // true
console.log(s.delete(5)) // true
console.log(s) // Set { 1, 2, 3, 4 }

集合的关注点是在元素里面, 而不关注顺序, 所以不提供s[0]来枚举某项API, 但是可以转为数组[...s]

Map()数据结构

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

为了解决这个问题, ES6 提供了 Map 数据结构。它类似于对象, 也是键值对的集合, 但是"键"的范围不限于字符串, 各种类型的值(包括对象)都可以当作键。

也就是说, Object 结构提供了"字符串---值"的对应, Map 结构提供了"值---值"的对应, 是一种更完善的 Hash 结构实现。如果你需要"键值对"的数据结构, Map 比 Object 更合适。

复制代码
let m = new Map();
const o = {a:1,b:2};
m.set("haha", 123);
m.set(o, 456)
m.set(888,789)
console.log(m)
console.log(m.get(o)) //使用get()方法根据key获取对应的value
console.log(m.size) //获取对应的value数量

使用get()来得到元素的值, key是区分类型的。

遍历数据结构

使用for of 遍历数据结构

复制代码
let m = new Map();
m.set('a', 100)
m.set('b', 200)
m.set('c', 300)
//遍历key
for(let key of m.keys()){
console.log(key);
}
//遍历value
for(let value of m.values()){
console.log(value);
}

for...of遍历key 和 value

复制代码
let m = new Map();
m.set('a', 100)
m.set('b', 200)
m.set('c', 300)
for(let [key,value] of m){
console.log(key, value);
}

对象转数组

Array.from()方法用于将两类对象转为真正的数组:类似数组的对象和可遍历的对象(包括 ES6 新增的数据结构 Set 和 Map)。

复制代码
let m = new Map()
m.set('a', 100)
m.set('b', 200)
m.set('c', 300)
console.log(Array.from(m)) //将m转换为正常的数组
console.log(Array.from(m.keys())) //将m的键名转换为正常的数组
console.log(Array.from(m.values())) //将m的键值转换为正常的数组
相关推荐
zwjapple30 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
枯萎穿心攻击31 分钟前
响应式编程入门教程第二节:构建 ObservableProperty<T> — 封装 ReactiveProperty 的高级用法
开发语言·unity·c#·游戏引擎
Eiceblue2 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762903 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器