顶级 await 演示 - 在模块顶层使用异步
在 ES 模块中直接使用顶层 await,观察执行顺序和依赖加载。
UD5工具箱
在 ES 模块中直接使用顶层 await,观察执行顺序和依赖加载。
对比结构化克隆与传统深拷贝,演示 ArrayBuffer 等可转移对象如何提升性能。
创建 ArrayBuffer,用不同 TypedArray 视图读写,观察字节布局和大小端差异。
创建带 # 私有字段的类,尝试外部访问观察语法错误,理解封装。
使用新的迭代器辅助方法链式处理数据,查看懒求值效果。
创建 Symbol,查看其描述与唯一性,理解如何作为对象属性键使用。
创建带弱引用的集合,观察对象被垃圾回收后条目自动消失的行为。
使用 Temporal 提案中的对象(PlainDate, ZonedDateTime 等)进行日期运算和格式化。
编写 HTML 和 import map,在浏览器中直接导入裸标识符模块并执行。
模拟高频事件流,分别应用防抖和节流策略,用时间轴展示处理函数实际被调用的时机。
编写 generator 函数,逐步 next() 并显示每次 yield 的值和状态,理解惰性求值。
输入一个多参数函数,自动生成柯里化版本并演示逐步传参调用的过程。
编写函数并选择调用方式(普通、方法、call、apply、箭头等),输出 this 的值。
编写嵌套函数并单步执行,直观展示每个函数的作用域和闭包变量。
列出所有 Reflect 静态方法,提供参数输入并执行,查看返回值和副作用。
创建一个 Proxy,定义各种陷阱函数,操作对象时实时显示被拦截的属性和行为。
对一个耗时函数应用记忆化,展示相同输入下第二次调用速度的提升和缓存命中。
添加一系列异步任务并观察其按顺序执行的过程,对比并行与串行效果。
创建多个 Worker 同时执行计算任务,对比串行与并行的效率。
输入一个对象构造器名称,以树状图显示其原型链,帮助理解 JS 继承机制。
发起一个可取消的 fetch 请求,点击按钮取消,展示如何中断网络请求。
使用 Intl.Segmenter 按字素(而非码点)正确分割文本,演示处理 Emoji 和组合字符。
构建 Promise 链并显示每个 then/catch 的执行时间与状态,帮助理解微任务调度。
在主线程和 Worker 之间使用 SharedArrayBuffer 和 Atomics 进行同步通信。
输入字符串并使用 URL.canParse() 判断是否为有效 URL,不抛出异常。
构建嵌套元素,触发事件并逐步显示事件流经路径,可切换捕获/冒泡模式。
对比 ES Module 和经典脚本的变量作用域、严格模式以及执行时机。
获取和释放命名锁,观察多个标签页如何排队等待资源访问。
输入复杂对象,使用 structuredClone 进行深拷贝,并对比原始对象与克隆体,展示可拷贝类型。
使用新的 Navigation API 拦截导航、管理历史条目,构建类 SPA 体验。