如何实现更简洁跨浏览器兼容的JSON值校验与判断逻辑

你把匹配项抽离为数组的思路完全可行，相比堆砌||和includes的写法，可维护性会高很多，以下是不同兼容场景的实现方式，逻辑和你原有代码完全等价，不会出现匹配偏差。

第一步：抽离匹配配置 #

首先把所有需要匹配的商学类专业关键词抽离为独立数组，后续增删匹配项只需要修改这个数组，不用动判断逻辑：

var BUSINESS_MAJOR_LIST = [
  'Accounting',
  'Business_Administration',
  'BA_and_Accounting',
  'BA_and_Chemistry',
  'BA_and_Communication',
  'BA_and_Computer_Info_Systems',
  'BA_and_Economics',
  'BA_and_Sport_Management',
  'BA_and_Theatre',
  'Business_and_Visual_Arts',
  'Computer_Information_Systems',
  'Data_Analytics',
  'Economics',
  'Marketing',
  'Sustainable_Business'
];

现代浏览器兼容写法 #

如果不需要兼容IE11及更早版本的浏览器，直接用数组的some()方法遍历判断即可——some()会在任意一个数组项满足匹配条件时返回true，和你原来一串||的判断逻辑完全一致：

if (BUSINESS_MAJOR_LIST.some(function(keyword) {
  return majorValue.includes(keyword);
})) {
  $('#internship').load('./snippets/internship/Business.html');
}

如果你的项目支持ES6语法，还可以简化成箭头函数写法，更简洁：

if (BUSINESS_MAJOR_LIST.some(keyword => majorValue.includes(keyword))) {
  $('#internship').load('./snippets/internship/Business.html');
}

全浏览器兼容写法 #

如果需要兼容IE等老旧浏览器，把字符串的includes()换成兼容性更好的indexOf()即可（indexOf在匹配到子串时会返回子串起始位置，没匹配到返回-1，所有浏览器都支持这个方法）：

if (BUSINESS_MAJOR_LIST.some(function(keyword) {
  return majorValue.indexOf(keyword) !== -1;
})) {
  $('#internship').load('./snippets/internship/Business.html');
}

注：数组的some()方法从IE9开始支持，如果需要兼容IE8及更早版本，只需要加一个简单的polyfill，或者换成普通for循环遍历判断即可。

扩展：多分类场景优化 #

如果后续你需要对接更多专业分类、加载不同的HTML片段，可以直接把分类匹配规则和对应资源路径做成映射表，不用为每个分类写重复的if判断：

// 专业分类与对应片段的映射配置
const MAJOR_SNIPPET_CONFIG = {
  './snippets/internship/Business.html': BUSINESS_MAJOR_LIST,
  // 新增其他分类只需要在这里加配置，比如：
  // './snippets/internship/Engineering.html': ['Computer_Science', 'Software_Engineering']
};

// 统一遍历匹配
Object.keys(MAJOR_SNIPPET_CONFIG).forEach(function(path) {
  const matchList = MAJOR_SNIPPET_CONFIG[path];
  if (matchList.some(keyword => majorValue.includes(keyword))) {
    $('#internship').load(path);
  }
});

补充说明 #

你原有逻辑是子串模糊匹配，以上方案完全保留了这个规则，如果后续需要改成精确匹配专业名称，只需要把判断条件换成majorValue === keyword即可，修改成本极低。

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