为何将查找值设为变量后array.find()返回undefined？

问题根源 #

event.target.dataset.id 获取到的是字符串类型的值，而数组中 product.id 是数字类型。你使用的严格相等运算符 === 会同时比较值和类型，字符串'1'和数字1类型不匹配，导致匹配失败返回undefined。而直接写数值1时，类型和product.id一致，所以能正常匹配。

解决方案 #

以下几种方法都能实现动态匹配：

方法1：将idToFind转换为数字类型（推荐）

把从dataset获取的字符串转为数字，再用严格相等比较：

addToCartButtons.forEach(button => {
    button.addEventListener('click', (event) => {
        // 转数字的几种方式任选一种：Number() / parseInt() / +变量
        const idToFind = Number(event.target.dataset.id);
        let array = [{id: 1, name: 'mattia'}, {id: 2, name: 'cesare'}];
        
        function findProd(product) {
            return product.id === idToFind;
        }
        
        const result = array.find(findProd);
        console.log(result);
    })
});

方法2：使用宽松相等运算符==

宽松相等会自动转换类型进行比较，但不如严格相等严谨，仅作备选：

function findProd(product) {
    return product.id == idToFind;
}

方法3：简化为箭头函数写法

直接在find方法里写逻辑，更简洁：

addToCartButtons.forEach(button => {
    button.addEventListener('click', (event) => {
        const idToFind = Number(event.target.dataset.id);
        let array = [{id: 1, name: 'mattia'}, {id: 2, name: 'cesare'}];
        
        const result = array.find(product => product.id === idToFind);
        console.log(result);
    })
});

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