将两个对象数量相等的数组合并为一个数组答案

【问题标题】：Merge two arrays with equal number of objects into one array将两个对象数量相等的数组合并为一个数组
【发布时间】：2015-10-11 11:56:03
【问题描述】：

我有两个用对象填充的数组，看起来是这样的：

数组年：

Array [ year: "1977", year: "1980"... ]
Object { year: "1977" }

ArrayMeal：

Array [ meal: "carrot", meal: "beef"... ]
Object { meal: "carrot" }

如何将两个数组合并为一个看起来如此的数组？

Array [ {year: "1977", meal: "carrot"}, {year: "1980", meal: "beef"}... ]

这两个数组是这样填充的：

arrayYear = [];
$('.item-year').each(function(index){
    arrayYear.push({ year: $(this).attr('data-year') });
})

arrayMeal = [];
$('.item-meal').each(function(index){
    arrayMeal.push({ meal: $(this).attr('data-meal') });
})

【问题讨论】：

实际的arrayYear 和arrayMeal 是什么样的？我对你对它们的描述感到困惑。
尝试添加更多信息，不确定是否有帮助
您显示的“数组”不是有效的 javascript 数组。你的意思是数组看起来像["1977","1980", ...]？

标签： jquery arrays merge

【解决方案1】：

基本上，您想要扩展一个对象。为此，jQuery 有一个名为.extend 的方法。但是这里有一个问题，你有一个对象数组......

要解决这个问题，你必须循环数组。您可以使用此代码（阅读 cmets 以了解每一行）：

// Assign first array
var arr1=[{year:1992},{year:1996},{year:2000}];
// Assign second array
var arr2=[{meat:'beef'},{meat:'porc'},{meat:'chicken'},{meat:'robot'}]; 

// Declare the resulting array (prevent from alterring the original arrays)
var merged_arr = []

// Loop the array
// We use Math.max so it work if 1 array has more items
for(var i = 0; i < Math.max(arr1.length, arr2.length); i++){
    // Set merged_arr cell's 1 to a new object which is a merge of both objects
    // First arg is an empty object so no arrays are alterred
    merged_arr[i] = $.extend({}, arr1[i], arr2[i]);
}

// Alert the result
alert(JSON.stringify(merged_arr))

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

基本思想是将对象循环并连接在一起。在jQuery的帮助下，我们可以使用extend。

var ArrayYear = [ { year: "1977" }, {year: "1977" }];
var ArrayMeal = [ { meal: "carrot" }, {meal: "beef" }];

var array = ArrayYear.map( function (obj, index) {
    return $.extend({}, obj, ArrayMeal[index]);
});
console.log(array);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

现在有了您发布的内容，除非您需要，否则无需构建这两个数组。

var years = $('.item-year');

var arrayOut = [];
$('.item-meal').each(function(index){
    arrayOut.push({ meal: $(this).attr('data-meal'), year : years.eq(index).attr('data-year') });
});

也可以在那里使用 map() 而不是创建一个新数组。

【讨论】：

【解决方案3】：

由于它们的长度相同，您可能不需要创建两个数组，并且可以通过匹配元素索引在当前的 DOM 循环中创建一次

var $meals=$('.item-meal');

var fullArray = $('.item-year').map(function(idx){
    return {
       year: $(this).data('year') ,
       meal: $meals.eq(idx).data('meal')
    }
}).get();

这假设您创建原始数组只是为了在之后合并它们

DEMO

【讨论】：