月度归档： 2025 年 8 月

发布于

JavaScript内核与高级编程之：`JavaScript`的`Record`和`Tuple`：其在不可变数据结构中的提案。

各位观众，晚上好！我是今天的主讲人，很高兴能和大家一起聊聊 JavaScript 中关于 Record 和 Tuple 这两个炙手可热的提案。它们旨在为 JavaScript 带来原生的不可变数据结构，这对于构建更加健壮和可预测的应用程序至关重要。准备好了吗？咱们这就开始！ 第一部分：不可变性，这货到底有啥用？ 在深入 Record 和 Tuple 之前，我们先来聊聊不可变性。 想象一下，你的代码就像一个繁忙的交通枢纽，各种数据像车辆一样穿梭其中。 如果这些车辆（数据）可以随意被修改，那交通状况（代码逻辑）很容易变得一团糟。 不可变性就像交通规则，规定某些车辆（数据）一旦创建，就不能被修改，只能创建新的车辆。 那么，不可变性到底有什么好处呢？ 可预测性： 不可变数据不会在不知情的情况下被修改，让代码的行为更加可预测。 你可以放心地使用它，而不必担心它会在某个地方被偷偷篡改。 线程安全： 在多线程环境中，不可变数据可以被安全地共享，无需担心竞态条件。 多个线程可以同时读取不可变数据，而不会互相干扰。 简化调试： 当数据不可变时，更容易追踪错误。 因为你只需要关注数据最初创建的地方，而不用 …

继续阅读“JavaScript内核与高级编程之：`JavaScript`的`Record`和`Tuple`：其在不可变数据结构中的提案。”

发布于

JavaScript内核与高级编程之：`JavaScript`的`Temporal API`：其在日期时间处理中的新提案。

各位观众老爷，大家好！今天咱们来聊聊 JavaScript 里一个比较新的玩意儿，叫做 Temporal API。这家伙，简单来说，就是为了解决 JavaScript 日期时间处理的“老大难”问题而生的。 为啥要搞个Temporal API？JavaScript的Date对象不好使吗？ 你问得好！JavaScript 内置的 Date 对象，说实话，问题真的不少。我先给大家列举几个“罪状”： 可变性（Mutability）： Date 对象是可变的，这意味着你一个不小心，就能把日期给改了，而且还没法追溯。 时区处理混乱： Date 对象的时区处理方式让人摸不着头脑，经常会遇到各种时区转换的坑。 API设计糟糕： Date 对象的 API 设计简直是灾难，各种 getYear()、getMonth() 这种过时的 API 还在，而且索引从 0 开始，让人防不胜防。 缺乏明确的日期和时间类型： Date 对象既包含日期，又包含时间，有时候你只想处理日期，有时候只想处理时间，它就显得很笨重。 不支持非公历日历： Date 对象只支持公历（格里高利历），不支持农历、伊斯兰历等其他日历系统。 正 …

继续阅读“JavaScript内核与高级编程之：`JavaScript`的`Temporal API`：其在日期时间处理中的新提案。”

发布于

JavaScript内核与高级编程之：`JavaScript`的`Functional Programming`：其在单元测试中的应用。

各位靓仔靓女，大家好！今天咱们来聊聊JavaScript里的“函数式编程”，这玩意儿听起来高大上，其实没那么可怕。更重要的是，我们会看看它在单元测试里怎么发光发热。准备好了吗？咱们开始！ 开场白：别怕，函数式编程不是“玄学” 很多人一听“函数式编程”就觉得是某种神秘的魔法。其实，它就是一种编程范式，一种组织代码的方式。 它的核心思想是：把计算过程看作是函数的求值，避免使用可变状态和副作用。 就像你做菜一样，函数式编程强调的是“输入什么，输出什么”，中间的过程尽量“纯粹”，别搞什么“秘制酱料”或者“祖传老汤”这种难以捉摸的东西。 函数式编程的核心概念：咱们先打个基础 在深入单元测试之前，我们需要先了解几个函数式编程的核心概念。 纯函数 (Pure Functions) 定义: 纯函数是指一个函数的输出完全由输入决定，并且没有任何副作用。 特点: 相同的输入永远产生相同的输出。 不修改任何外部状态 (变量、对象等)。 举例: // 纯函数 function add(x, y) { return x + y; } // 非纯函数 (修改了外部变量) let z = 0; function i …

继续阅读“JavaScript内核与高级编程之：`JavaScript`的`Functional Programming`：其在单元测试中的应用。”

发布于

JavaScript内核与高级编程之：`JavaScript`的`Redux`：其在函数式编程中的核心思想。

