LeetCode 的 JavaScript 时代实际上填补了空白-js教程-PHP中文网

首页

web前端

js教程

LeetCode 的 JavaScript 时代实际上填补了空白

Patricia Arquette

Dec 16, 2024 pm 04:34 PM

The Gap That LeetCode

大多数编码挑战都会教你解决难题。 LeetCode 的 30 天 JavaScript 学习计划做了一些不同的事情：它向您展示了拼图如何变成砖块，准备好构建现实世界的项目。

这种区别很重要。当您解决典型的算法问题时，您正在训练您的思维进行抽象思考。但是，当您实现去抖¹函数或构建事件发射器²时，您正在学习真正的软件是如何工作的。

我自己在应对挑战时发现了这一点。这种体验不太像解决脑筋急转弯问题，而更像考古学——揭示特定的现代 JavaScript 概念。每个部分都重点介绍 JS 的另一项现代功能。

这个学习计划的奇特之处在于它不会教你 JavaScript。事实上，我相信您需要相当了解 JavaScript 才能从中受益。相反，它教的是如何使用 JavaScript 来解决实际的工程问题。

考虑 Memoize³ 挑战。从表面上看，它是关于缓存函数结果的。但你真正学到的是为什么像 React 这样的库需要记忆来有效地处理组件渲染。或者以 Debounce¹ 问题为例 - 这不仅仅是实现延迟；它还涉及延迟。它可以帮助您直接理解为什么每个现代前端框架、电梯以及基本上任何具有交互式 UI 的系统都需要这种模式。

这种对实用模式而不是语言基础知识的关注创造了一个有趣的限制；您需要处于以下两个位置之一才能受益：

您了解 CS 基础知识（尤其是数据结构和算法）并且熟悉 JavaScript
您的计算机科学理论很强，并且之前接触过一些 JavaScript

连接计算机科学和软件工程

学习计算机科学和实践软件工程之间会发生一些奇怪的事情。这种转变感觉就像学习了多年的国际象棋理论，却发现自己在玩一种完全不同的游戏 - 规则不断变化，而且大多数动作都不在任何书本中。

在计算机科学中，您将学习二叉树的工作原理。在软件工程中，您需要花费数小时调试 API，试图了解响应缓存不起作用的原因。从远处看，这些世界之间的重叠可能看起来比实际要大得多。其中存在差距，这常常会让计算机科学毕业生在开始职业生涯时感到震惊。不幸的是，大多数教育资源都无法弥补这一点。它们要么纯粹是理论性的（“这是快速排序的工作原理”），要么是纯粹的实用性（“这是如何部署 React 应用程序”）。

这个 JavaScript 学习计划的有趣之处并不是它设计得特别好 - 而是它在这些世界之间创建了联系。以记忆问题为例：2623。记忆³。用计算机科学术语来说，它是关于缓存计算值的。但实现它会迫使您应对 JavaScript 在对象引用、函数上下文和内存管理方面的特殊性。突然，
你不只是在学习算法 - 你开始理解为什么像 Redis 这样的东西存在。

这种风格在整个挑战中不断重复。 Event Emitter² 实现不仅仅是教科书观察者模式 - 您可以将其视为将 V8 引擎从浏览器中取出并围绕它构建 Node.js 的原因，这实际上是有意义的。 Promise Pool⁴ 解决并行执行问题，也就是数据库需要连接限制的原因。

隐藏课程

本学习计划中的问题顺序不是随机的。它正在逐层构建现代 JavaScript 的心理模型。

它从闭包开始。并不是因为闭包是最简单的概念 - 它们非常令人困惑 - 而是因为它们是 JavaScript 管理状态的基础。

function createCounter(init) {
    let count = init;
    return function() {
        return count++;
    }
}

const counter1 = createCounter(10);
console.log(counter1()); // 10
console.log(counter1()); // 11
console.log(counter1()); // 12

// const counter1 = createCounter(10);
// when this^ line executes:
// - createCounter(10) creates a new execution context
// - local variable count is initialized to 10
// - a new function is created and returned
// - this returned function maintains access 
// to the count variable in its outer scope
// - this entire bundle 
// (function (the inner one) + its access to count) 
// is what we call a closure

登录后复制

这种模式是 JavaScript 中所有状态管理的种子。一旦你了解了这个计数器的工作原理，你就了解了 React 的 useState 在幕后是如何工作的。您了解为什么模块模式出现在 ES6 之前的 JavaScript 中。

然后计划转向功能转换。这些教你函数装饰——函数包装其他函数以修改它们的行为。这不仅仅是一个技术技巧；这就是 Express 中间件的工作方式，React 高阶组件的工作方式，
以及 TypeScript 装饰器的工作原理。

