标签: JavaScript
62 个内容
笔记(50)
JavaScript单线程事件循环下，利用Promise/async/await实现并发控制。主要方案：1. Scheduler类（推荐），基于队列+计数器，add任务自动调度max并发；2. asyncPool函数，Set跟踪执行任务+Promise.race限流批处理。核心：闭包劫持、递归触发、错误处理防死锁。
本文阐述JavaScript Proxy中`receiver`参数的核心作用：代表发起操作的对象。主要解决原型链继承时getter/setter `this`绑定偏移问题。通过`Reflect.get(target, prop, receiver)`和`Reflect.set(target, prop, value, receiver)`正确绑定`this`至调用者。最佳实践：handler中始终传入`receiver`。
WebAssembly (Wasm) 在计算密集型任务中比 JavaScript (JS) 更快，主要因二进制格式减少解析、强类型避免运行时检查、手动线性内存消除 GC 暂停。适合视频/图像处理、3D 模拟等，与 JS 互补。
本文介绍LeetCode二进制手表问题解法。**背景**：手表4小时灯+6分钟灯，亮灯总数为turnedOn。**关键问题**：枚举有效时间并统计二进制1个数。**主要方案**：直接遍历12×60组合，使用`toString(2).split('1').length-1`或`n&(n-1)`位运算计数1，格式化输出时间。回溯法为进阶。
文章解释JavaScript Promise作为状态机特性：状态一旦确定（fulfilled/rejected），多次`await`同一Promise对象均立即返回相同结果，而非重复执行内部逻辑。主要用于异步结果缓存，避免重复请求。示例与注意事项详述错误处理及函数复用场景。
本文介绍了使用`WeakMap`和`Proxy`实现简化版Vue3响应式系统的原理和实现。关键问题在于如何自动追踪依赖和避免内存泄漏。解决方案是利用`WeakMap`存储对象依赖关系，Proxy拦截get/set操作，实现依赖收集和触发。
本文深入探讨了 WeakMap/WeakSet 的底层原理和高级应用。WeakMap/WeakSet 基于弱引用，不会阻止垃圾回收，常用于绑定私有状态、DOM 元素元数据、响应式系统和缓存。同时介绍了WeakRef/FinalizationRegistry的结合使用，并总结了使用陷阱和注意点。
本文针对正则表达式中词边界`\b`在处理中英文混排时失效的问题，提出了使用Unicode属性和环视（lookaround）的解决方案。针对JavaScript、Python和Go等常见语言，分别给出了使用建议和规避方案，并提供了多个典型用例。核心是CJK场景下避免依赖`\b`，利用环视和Unicode属性类实现更精确的匹配。
本文总结了JavaScript中使用`new RegExp()`的注意事项与安全转义方法。针对动态生成正则时出现的转义问题和安全风险，提出了使用`escapeRegExp`函数对用户输入进行转义的方案，并封装了`makeSafeRegex`函数以支持更安全的正则构造，同时避免替换中的特殊字符被转义。
本文介绍了 JavaScript 原生深拷贝 API `structuredClone`。针对传统深拷贝方案（如 JSON 转换、第三方库）的局限性，`structuredClone` 提供了更广泛的类型支持（包括 Date、RegExp、Map/Set 等）和循环引用处理能力，并具有更好的性能表现。但需注意其不支持函数和 DOM 节点，且存在兼容性要求。
本文介绍了一个通用的`cleanAudio`函数，用于清理`<audio>`节点。该函数接收选择器或节点作为参数，实现停止播放、移除音源、释放资源、清理事件监听器以及移除DOM节点。通过克隆节点替换并移除的方式，有效清理了所有事件监听器，并释放资源。
本文介绍了使用`Intl.Collator`对象进行自然排序的方法，解决了文件名排序中数字识别问题。通过设置`numeric: true`和`sensitivity: 'base'`选项，`Intl.Collator`可以实现忽略大小写和变音符号的数字敏感排序。该方法适用于国际化应用，且比自定义排序函数更高效。
在使用`scrollIntoView`时，导航栏遮挡目标元素是个常见问题。本文提供了多种解决方案，包括推荐的CSS `scroll-margin-top` 属性，以及JavaScript手动计算偏移的`scrollTo`方法，还涉及动态获取导航栏高度和Intersection Observer等。最佳实践建议优先使用CSS方案。
网页通过`debugger`语句阻止控制台打开，本文提供了多种强制打开和绕过无限`debugger`的方法。包括快捷键、浏览器菜单、禁用断点、条件断点、重写函数、替换文件内容以及添加到忽略列表等方案，并针对不同浏览器和特定情况提供实用技巧。
Unicode字符类正则表达式`[\\pP\\pS\\pZ]`用于匹配标点符号(\pP)、符号(\pS)和分隔符(\pZ)。常用于文本清理、数据预处理、格式验证和分词处理，可匹配中英文标点、数学符号、货币符号及空格等，适用于处理多语言文本中的非字母数字字符。
UInt8Array是JavaScript中用于处理二进制数据的类型化数组，底层基于ArrayBuffer，每个元素占1字节，范围0-255。它在图像处理、WebSocket通信、WebAssembly交互等现代Web开发中广泛应用，需注意内存管理、字节序和安全问题，并可结合Streams API、WebGPU等新技术优化性能。
JavaScript模块化从CommonJS到ES Modules演进，核心价值在于隔离、依赖管理、复用和优化。CommonJS同步加载，AMD异步，UMD兼容。ES Modules静态分析，支持Tree Shaking。现代实践如Bundleless架构、模块联邦等。性能优化策略包括代码分割、预加载和持久化缓存。未来趋势包括Import Maps和Web Bundles。
Web Worker是浏览器提供的轻量级线程机制，解决JavaScript单线程阻塞问题。通过结构化克隆算法通信，支持模块化和Webpack集成。应用于图像处理、机器学习等，需注意内存管理和线程安全。WebAssembly和新兴API如WebGPU增强了Worker能力。架构设计需考虑任务拆分和容错机制。
JavaScript 类型系统区分值类型和引用类型，影响内存存储和操作。通过 `typeof` 和 `instanceof` 进行类型判断，需注意其局限性。V8引擎使用隐藏类和指针标记优化类型处理。理解类型底层机制、内存管理及关注新提案，能编写更高效的 JavaScript 代码。
本文深入探讨了 JavaScript 对象操作的关键技术，包括：`Object.preventExtensions`、`Object.seal`和`Object.freeze`实现对象不可变性；Reflect API 的元编程应用；Symbol 的全局注册、内置 Symbol 和类型转换；以及 Record/Tuple 提案与装饰器的前沿探索。
JavaScript构造函数既是函数又是对象创建模板，需用`new`调用。`new`创建对象、绑定上下文、初始化属性并处理返回值。原型链实现继承，引擎优化属性查找。`new.target`检测实例化方式，避免内存泄漏。类是语法糖，私有字段是新提案。构造函数在框架和库中有广泛应用。
D3.js的核心在于数据驱动文档，利用`min`/`max`/`extent`进行数据处理。数据绑定通过虚拟DOM实现，注意清理`exit`。SVG高级特性包括虚线动画（`stroke-dasharray`/`stroke-dashoffset`）和矩阵变换（`viewBox`）。性能优化涉及数据分级、DOM池化、Web Worker和GPU加速。未来趋势包括WebGL集成、声明式语法和服务端渲染。
本文解析了JavaScript中`var`与`let`在循环闭包中的差异，揭示了变量提升、块级作用域和词法环境等核心概念。对比了历史解决方案、现代工程实践以及其他语言的实现，强调使用`let`构建清晰作用域边界的重要性，以避免常见陷阱并提升代码可预测性。
本文深入解析 JavaScript Promise，阐述其作为有限状态机的核心机制、微任务执行原理和链式调用。对比 `all`、`allSettled` 和 `any` 等静态方法，探讨取消模式、内存泄漏规避及性能优化。最后提及 Promise 实现规范和未来演进，强调实践中的最佳策略。
本文深入解析了 JavaScript 核心机制，包括 caller 的底层原理及替代方案，this 绑定机制及解决方案，以及 Unicode 字符串处理，如 UTF-16 编码、代理对、Unicode 规范化及最佳实践。强调理解规范定义与引擎实现，并关注 ECMAScript 新特性。
本文介绍了如何使用 JavaScript 正则表达式将 LaTeX 公式 `\(...\)` 和 `\[...\]` 转换为 Markdown 格式 `$…$` 和 `$$…$$`，以方便在 Markdown 编辑器中渲染。核心代码通过正则表达式匹配并替换公式内容，并去除多余空格。该方法适用于多种文本编辑器和文档工具。
浏览器自动解压GZIP响应，`fetch`可直接获取解压数据。`pako`库可手动解压GZIP数据。`Uint8Array`是`ArrayBuffer`的视图，可通过`.buffer`获取底层`ArrayBuffer`，`slice()`创建新`ArrayBuffer`副本。`ArrayBuffer`是二进制数据存储结构，在WebAssembly、文件API、网络通信及多媒体处理中应用广泛。
浏览器通常自动解压服务器返回的 GZIP 数据。若需手动解压，前端可用 `pako` 库，Node.js 可用 `zlib` 模块。浏览器 `fetch` 获取的数据默认解压。
Cloudflare Workers 是一项边缘计算服务，允许开发者在全球网络边缘运行代码，降低延迟。文章介绍了 Workers 的使用方法、特性、应用场景和注意事项，并介绍了搭配 Hono 框架简化开发，以及使用 D1 边缘数据库进行数据存储。
本周报记录了tesseract.js多语言识别的使用方法，推荐使用多个worker分别加载不同语言。同时，探讨了HTML双击选中周围元素的问题，并提供了CSS和JavaScript两种解决方案。最后，介绍了HTML5原生的颜色选择器`<input type="color">`及其用法。
本文总结了Node.js开发中的常见问题与技巧。包括：使用`process.hrtime()`进行高精度计时，利用`async_hooks`跟踪异步资源生命周期，以及`cls-hooked`简化上下文管理。讨论了`fs.writeFileSync()`在父目录不存在时报错的解决，PowerShell执行Node程序假死，`globalThis`、`global`和`window`的区别，`ArrayBuffer`和`Uint8Array`，以及`readFile()`和`readFileSync()`的选择。
本文介绍了如何通过 `tsc` 命令从 JavaScript 文件生成 TypeScript 类型声明文件 (`.d.ts`)，解决了 TypeScript 无法识别 JavaScript 模块类型的问题。同时，提到了 `content-visibility: auto` 引起的滚动条异常以及 `next.js` 的 `scrollRestoration` 失效问题。
本文档介绍了 JavaScript 内置对象 Function 和 String 的相关知识。Function 部分涉及 `caller` 属性和 `this` 指向问题。String 部分讨论了 surrogate pair 的处理，以及 Unicode Decomposition 和 normalize 方法的使用。
本文深入解析了 Promise 的三种状态（pending, fulfilled, rejected）、resolve参数的不同类型处理、then/catch/finally方法，以及静态方法 all, allSettled, race, any 的用法。最后，文章还提供了一个 Promise 的简单实现，并简要提及了 postMessage 相关的异步任务执行顺序问题。
本文档为正则表达式速查表，旨在提供常用的正则表达式语法和标志位参考。内容包括字符类、锚点、转义字符、分组与断言、量词与替换等。同时提供了常见用法示例，例如去除字符串首尾空格。
本文总结了二分查找的常见写法。针对查找单个目标值、查找左侧边界、查找右侧边界三种场景，分别给出了 JavaScript 代码示例，并分析了搜索区间的选择和边界收缩的策略。此外，还展示了二分查找在“最接近的三数之和”问题中的应用。
本周报主要内容包括：1. 探讨了 `vertical-align` 的 `Line-relative values` 和 `Parent-relative values` 的区别。2. 总结了 `scrollIntoView` 的使用方法和参数选项。3. 提供了树结构和列表互相转换的 JavaScript 实现。
本文深入探讨了 JavaScript 原型链，包括`__proto__`、`prototype`和相关方法。讨论了如何通过原型链实现继承，以及`Object.setPrototypeOf`和`Object.getPrototypeOf`的现代用法。同时，还介绍了`Symbol.hasInstance`等高级特性以及`Object.create()`的使用，强调了理解原型链对于掌握 JavaScript 对象和继承机制的重要性。
本文介绍了构造函数与 `new` 操作符的使用。构造函数是命名以大写字母开头且通过 `new` 调用的函数。`new` 操作符创建新对象，并将 `this` 指向该对象，`new.target` 可用于判断函数是否通过 `new` 调用。文章还提供了 `new` 操作符的模拟实现。
本文介绍了 JavaScript 中与 Symbol 相关的知识。包括 Object 和 Reflect 的静态方法如 `preventExtensions`, `freeze`, `seal`, `ownKeys` 等。着重讲解了 Symbol 的特性、全局 Symbol 的使用，以及隐式转换中 `Symbol.toPrimitive` 的作用和转换规则。
本文介绍了 JavaScript 中值类型（基本类型）和引用类型的区别。值类型存储在栈中，复制的是值本身；引用类型存储在堆中，复制的是指针。文章还讨论了使用 `typeof` 和 `instanceof` 检测类型的方法，以及内存空间分配、声明提升和严格模式等相关概念。
本文总结了JavaScript中Math对象方法、Array属性及方法，并对比了Object与Map在键值对存储上的差异，强调Map能保证键的插入顺序。此外，还区分了Array中带副作用和无副作用的方法，并对`for...in`、`Object.keys()`、`Object.getOwnPropertyNames()`三种遍历方式进行了对比，最后介绍了padStart方法。
本文探讨递归的三种形式：记忆化、分治和回溯。重点讲解回溯法，用于解决N个for循环问题，通过试错和剪枝优化进行暴力搜索，并给出经典例题及代码示例。同时分析了JS中递归与迭代的效率问题，通常迭代效率更高。
本文总结了DOM相关的知识点。包括UIEvent.detail、event.button，替换元素与非替换元素，innerHTML、innerText和outerHTML、outerText的区别，自动重复按键，移动端点击300ms延迟问题及解决方案，DOMContentLoaded事件，脚本的async和defer属性，以及跨源策略。还提到了选择和范围相关概念。
尾调用优化(TCO)是一种函数调用优化技术，当函数最后一个操作是调用另一个函数时，无需返回到原调用者，节省栈空间。文章解释了尾调用的概念、如何判断尾调用位置，以及如何将非尾递归函数转换为尾递归函数。TCO仅在严格模式下生效，目前仅Safari浏览器支持。
动态(12)
关于 tiptap 的简单使用，如何不添加到历史记录？
The queueMicrotask() method, which is exposed on the Window or Worker interface, queues a microtask to be executed at a safe time prior to control returning to the browser's event loop.
First, nextTick queue is checked to get tasks for its execution, once it is exhausted, the microTasks queue is checked. After finishing the tasks in the microtask queue the process of checking nextTick and microTasks queues are repeated until the queues have been emptied.
They have different queues. The nextTick's queue is managed by node and the microtask one is managed by v8.
The nextTick queue is checked first after the current function/script execution, and then the microTask one.
How to use React label element?
If you try to render a<label> element bound to a text input using the standard for attribute, then it produces HTML missing that attribute and prints a warning to the console.
1<label for={'user'}>{'User'}</label>
2<input type={'text'} id={'user'} />for is a reserved keyword in JavaScript, use htmlFor instead.
1<label htmlFor={'user'}>{'User'}</label>
2<input type={'text'} id={'user'} />