JavaScript嵌套循环遍历JSON生成跳转链接未获得预期结果

问题汇总 #

• 语法错误：json2中第一个tab的exclude字段引号书写混乱，把双引号错写成单引号，导致JSON结构不合法，代码直接报错。
• 拼接错误：str1 +=str& 写法错误，&是需要拼接的字符串内容，不是运算符，应该写成str1 += str + "&"。
• 逻辑错误：maxLength计算规则错误，你用原始json1的key长度减2判断是否是最后一个字段，但实际排除theme和exclude的key后，有效字段数量比原始少，这个判断完全不成立，会导致漏拼接或者错误插入a标签。
• 未编码参数：key中存在空格（比如sku Brand），URL参数需要对空格做转义处理，直接拼接会导致参数格式错误。
• 变量未声明：final_array没有提前初始化，直接调用push方法会抛出引用错误。
• HTML拼接错误：a标签的href属性没有加引号，且href结束位置和target属性之间没有空格，会导致生成的HTML标签属性错乱无法识别。
• 多余遍历逻辑：json2.nav是数组，直接用forEach遍历数组项即可，不需要调用Object.keys转成索引再遍历。

修正后的完整代码 #

const json1 = {
  "sku Brand": "abc",
  "strngth": "ALL",
  "area": "",
  "Country": "",
  "local Brand": "",
  "theme": "HideDisNameFilters"
}

const json2 = {
  "nav": [{
    "tabname": "tab1",
    "exclude": ["area","xyz"]
  },{
    "tabname": "tab2",
    "exclude": ["Country"]
  }]
}

const final_array = []
// 直接遍历nav数组项
json2.nav.forEach(tab => {
  // 用数组存有效参数，最后用&拼接，避免多余&的问题
  const validParams = []
  Object.keys(json1).forEach(key => {
    // 排除theme字段 + 当前tab的exclude字段
    if (key === 'theme' || tab.exclude.includes(key)) return
    // 处理key中的空格，转成+，和预期输出格式一致
    const encodedKey = key.replaceAll(' ', '+')
    validParams.push(`${encodedKey}=${json1[key]}`)
  })
  // 拼接参数和a标签
  const queryStr = validParams.join('&')
  const aTag = `<a href='${queryStr}' target='_blank'>${tab.tabname}</a>`
  final_array.push(aTag)
})

console.log(final_array)

输出结果 #

[
  "<a href='sku+Brand=abc&strngth=ALL&Country=&local+Brand=' target='_blank'>tab1</a>",
  "<a href='sku+Brand=abc&strngth=ALL&area=&local+Brand=' target='_blank'>tab2</a>"
]

注：你预期输出里的Strngth为首字母大写是笔误，原始json1中对应key为小写开头的strngth，如果需要大写可以自行修改key值或者代码中转大写。

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