jQuery - 合并两个数组并进行替换

Question

我正在尝试使用jQuery将两个数组合并到第三个数组中，希望能够找到最简单的方法，如下所示：

[A,B,C,D]
[1,2,3,4]

答案是：

[A,1,B,2,C,3,D,4]

另一个示例：

[A,B,C] + [1,2,3,4,5] = [A,1,B,2,C,3,4,5]
[A,B,C,D] + [1,2,3] = [A,1,B,2,C,3,D]

- 350D

---

它们的长度会一直保持相同吗？ - Trey

当一个数组比另一个数组长时，应该发生什么？ - Arnaud Le Blanc

@MattBall 我正在使用nth-child排序和一些丑陋的计算 :) - 350D

@arnaud576875 [A,B] + [1,2,3,4] = [A,1,B,2,3,4] 的意思是将两个列表合并成一个新的列表，其中第一个列表为 [A,B]，第二个列表为 [1,2,3,4]，合并后的新列表为 [A,1,B,2,3,4]。 - 350D

Answer 1

var result = [];
var a = ['A','B','C','D'];
var b = [1,2,3,4];

$.each(a, function (index, value) {
    result.push(value);
    result.push(b[index]);
});

在这里尝试： http://jsfiddle.net/GcTx7/3/ 没有jQuery：

for (var i = 0, l = a.length; i < l; ++i) {
    result.push(a[i], b[i]);
}

这个函数处理两个数组长度不同的情况：

for (var i = 0, l = Math.max(a.length, b.length); i < l; ++i) {
    if (i < a.length) result.push(a[i]);
    if (i < b.length) result.push(b[i]);
}

http://jsfiddle.net/GcTx7/1/

- Arnaud Le Blanc

---

如果 a.length > b.length，这将会把 undefined 推入 result 中，我强烈怀疑这不是期望的行为。 - Matt Ball

这是未定义行为 :) - Arnaud Le Blanc

很好的开始。谢谢！你能帮忙处理不同长度的数组吗？ - 350D

请使用正确的通用$.each()。将非元素数组传递给$()不是受支持的行为。 - user113716

@350D：你只需要将集合作为第一个参数，函数作为第二个参数调用$.each()方法。$.each( arr, fn )。它是专门用于迭代/枚举各种类型的集合而不仅仅是jQuery对象。 - user113716

Answer 2

您可以直接使用jQuery.map()^[docs]方法创建一个数组。当您返回一个数组时，jQuery.map会执行.concat()操作。这也可以避免在长度不同时出现数组中的空洞。

示例代码：http://jsfiddle.net/zbCj7/

var chars = ['A','B','C','D'];
var nums = [1,2,3,4];

var res = $.map( chars.length > nums.length ? chars : nums, function(v,i) {
    var chr = chars[i];
    var num = nums[i];
    if( chr !== undefined && num !== undefined ) {
        return [chr,num];
    } else if( chr === undefined ) {
        return num;
    } else {
        return chr;
    }
});

稍微简洁一些：

http://jsfiddle.net/zbCj7/1/

var chars = ['A','B','C','D'];
var nums = [1,2];

var res = $.map( chars.length > nums.length ? chars : nums, function(v,i) {
    var chr = chars[i];
    var num = nums[i];
    return ( chr !== undefined && num !== undefined ) ?
        [chr,num] : ( chr === undefined ) ? num : chr;
});

---

如果你真的想要让它更简洁，你可以这样做：

http://jsfiddle.net/zbCj7/2/

var chars = ['A','B','C','D'];
var nums = [1,2];

var res = $.map( chars.length > nums.length ? chars : nums, function(v,i) {
    return [ chars[i], nums[i] ].slice( chars[i]===undefined,
                                        nums[i]===undefined || 2 );
});

- user113716

Answer 3

另一种使用jQuery实现的方法是：

var a = [1,2,3,4];
var b = ['a','b','c'];
var merged_array = mergeArray([a,b]);

function mergeArrays(arrayOfArray) {
    var result = []; 
    for (var i = 0; i < arrayOfArray.length;i++ ) {
        $.merge(result, arrayOfArray[i]);
    }
    return result;
}

这样，您可以合并任意数量的数组，而不必担心单个数组的大小。

希望这也能帮到您。

- devsri