如何根据JSON对象的一个属性值匹配输出对应的另一属性值

原有代码问题 #

• 你定义的banner是数组结构，不能直接读取.name/.message属性，需要遍历数组逐个校验规则
• indexOf匹配不到内容时返回-1，直接放到if判断里会把不匹配的情况误判定为真，需要判断返回值是否大于-1
• 规则数组里存的匹配关键字是href属性，原有代码调用了不存在的name属性，属性名对应错误

可直接运行的实现代码 #

var banner = [
    {
        'href': 'apples',
        'message': 'yes!'
    },
    {
        'href': 'oranges',
        'message': 'no!'
    },
    {
        'href': 'grapes',
        'message': 'maybe!'
    },
];

// 遍历所有匹配规则
banner.forEach(item => {
    // 检查当前URL是否包含对应href关键字
    if (window.location.href.indexOf(item.href) > -1) {
        console.log(item.message);
    }
})

可选优化 #

• 可以用更语义化的includes()方法替代indexOf判断，代码可读性更高：

  if (window.location.href.includes(item.href)) {
      console.log(item.message);
  }
  

• 如果有多个规则同时命中URL，上述代码会输出所有匹配的message。如果只需要输出第一个匹配到的结果，可以用带break的for循环实现：

  for (let i = 0; i < banner.length; i++) {
      const item = banner[i];
      if (window.location.href.includes(item.href)) {
          console.log(item.message);
          break;
      }
  }
  

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