为何我的递归函数在FreeCodeCamp任务中无法返回数组最后一个元素？

你的递归实现丢失第一个元素的原因很明确：

• 当传入的数组长度只剩1时，你直接返回了arr[0]，但没有把这个元素转换成要求的<li>格式并添加到failureItems数组里，导致这个元素根本没被加入结果。
• 另外，arr.pop()会从数组末尾移除元素，所以你当前添加的是原数组的第三个、第二个元素，第一个元素在最后触发arr.length === 1的条件时被直接返回，没进入数组。

修复后的递归代码 #

const result = {
    success: ["max-length", "no-amd", "prefer-arrow-functions"],
    failure: ["no-var", "var-on-top", "linebreak"],
    skipped: ["no-extra-semi", "no-dup-keys"]
};

const failureItems = [];

function makeList(arr) {
    // 处理递归终止条件：数组为空时停止
    if (arr.length === 0) {
        return failureItems;
    }
    // 从数组头部取元素（保持和原数组顺序一致）
    const item = arr.shift();
    failureItems.push(`<li class="text-warning">${item}</li>`);
    // 递归调用
    return makeList(arr);
}

const failuresList = makeList(result.failure);
console.log(`Failure list is ${failuresList}`);

更优雅的无外部依赖递归写法 #

如果不想依赖全局的failureItems数组，可以让递归函数自己维护结果，保持纯函数特性：

const result = {
    success: ["max-length", "no-amd", "prefer-arrow-functions"],
    failure: ["no-var", "var-on-top", "linebreak"],
    skipped: ["no-extra-semi", "no-dup-keys"]
};

function makeList(arr) {
    // 终止条件：空数组返回空数组
    if (arr.length === 0) {
        return [];
    }
    // 取第一个元素转换格式，拼接递归处理剩余元素的结果
    return [
        `<li class="text-warning">${arr[0]}</li>`,
        ...makeList(arr.slice(1))
    ];
}

const failuresList = makeList(result.failure);
console.log(`Failure list is ${failuresList}`);

原代码问题点拆解 #

1. 终止条件错误：原代码在arr.length === 1时直接返回arr[0]，跳过了该元素的格式转换和入组操作。
2. 全局数组的风险：全局的failureItems如果被多次调用会累积旧数据，递归函数应尽量避免依赖外部状态。
3. pop()导致顺序反转：pop()取数组末尾元素，原数组元素会被倒序加入结果，且最后一个元素未被处理。

内容的提问来源于stack exchange，提问作者Sebastian-Surwehme