📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • Set
  • 基本概念
  • 去重
  • Set的实例属性和方法
  • Map
  • 基本概念
  • Map的实例属性和方法
  • WeakSet
  • WeakMap
在GitHub上编辑
  1. 前端技术
  2. javaScript
  3. ES6

新的数据结构Set和Map

Set

基本概念

Set和Array类似,但是Set里的元素是唯一的,没有重复的值。

Set本身是一个构造函数,用来生成Set数据结构,参数接收一个数组

let set = new Set([1,2,3,4])

去重

Set能去掉重复的值,它判断值是否相等的方法类似于严格相等(===),因此对于引用类型来说只有两个变量地址相同才能被去重。

let a = {a: 1}
let b = a;
new Set([a,b])  // [a]

// 这种情况无法达到去重的目的
let c = {a: 1}
let d = {a: 1}
new Set([a,b])  // [c,d]

Set的实例属性和方法

操作方法

  • add() 添加某个值

  • delete() 删除某个成员

  • has() 返回一个布尔值,判断Set中是否包含该成员

  • clear() 清除所有成员

属性

  • Set.prototype.size Set成员数量

  • Set.prototype.constructor 指向构造函数Set

遍历操作

  • Set.prototype.values()

  • Set.prototype.keys()

  • Set.prototype.entries()

  • Set.prototype.forEach()

遍历的顺序与添加顺序相关

由于Set没有key,因此Set.prototype.keys()和``Set.prototype.values()`行为相同

前三个方法都是返回遍历器。

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

for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

Map

基本概念

Map是键值对结构,和Object类似,但是Object只接受字符串或Symbol类型为键名,而Map支持任意类型作为键名。

let map = new Map()

Map的实例属性和方法

属性

  • Map.prototype.size Map成员数量

  • Map.prototype.constructor 指向构造函数Map

方法

  • set(key,value) 设置成员

  • get(key) 根据键获取值

  • has(key) 判断是否有次成员

  • delete(key) 删除成员

  • clear() 清理所有成员

遍历操作

  • Set.prototype.values()

  • Set.prototype.keys()

  • Set.prototype.entries()

  • Set.prototype.forEach()

遍历的顺序与添加顺序相关

WeakSet

WeakSet与Set相似,但是有两点不同

  1. WeakSet的成员必须是对象(引用类型)

  2. WeakSet是弱引用

WeakSet 中的对象都是弱引用,即垃圾回收机制不考虑 WeakSet 对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于 WeakSet 之中。

WeakSet只有add、has、delete方法,没有size属性,并且不能使用任何遍历方法。

WeakMap

WeakMap与Map相似,但是有两点不同。

  1. WeakMap只支持引用类型作为键名,原始类型作为键名会报错

  2. WeakMap是弱引用,WeakMap对对象的引用,不计入垃圾回收机制。

let v = new Date()
typeof v
// "object"
a.set(v,1)
// WeakMap(1) { Date Wed Nov 03 2021 15:24:35 GMT+0800 (中国标准时间) → "123"}
a.set(1,1)
// TypeError: WeakMap key must be an object, got 1

当我们希望对对象存放一些信息时,就可以利用WeakMap弱引用的特点。

let p1 = document.getElementById("#p1") 
let p2 = document.getElementById("#p2") 
let obj = {p1: 1, p2: 2}

// 需要手动删除,否则会该对象不会被回收
delete obj.p1 ;
delete obj.p2 ;

这样很不方便,一旦忘记就很容易造成内存泄露。

有了WeakMap后我们可以这样写

let p1 = document.getElementById("#p1") 
let map = new WeakMap()
map.set(p1,"p1节点")
map.get(p1) // p1节点
// 无需手动删除,下次垃圾回收时会自动回收

注意,WeakMap 弱引用的只是键名,而不是键值。键值依然是正常引用。

当键名被垃圾回收时,值也会一起消失。

WeakMap只有set、has、delete和get方法,没有size属性,并且不能使用任何遍历方法。

上一页你不知道的for...of下一页JavaScript异步编程终极解决方案

最后更新于3年前