观众朋友们，晚上好！我是老码，很高兴今晚能和大家聊聊JavaScript世界里的一颗耀眼明星——Redux。Redux这玩意儿，听起来高大上，但其实它骨子里贯彻的是函数式编程的思想。别怕，函数式编程听着唬人，其实没那么玄乎。今晚咱们就用最接地气的方式，把Redux这层窗户纸捅破，看看它在函数式编程里到底扮演了个啥角色。 一、Redux：一个“状态银行”的故事 想象一下，咱们开了一家银行，这家银行有点特别，它只管存钱和取钱，但它不直接操作账户，而是通过一些“指令”来操作。这些指令告诉银行“该往哪个账户存多少钱”、“该从哪个账户取多少钱”。Redux就像这家银行，而咱们的应用状态就是银行里的账户。 State (状态): 银行里的所有账户余额，代表应用的当前数据。 Action (指令): 存钱、取钱的指令，描述了“发生了什么”。 Reducer (柜员): 银行柜员，接收指令，更新账户余额（状态）。 Store (银行): 整个银行系统，包含了状态、指令处理方式和访问方式。 Dispatch (下达指令): 向银行下达指令，告诉银行要做什么。 Subscribe (订阅): 订阅银行账户 …

继续阅读“JavaScript内核与高级编程之：`JavaScript`的`Redux`：其在函数式编程中的核心思想。”

发布于

JavaScript内核与高级编程之：`JavaScript`的`Deque`：如何实现双端队列。

各位靓仔靓女，早上好！我是你们的老朋友，今天要跟大家聊聊JavaScript里一个稍微冷门但又实用的数据结构：双端队列（Deque）。 别怕，听名字唬人，其实用起来可香了！ 开场白：队列这玩意儿，你得懂！ 咱们先回忆一下基础的队列。 队列就像你去银行排队，先进先出（FIFO）。新来的人排在队尾，办完事儿的人从队首离开。JavaScript里可以用数组模拟： let queue = []; // 入队 (队尾添加) queue.push(1); queue.push(2); queue.push(3); // 出队 (队首移除) let first = queue.shift(); // first 现在是 1 console.log(queue); // 输出: [2, 3] 简单粗暴，对吧？ 但是，问题来了！ shift() 操作在数组头部移除元素，涉及到后面所有元素的移动，如果队列很长，效率就比较低。 这时候，就需要我们的主角——双端队列登场了！ 什么是双端队列？ (Deque = Double Ended Queue) 顾名思义，双端队列就是两端都可以进出的队列。 你可以从队头添 …

继续阅读“JavaScript内核与高级编程之：`JavaScript`的`Deque`：如何实现双端队列。”

发布于

JavaScript内核与高级编程之：`JavaScript`的`LRU`缓存：如何使用`Map`实现`LRU`算法。

各位靓仔靓女们，晚上好！我是你们的老朋友，今晚咱们来聊聊JavaScript中的LRU缓存，顺便用Map给它安排得明明白白。 开场白：缓存的重要性，以及LRU为何如此受欢迎 在前端的世界里，速度就是生命！想象一下，如果每次用户访问你的网站，都要重新加载所有资源，那体验简直糟糕透顶。这时候，缓存就闪亮登场了，它能把那些常用的数据临时存起来，下次再用的时候直接从缓存里拿，速度杠杠的！ 缓存策略有很多种，但LRU（Least Recently Used，最近最少使用）绝对是明星级的。它的思想很简单：如果一个数据很久没被用过了，那就说明它可能不太重要了，可以优先把它踢出缓存，给新来的数据腾地方。这就像你整理房间，总是先把那些你几个月都没碰过的东西扔掉，道理是一样的。 LRU缓存的基本原理 LRU缓存的核心在于“最近使用”这个概念。我们需要记录每个数据的使用情况，以便在缓存满了的时候，找到那个“最不常用”的数据。 容量限制： LRU缓存都有一个容量上限，超过这个容量就需要淘汰数据。 数据存储： 我们需要一个数据结构来存储缓存的数据。 访问记录： 每次访问一个数据，都需要更新它的“最近使用”状态。 …

继续阅读“JavaScript内核与高级编程之：`JavaScript`的`LRU`缓存：如何使用`Map`实现`LRU`算法。”

发布于

JavaScript内核与高级编程之：`JavaScript`的`WeakMap`和`WeakSet`：它们在缓存和内存管理中的应用。

