使用 Javascript/Vue.Js 合并数组中的数组
Posted
技术标签:
【中文标题】使用 Javascript/Vue.Js 合并数组中的数组【英文标题】：Merge arrays within an array using Javascript/Vue.Js 【发布时间】：2019-04-17 05:37:14 【问题描述】：我有一个包含 3 个数组的固定 JSON 数组。获取 JSON 后，我试图将它们合并到一个数组中。这是我尝试过的，但 Vue.JS 数组似乎是空的。
以前的
this.items = items;
新尝试
this.items = items.concat.apply([], arrays);
我在下面的链接中放了一个 3 页演示的示例：
https://arraydemo.netlify.com
<body>
<!-- Page List -->
<div class="container text-center mt-5" id="app">
<h1 class="display-4">Vue Page Output:</h1>
<!--<h2>items[0][0].page1</h2>-->
<h2>items.page1</h2>
</div>
<div class="container text-center mt-5">
<h3>Other Pages</h3>
<a href="products.html">Products</a>
<a href="contactus.html">Contact Us</a>
</div>
<!-- /.container -->
<script type="text/javascript">
const app = new Vue(
el: '#app',
data:
items: []
,
created: function ()
fetch('test.json')
.then(resp => resp.json())
.then(items =>
this.items = items.concat.apply([], arrays);
)
);
</script>
</body>
JSON
[
[
"page1": "Company Name"
],
[
"products": "Product List"
],
[
"contactus": "Contact Us at Acme Corp"
]
]
所需的 JSON 输出
JSON
[
"page1": "Company Name"
,
"products": "Product List"
,
"contactus": "Contact Us at Acme Corp"
]
【问题讨论】：
所以你需要将子数组合并成一个数组，你能发布你想要的输出数组吗？ ***.com/questions/10865025/… 您在arraydemo.netlify.com 的示例错误为ReferenceError : arrays is not defined。
@DILEEPTHOMAS 我已更新问题以反映所需的 JSON 输出
【参考方案1】：
您可以遍历每个对象，其中每个对象都是一个数组，循环遍历嵌套数组并将对象推送到一个新数组。
希望能解决你的问题
var arr = [
[
"page1": "Company Name"
],
[
"products": "Product List"
],
[
"contactus": "Contact Us at Acme Corp"
]
]
// normal way
var mergedArrNormalWay = [];
arr.forEach(o =>
o.forEach(so => mergedArrNormalWay.push(so))
)
// using concat
var merged = [].concat.apply([], arr);
console.log("merged in a normal iteration way using for each", mergedArrNormalWay);
console.log("reduced way", merged)【讨论】：
我可以将[].concat.apply([], arr); 应用到this.items = 的末尾吗？我已经更新了与上面略有不同的所需 JSON
为了理解目的，我只使用了 forEach 方法，您可以使用 concat 方法，我希望它应该可以工作。如果您遇到任何问题，请告诉我:)
嗨，Dileep，这正是我所需要的。只是无法将其集成到我的 Vue.JS 页脚代码中...pastebin.com/wxfFwwMy
那么您能简要介绍一下您遇到的问题吗？【参考方案2】：
鉴于您上面的 JSON 示例和所需的输出，在您的外部数组上调用 .flat() 应该适合您。
someArray.flat()
MSDN - Array.prototype.flat()
【讨论】：
flat 方法正是在这种情况下应该使用的方法。唯一留下的浏览器是 IE，但 IE 显然不再是您应该支持的浏览器的一部分。【参考方案3】：
您的问题不清楚是要以对象数组还是数组数组结尾。我假设您需要一个数组数组（因为这稍微复杂一些），但如果您需要一个对象数组，您可以简化以下内容（特别是 Object.entries）：
merged = [];
items.map(
item => item.forEach(inner => (
merged.push(Object.entries(inner).flat())
))
);
【讨论】：
谢谢 trh88 - 我已经更新了问题中所需的 JSON 输出 - 是否将上述代码输入到.then(items => 下方的创建方法中以上是关于使用 Javascript/Vue.Js 合并数组中的数组的主要内容，如果未能解决你的问题，请参考以下文章