面试题：JavaScript 数组并发方法在复杂场景下的应用

Question

给定两个大型数组 `array1` 和 `array2`，它们长度相等。要求你使用并发的数组方法，将 `array1` 中的每个元素与 `array2` 中对应位置的元素进行某种复杂计算（例如：`(a, b) => Math.sqrt(a * a + b * b)`），并将结果存储在一个新数组中。同时，要处理可能出现的异步操作（假设复杂计算是异步的，例如通过 `setTimeout` 模拟异步），确保结果顺序正确。请写出完整代码，并说明如何优化性能以应对大型数组。

Answer 1

function complexCalculation(a, b) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(Math.sqrt(a * a + b * b));
        }, 100); // 模拟异步操作
    });
}

async function calculateArrays(array1, array2) {
    const results = [];
    const promises = array1.map((element, index) => {
        return complexCalculation(element, array2[index]);
    });

    for (const promise of promises) {
        const result = await promise;
        results.push(result);
    }

    return results;
}

// 示例使用
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
calculateArrays(array1, array2).then((results) => {
    console.log(results);
});

性能优化

1. 减少异步等待时间：在实际应用中，如果 setTimeout 是可以优化的，尽量缩短其等待时间，以减少整体计算时间。
2. 分批处理：对于大型数组，可以将数组分成若干个小的批次，并发处理每个批次，然后合并结果。这样可以避免一次性创建大量的 Promise 导致内存压力过大。例如：

function calculateArraysInBatches(array1, array2, batchSize) {
    const results = [];
    for (let i = 0; i < array1.length; i += batchSize) {
        const batch1 = array1.slice(i, i + batchSize);
        const batch2 = array2.slice(i, i + batchSize);
        const batchPromises = batch1.map((element, index) => {
            return complexCalculation(element, batch2[index]);
        });
        const batchResults = await Promise.all(batchPromises);
        results.push(...batchResults);
    }
    return results;
}

3. 使用 Web Workers（浏览器环境）：如果是在浏览器环境下，可以利用 Web Workers 将计算任务分配到不同的线程中执行，避免主线程阻塞，提高整体响应性能。Web Workers 允许在后台线程中运行脚本，不影响主线程的 UI 渲染等操作。
4. 缓存计算结果：如果某些计算结果可能会被重复使用，可以使用缓存机制，避免重复计算。例如，使用一个 Map 来存储已经计算过的结果，下次遇到相同的输入时直接从缓存中获取。