JavaScript函数应返回数组匹配对象却返回undefined问题排查

我是JavaScript新手，正在做一个模拟网上书店的项目，需要从全局数组aStoreItems（由构造函数创建的对象组成）里根据用户输入的ID返回匹配的对象。我写了getBookById函数用来根据ID查找对象，还有addToCart函数传递用户输入的ID调用这个函数，但控制台显示返回undefined，找不到问题所在，求帮助。

相关代码 #

// 根据ID查找对象的函数
function getBookById(id) {
    console.log("传入的参数(in getbookbyid函数)= " + id)
    console.log("参数类型(in getbookbyid函数)= " + typeof(id))
    for (var i = 0; i < aStoreItems.length; ++i) {
        if (aStoreItems[i].bID == id) {
            return aStoreItems[i];
            selectedBook = aStoreItems[i];
        }
    } 
};

// 数组中对象示例
var ID23 = new StoreItem("ID23", "The Slow Regard of Silent Things", 12.99, 50, 1, "Fiction", 1.99, ["Great story", 5], "Desc", "<img src='./imgs/the_slow_regard_of_silent_things.jpeg' />");

function addToCart() {
    var bookSelection = document.getElementById("pID").value;

    console.log("用户输入(in add to cart函数) " + bookSelection);

    getBookById(bookSelection);
    console.log("返回结果(in add to cart函数) " + selectedBook);
};

控制台输出 #

user typed (in add to cart function) ID23
Variable being passed in(in get book by id function)= ID23
type Variable being passed in(in get book by id function)= string
return is(in add to cart function) undefined

问题分析与解决方法 #

1. 核心问题：return语句阻断后续代码执行 #

在getBookById函数中，selectedBook = aStoreItems[i];写在return aStoreItems[i];之后。函数执行到return时会立即终止并返回结果，后面的赋值代码永远不会被执行，导致全局变量selectedBook始终未被赋值，自然是undefined。

2. 次要问题：未接收函数返回值 #

addToCart函数调用getBookById(bookSelection)后，没有接收函数返回的结果，反而直接读取未赋值的全局selectedBook，这也是输出undefined的原因。

修正后的代码 #

推荐去掉全局变量，通过函数返回值传递数据（减少全局变量污染，代码逻辑更清晰）：

function getBookById(id) {
    console.log("传入的参数(in getbookbyid函数)= " + id)
    console.log("参数类型(in getbookbyid函数)= " + typeof(id))
    for (var i = 0; i < aStoreItems.length; ++i) {
        if (aStoreItems[i].bID == id) {
            return aStoreItems[i];
        }
    }
    // 未找到匹配ID时返回null，便于后续判断
    return null;
};

function addToCart() {
    var bookSelection = document.getElementById("pID").value;
    console.log("用户输入(in add to cart函数) " + bookSelection);
    // 接收函数返回的商品对象
    var selectedBook = getBookById(bookSelection);
    console.log("返回结果(in add to cart函数) ", selectedBook);
};

额外建议 #

• 尽量避免使用全局变量，优先通过函数参数和返回值传递数据，降低代码耦合度。
• 当遍历完数组未找到匹配项时，返回明确的值（如null），后续可以通过if (selectedBook)判断是否成功找到商品，避免后续逻辑出错。

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