合并单源JSON中的两个数组以适配JS模板框架（MustacheJS等）

当然可以实现！其实有好几种简单靠谱的方法，能帮你把同一个源文件里的两个嵌套数组合并成单一数组，完全适配MustacheJS、Handlebars这类模板引擎。我给你拆解几种实用方案：

方案1：原生JavaScript concat方法 #

你之前了解到concat能合并独立数组，但其实它同样适用于同一源里的子数组。只要你能定位到JSON里的两个子数组，直接调用concat就能把它们合并：

// 假设已获取到你的JSON数据并存在rawData变量中
const rawData = [
  [
    { "productimage": "https://c.static-nike.com/a/images/t_PDP_864_v1/f_auto/i0lfddlghaiwfqlvlqay/air-vortex-shoe-fmq6pS.jpg", "producturl": "https://www.nike.com/gb/t/air-vortex-shoe-fmq6pS" },
    { "productimage": "https://c.static-nike.com/a/images/t_PDP_864_v1/f_auto/cmuof8adhfipkvd0f43r/air-max-95-shoe-XPTbV2mM.jpg", "producturl": "https://www.nike.com/gb/t/air-max-95-shoe-XPTbV2mM" }
  ],
  [
    { "sitename": "Nike", "sitetitle": "Nike. Just Do It.. Nike.com", "siteurl": "https://www.nike.com/gb/en_gb/" }
  ]
];

// 合并两个子数组
const mergedArray = rawData[0].concat(rawData[1]);

方案2：ES6扩展运算符（更简洁） #

如果你用的是支持ES6的环境，扩展运算符写法更直观，代码可读性也更强：

const mergedArray = [...rawData[0], ...rawData[1]];

方案3：Underscore.js工具函数 #

你提到了Underscore，其实它的_.flatten()方法特别适合这种二维数组转一维的场景——不用单独指定子数组索引，直接处理整个嵌套数组就能得到目标结果：

const mergedArray = _.flatten(rawData);

后续模板渲染示例 #

合并完成后，你就可以把mergedArray传给模板引擎了，比如用MustacheJS的话：

// 假设你的模板在页面的script标签中
const template = document.getElementById('product-site-template').innerHTML;
// 把合并后的数组作为模板数据传入
const renderedContent = Mustache.render(template, { items: mergedArray });
// 渲染到页面目标元素
document.getElementById('render-target').innerHTML = renderedContent;

简单来说，不管是原生方法还是Underscore工具，核心都是把嵌套在同一个JSON里的两个子数组提取出来，再合并成一维数组——完全满足你用于JS模板的需求。

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