集成iTunes搜索时遇filter方法报错，求技术解决方案

嘿，我来帮你捋清楚问题出在哪！你遇到的这个报错，核心原因是你搞错了iTunes API返回的数据结构——你直接把整个API响应对象赋值给了songs，但实际上歌曲列表是嵌套在响应对象的results属性里的数组，不是整个响应本身。

问题拆解 #

当你调用iTunes的搜索API后，返回的JSON结构大概是这样的（简化版）：

{
  "resultCount": 50,
  "results": [
    {"trackName": "Banana Pancakes", "artistName": "Jack Johnson", ...},
    // 更多歌曲对象
  ]
}

你现在的代码里把data直接赋值给songs，这时候songs是一个包含resultCount和results的普通对象，而不是数组。对象当然没有filter方法，所以控制台会抛出类型错误。

修复步骤 #

1. 修正数据赋值逻辑
   把fetch回调里的赋值改成取data.results，这样songs就会变成真正的歌曲数组：

   fetch(endpoint)
     .then(blob => blob.json())
     .then(data => songs = data.results); // 这里改成data.results
   

2. 处理异步时序问题
   另外要注意，fetch是异步操作——如果在请求还没完成时就调用findSongs，songs可能还没被正确赋值。推荐用async/await来让代码更清晰，同时确保数据加载完成后再执行过滤：

   const endpoint = 'https://itunes.apple.com/search?term=jack+johnson&entity=song';
   let songs = [];
   
   // 用async函数处理异步加载
   async function loadAndFilterSongs() {
     const response = await fetch(endpoint);
     const data = await response.json();
     songs = data.results;
   
     // 数据加载完成后再调用过滤
     const matchedSongs = findSongs('pancake', songs);
     console.log(matchedSongs);
   }
   
   // 优化函数参数命名，避免歧义（之前的title其实是歌曲对象）
   function findSongs(wordToMatch, songs){
     return songs.filter(song => {
       const regex = new RegExp(wordToMatch, 'gi');
       return song.trackName.match(regex);
     });
   };
   
   // 启动流程
   loadAndFilterSongs();
   

3. 小细节优化
   之前findSongs里的参数title容易让人误解成字符串，改成song更符合语义，一眼就能看出是单个歌曲对象。

这样修改后，你的过滤功能应该就能正常工作啦！

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