JavaScript 中的合并排序可视化

合并排序是一种常用的排序算法。它将一个数组分成两个子数组，对每个子数组进行递归排序，然后将两个排好序的子数组合并成一个大数组。这个过程就像一次扑克牌游戏中的将两堆牌合并成一堆的过程。

JavaScript 中的合并排序可以通过递归实现，下面是一个示例代码：

function mergeSort(arr) {
    // 如果数组长度小于 2，即不可再分，直接返回
    if (arr.length < 2) return arr;
    // 计算中间值
    let middle = Math.floor(arr.length / 2);
    // 获取中间值左边的子数组
    let left = arr.slice(0, middle);
    // 获取中间值右边的子数组
    let right = arr.slice(middle);
    // 对左右子数组分别递归调用 mergeSort 函数
    return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right) {
    let result = [];
    // 当左右数组都不为空时，按照大小合并数组
    while (left.length && right.length) {
        if (left[0] < right[0]) {
            result.push(left.shift());
        } else {
            result.push(right.shift());
        }
    }
    // 将剩余的数组元素依次添加到结果数组中
    while (left.length) result.push(left.shift());
    while (right.length) result.push(right.shift());
    // 返回结果数组
    return result;
}

为了方便理解，我们可以通过可视化效果来观察合并排序算法的执行过程。下面是一个简单的合并排序可视化程序：

async function mergeSortVisualize(arr) {
    if (arr.length < 2) return arr;
    let middle = Math.floor(arr.length / 2);
    let left = arr.slice(0, middle);
    let right = arr.slice(middle);
    left = await mergeSortVisualize(left);
    right = await mergeSortVisualize(right);
    return await mergeVisualize(left, right);
}

async function mergeVisualize(left, right) {
    let result = [];
    while (left.length && right.length) {
        await sleep(50);
        if (left[0] < right[0]) {
            result.push(left.shift());
        } else {
            result.push(right.shift());
        }
    }
    let all = result.concat(left).concat(right);
    for (let i = 0; i < all.length; i++) {
        await sleep(50);
        swap(arr, i, all[i]);
    }
    return result;
}

async function swap(arr, i, j) {
    let temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
    render(arr);
    await sleep(50);
}

async function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

function render(arr) {
    // 渲染数组
}

在 mergeSortVisualize 函数中，我们对原始数组进行递归排序，然后在 mergeVisualize 函数中进行数组合并。这里我们使用 sleep 函数模拟一定的时间，以及 swap 函数和 render 函数来实现可视化效果。

总之，在 JavaScript 中实现合并排序并进行可视化是一个非常有趣的过程，也是扩展自己技能的好方法。