为何forEach循环返回undefined，而for循环可正常返回结果？

可正常运行的代码 #

以下代码可在控制台打印正确的标题

const cars = [{ id: 1, title: 'Volkswagen' }, { id: 2, title: 'BMW' }, { id: 3, title: 'Audi' }];
    
function getCarName(set, val) {
    for(let i = 0; i <= set.length; i++) {
        if (set[i].id === val) {
            return set[i].title;
        }
    };
}

console.log(getCarName(cars, 2));

打印undefined的代码 #

以下代码在控制台打印“undefined”，原因是什么？

const cars = [{ id: 1, title: 'Volkswagen' }, { id: 2, title: 'BMW' }, { id: 3, title: 'Audi' }];

function getCarName(set, val) {
    set.forEach((x) => {
        if (x.id === val) {
            return x;
        }
    });
}

console.log(getCarName(cars, 2));

问题原因 #

• forEach的回调return无效：forEach方法的回调函数里的return只能终止当前这一轮的回调执行，既不会把值返回给外层的getCarName函数，也不会停止整个forEach遍历。
• 外层函数无返回值：getCarName函数本身没有写任何return语句，JavaScript中没有返回值的函数默认返回undefined，所以console.log输出的就是这个默认返回值。

修正写法 #

如果要实现找到对应车辆并返回名称的功能，更合适的是用find方法：

const cars = [{ id: 1, title: 'Volkswagen' }, { id: 2, title: 'BMW' }, { id: 3, title: 'Audi' }];

function getCarName(set, val) {
    const targetCar = set.find(car => car.id === val);
    return targetCar ? targetCar.title : undefined;
}

console.log(getCarName(cars, 2)); // 输出BMW

内容的提问来源于stack exchange，提问作者user2159616