使用JavaScript find()函数根据曲目查找专辑对象返回undefined问题排查

原数据与问题代码 #

给定专辑数组：

const albumCollection = [
    {
        id: 2125,
        title: 'Use Your Illusion',
        artist: "Guns N' Roses",
        tracks: ['November Rain', "Don't Cry"]
    },
    {
        id: 2975,
        title: '1999',
        artist: 'Prince',
        tracks: ['1999', 'Little Red Corvette']
    },
    {
        id: 1257,
        title: 'Transformer',
        artist: 'Lou Reed',
        tracks: ['Vicious', 'Perfect Day', 'Walking on the Wild Side']
    },
];

用于查找专辑的函数：

function getAlbumWithTrack(track) {
    /*
    const result = albumCollection.find((item) => item.id === track);
    console.log(result);
    */
    return albumCollection.find(function (title) {
        return title.track === track;
    });
}

console.log(getAlbumWithTrack('Little Red Corvette'));
console.log(getAlbumWithTrack('November Rain'));
console.log(getAlbumWithTrack('perfect day'));

为什么两段代码都返回undefined #

• 注释代码的问题：item.id === track是把传入的曲目名称（字符串类型）和专辑的id（数字类型）做对比，两者类型和值完全不匹配，自然找不到对应专辑，返回undefined。
• 未注释代码的问题：
  1. 参数命名混乱，把遍历的专辑对象命名为title，易造成误解；
  2. 专辑对象没有track属性，只有存储曲目的tracks数组，title.track结果为undefined，和传入的曲目名称对比永远不相等，因此返回undefined。

正确的实现方案 #

要实现根据曲目查找专辑，需检查专辑的tracks数组是否包含目标曲目，同时处理大小写不敏感的场景（比如输入perfect day匹配Perfect Day）：

function getAlbumWithTrack(track) {
    // 统一转成小写，实现大小写不敏感匹配
    const targetTrack = track.toLowerCase();
    return albumCollection.find(album => {
        return album.tracks.some(t => t.toLowerCase() === targetTrack);
    });
}

// 测试结果
console.log(getAlbumWithTrack('Little Red Corvette')); // 返回Prince的1999专辑对象
console.log(getAlbumWithTrack('November Rain')); // 返回Guns N' Roses的Use Your Illusion专辑对象
console.log(getAlbumWithTrack('perfect day')); // 返回Lou Reed的Transformer专辑对象

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