当您遇到异步挑战时，您不仅仅是在学习 Promise，您还会发现 JavaScript 最初需要它们的原因。 Promise Pool⁴ 问题并不是在教你一个创新的、古怪的 JS 概念；而是在教你一个创新的、古怪的 JS 概念。它向您展示了为什么每个数据库引擎中都存在连接池。

以下是学习计划各部分与现实世界软件工程概念的粗略映射：

关闭 → 状态管理
基本数组变换 → 基本技能（辅助）；实际示例：数据操作
函数转换 → 中间件模式
承诺与时间 ->异步控制流
JSON ->基础技能（辅助）；实例：数据序列化、API通信
类（特别是在事件发射器的上下文中）→消息传递系统
奖金（高级锁定）->可能包含在上述部分中的更难的挑战的组合； Promise Pool⁴ 是本节中我最喜欢的一个

模式识别，而不是解决问题

让我们剖析一些问题，以展示该学习计划的真正价值。

记忆 (#2623)

考虑 Memoize 挑战。我喜欢它的原因是（我能想出的）最好的解决方案
非常简单，就好像代码本身在温和地告诉您它的作用（不过，我添加了一些注释）。

无论如何，这并不会让 #2623 成为一个简单的问题。我之前需要两次迭代才能使它变得如此干净：

function createCounter(init) {
    let count = init;
    return function() {
        return count++;
    }
}

const counter1 = createCounter(10);
console.log(counter1()); // 10
console.log(counter1()); // 11
console.log(counter1()); // 12

// const counter1 = createCounter(10);
// when this^ line executes:
// - createCounter(10) creates a new execution context
// - local variable count is initialized to 10
// - a new function is created and returned
// - this returned function maintains access 
// to the count variable in its outer scope
// - this entire bundle 
// (function (the inner one) + its access to count) 
// is what we call a closure

登录后复制

反跳 (#2627)

想象一下你在电梯里，有人疯狂地反复按“关门”按钮。

按按按按按

没有去抖：电梯会在每按一次门时尝试关门，导致门机构工作效率低下，甚至可能损坏。

防抖：电梯会等待，直到人停止按下一定时间（假设 0.5 秒），然后才真正尝试关门。这样效率就高多了。

这是另一种情况：

假设您正在实现一个搜索功能，可以在用户键入时获取结果：

没有去抖动：

/**
 * @param {Function} fn
 * @return {Function}
 */
function memoize(fn) {
    // Create a Map to store our results
    const cache = new Map();

    return function(...args) {
        // Create a key from the arguments
        const key = JSON.stringify(args);

        // If we've seen these arguments before, return cached result
        if (cache.has(key)) {
            return cache.get(key);
        }

        // Otherwise, calculate result and store it
        const result = fn.apply(this, args);
        cache.set(key, result);
        return result;
    }
}

const memoizedFn = memoize((a, b) => {
    console.log("computing...");
    return a + b;
});

console.log(memoizedFn(2, 3)); // logs "computing..." and returns 5
console.log(memoizedFn(2, 3)); // just returns 5, no calculation
console.log(memoizedFn(3, 4)); // logs "computing..." and returns 7


// Explanantion:
// It's as if our code had access to an external database

// Cache creation
// const cache = new Map();
// - this^ uses a closure to maintain the cache between function calls
// - Map is perfect for key-value storage

// Key creation
// const key = JSON.stringify(args);
// - this^ converts arguments array into a string
// - [1,2] becomes "[1,2]"
// - we are now able to use the arguments as a Map key

// Cache check
// if (cache.has(key)) {
//     return cache.get(key);
// }
// - if we've seen these arguments before, return cached result;
// no need to recalculate

登录后复制

这将进行 10 次 API 调用。其中大多数都没用，因为用户仍在打字。

带去抖动（300 毫秒延迟）：

// typing "javascript"
'j' -> API call
'ja' -> API call
'jav' -> API call
'java' -> API call
'javas' -> API call
'javasc' -> API call
'javascr' -> API call
'javascri' -> API call
'javascrip' -> API call
'javascript' -> API call

登录后复制

去抖就像告诉你的代码：“等到用户停止执行某些操作 X 毫秒后再实际运行此函数。”

这是 LeetCode #2627 的解决方案：

// typing "javascript"
'j'
'ja'
'jav'
'java'
'javas'
'javasc'
'javascr'
'javascri'
'javascrip'
'javascript' -> API call (only one call, 300ms after user stops typing)

登录后复制

现实世界中其他常见的去抖动用例（搜索栏除外）：