各位观众老爷，大家好！今天咱们来聊聊 JavaScript 里两个有点“神秘”但又非常实用的家伙：WeakMap 和 WeakSet。 它们在缓存和内存管理中可是能起到四两拨千斤的作用。 准备好，咱们要开车了！ 第一站：什么是 WeakMap 和 WeakSet？ 首先，别被它们的名字吓到，WeakMap 和 WeakSet 其实就是 Map 和 Set 的“弱引用”版本。 啥叫弱引用？ 别急，听我慢慢道来。 Map 和 Set 的老底 在咱们深入 WeakMap 和 WeakSet 之前，先来回顾一下 Map 和 Set 这两个家伙。 Map： 是一种键值对的集合，类似于咱们的字典，你可以通过键来快速找到对应的值。 键可以是任何数据类型，值也可以是任何数据类型。 const myMap = new Map(); const key1 = { id: 1 }; const key2 = “a string key”; myMap.set(key1, “Value associated with key1”); myMap.set(key2, “Value associated with …

继续阅读“JavaScript内核与高级编程之：`JavaScript`的`WeakMap`和`WeakSet`：它们在缓存和内存管理中的应用。”

发布于

JavaScript内核与高级编程之：`JavaScript`的`BigInt`：其在处理大数运算时的`polyfill`。

各位靓仔靓女，晚上好！我是今晚的JS讲师，很高兴能和大家一起聊聊JavaScript的BigInt，以及在处理大数运算时，如何通过polyfill来让老浏览器也能用上这个新特性。准备好了吗？Let’s go! 第一部分：BigInt 是个啥？为啥需要它？ 话说，在JavaScript的世界里，数字可不是你想多大就多大。它有一个安全整数范围，也就是Number.MAX_SAFE_INTEGER，这个家伙的值是9007199254740991。超过这个范围，你就得小心了，精度可能会丢失，导致一些奇奇怪怪的错误，比如： console.log(Number.MAX_SAFE_INTEGER + 1); // 9007199254740992 console.log(Number.MAX_SAFE_INTEGER + 2); // 9007199254740992 咦？怎么没变？ 看到了吧？加1还正常，加2就直接原地踏步了。这对于一些需要高精度计算的场景来说，简直就是噩梦。想象一下，你要计算银行利息，结果因为精度问题，少算了客户几块钱，那不得被投诉死？ BigInt就是为了解决这个 …

继续阅读“JavaScript内核与高级编程之：`JavaScript`的`BigInt`：其在处理大数运算时的`polyfill`。”

发布于

JavaScript内核与高级编程之：`JavaScript`的`Typed Arrays`：其在科学计算和`WebGPU`中的应用。

各位靓仔靓女们，早上好/下午好/晚上好！我是你们的老朋友，今天咱们来聊聊JavaScript里一个有点“硬核”但又非常实用的家伙——Typed Arrays。 这玩意儿，说实话，一开始看到名字，我也有点懵圈。啥叫“类型化的数组”？听起来就像是数组穿了西装，戴了领带，瞬间变身精英人士。但实际上，它比这有趣多了。 一、Typed Arrays：告别JavaScript数组的“任性” 在JavaScript的世界里，普通的数组那是相当的“任性”。它可以放任何类型的数据，数字、字符串、对象，甚至是函数，一股脑儿塞进去都没问题。这很灵活，但对于某些对性能要求极高的场景，比如科学计算、图像处理、WebGPU等等，就显得效率不高了。 为什么呢？ 类型不确定： JavaScript引擎需要时刻检查数组元素的类型，这会增加运行时的开销。 存储不紧凑： JavaScript数组在内存中不一定是连续存储的，这会导致访问速度变慢。 想象一下，你参加一个宴会，主办方说：“大家随便吃，想吃啥拿啥！” 结果你发现，甜点、主食、饮料混在一起，你需要不停地分辨哪个是你要的，效率自然就低了。 Typed Arrays就像 …

继续阅读“JavaScript内核与高级编程之：`JavaScript`的`Typed Arrays`：其在科学计算和`WebGPU`中的应用。”

发布于

JavaScript内核与高级编程之：`JavaScript`的`Map`和`Set`：其与传统`Object`和`Array`的性能对比。

各位观众老爷们，大家好！今天咱们来聊聊JavaScript里一对好基友：Map和Set。 别看它们名字有点陌生，其实它们在某些场合比老朋友Object和Array更好使，甚至能让你的代码跑得更快！咱们今天就扒一扒它们的底裤，看看它们到底有啥本事。 开场白：Object和Array的局限性 在JavaScript的世界里，Object和Array是元老级的存在。 咱们天天用，用得那叫一个溜。 但是，时间长了，你有没有觉得它们有点不够劲儿？ Object的Key只能是字符串或Symbol： 想用数字、对象当Key？ 没门！ Object会默默地把你转换成字符串，然后告诉你：“我只能帮你到这儿了”。 Array的indexOf查找效率： 想在数组里找个东西？ indexOf跑一遍，效率嘛… 尤其是数组很大的时候，简直慢到怀疑人生。 Object遍历顺序不确定： 你想按顺序遍历Object的属性？ 呵呵，JavaScript引擎表示： “我心情好就给你按顺序，心情不好就随机”。 (ES2015后对于非数字键的遍历顺序是按照插入顺序，但是依旧不能保证全部情况) Array删除元素产生空洞： 用d …

继续阅读“JavaScript内核与高级编程之：`JavaScript`的`Map`和`Set`：其与传统`Object`和`Array`的性能对比。”