ASP.NET MVC5中jQuery 3.3.1的Array.find()无法调用问题求助

看起来你踩了一个很常见的小坑——你以为r是JavaScript对象数组，但实际上它只是一段JSON字符串，这就是为什么调用数组的find()方法会报错，反而出现jQuery相关提示的原因。

问题根源 #

$("#MultiSelectDialog_List").attr("data-object") 这个方法获取到的是元素上data-object属性的原始字符串值，并不是已经解析好的JavaScript对象/数组。虽然你预期它是对象数组，但浏览器只会把它当成普通字符串处理，而字符串本身并没有find()方法；至于智能提示显示jQuery函数，大概率是因为你的IDE把这个字符串变量和jQuery对象的类型混淆了。

解决方案 #

你需要先把JSON字符串解析成真正的JavaScript对象数组，再调用find()方法：

// 1. 获取原始JSON字符串
var jsonStr = $("#MultiSelectDialog_List").attr("data-object");
// 2. 解析成JavaScript对象数组
var r = JSON.parse(jsonStr);
// 3. 现在可以正常使用数组的find()方法了
var targetItem = r.find(x => x.ID == "5");
// 注意：要先判断找到的对象是否存在，避免报错
var targetId = targetItem ? targetItem.ID : null;

更简洁的替代方案 #

其实jQuery提供了.data()方法，它会自动帮你解析data-*属性中的JSON字符串，直接返回JavaScript对象/数组，这样你就不用手动调用JSON.parse()了：

// .data()会自动解析JSON，直接得到对象数组
var r = $("#MultiSelectDialog_List").data("object");
var targetItem = r.find(x => x.ID == "5");
var targetId = targetItem ? targetItem.ID : null;

额外注意事项 #

• 确保你的data-object属性中的JSON格式是正确的，比如键名要用双引号，字符串值也要用双引号，否则JSON.parse()或者.data()都会解析失败。
• 如果你的项目需要兼容IE等旧浏览器，数组的find()方法是不支持的，这时候可以用filter()替代：

  var targetItem = r.filter(x => x.ID == "5")[0];
  

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