面试题：JavaScript 表达式优化之函数调用

Question

有如下代码：`function add(a, b) { return a + b; } function multiply(a, b) { return a * b; } let value1 = 5; let value2 = 10; let complexExpression = multiply(add(value1, value2), add(value1, value2)) + multiply(add(value1, value2), add(value1, value2));` 此表达式存在大量重复函数调用，如何通过闭包、记忆化等技术优化该表达式，提高执行效率和代码可维护性，详细说明优化方案及每一步的实现逻辑。

Answer 1

1. 记忆化函数的实现逻辑：
   • 记忆化（Memoization）是一种缓存函数调用结果的技术，避免重复计算。
   • 我们可以为 add 和 multiply 函数创建记忆化版本。
   • 以下是记忆化的通用实现方式：

function memoize(func) {
    const cache = new Map();
    return function (...args) {
        const key = args.toString();
        if (cache.has(key)) {
            return cache.get(key);
        }
        const result = func.apply(this, args);
        cache.set(key, result);
        return result;
    };
}

2. 优化 add 函数：
   • 使用上述 memoize 函数来记忆化 add 函数。

function add(a, b) {
    return a + b;
}
const memoizedAdd = memoize(add);

• 这里 memoizedAdd 是 add 函数的记忆化版本。每次调用 memoizedAdd 时，它首先检查缓存中是否有对应参数的计算结果，如果有则直接返回，否则计算并缓存结果。

3. 优化 multiply 函数：
   • 同样使用 memoize 函数来记忆化 multiply 函数。

function multiply(a, b) {
    return a * b;
}
const memoizedMultiply = memoize(multiply);

4. 优化复杂表达式：
   • 原复杂表达式 multiply(add(value1, value2), add(value1, value2)) + multiply(add(value1, value2), add(value1, value2));
   • 使用记忆化函数优化后：

let value1 = 5;
let value2 = 10;
const addResult = memoizedAdd(value1, value2);
const multiplyResult = memoizedMultiply(addResult, addResult);
const complexExpression = multiplyResult + multiplyResult;

• 首先，计算一次 add 函数并将结果缓存（addResult）。
• 然后，使用缓存的 add 结果作为参数调用 multiply 函数并缓存结果（multiplyResult）。
• 最后，通过两次使用缓存的 multiply 结果来得到最终的复杂表达式的值。这样避免了多次重复调用 add 和 multiply 函数，提高了执行效率。同时，代码结构更清晰，增强了可维护性。

5. 使用闭包的优化思路（另一种角度）：
   • 闭包可以用来封装变量和函数，减少全局变量的使用。
   • 我们可以将相关的操作封装在一个闭包内。

const optimizedCalculation = (function () {
    let value1 = 5;
    let value2 = 10;
    const memoizedAdd = memoize(add);
    const memoizedMultiply = memoize(multiply);
    const addResult = memoizedAdd(value1, value2);
    const multiplyResult = memoizedMultiply(addResult, addResult);
    return multiplyResult + multiplyResult;
})();

• 在这个闭包中，value1、value2、memoizedAdd、memoizedMultiply、addResult 和 multiplyResult 都是闭包内的局部变量，避免了污染全局作用域。同时，通过记忆化函数提高了计算效率。这种方式进一步增强了代码的封装性和可维护性。