JavaScript学习笔记：数组合并_JavaScript, JavaScript学习笔记, 数组, Array 教程

作者：大漠日期：2016-06-25 点击：1584

JavaScript中数组知识点很多，前面学习了一些基础知识。那么今天继续学习数组相关的知识。这篇文章主要是看在JavaScript中如何合并数组。

合并数组是一个相当常见，在实际使用的场景也有不同之处。比如说，我们有两个变量：

arr1 = [1,2];
arr2 = [3,4];

将数组arr1和arr2合并成一个数组arr：

arr = [1,2,3,4]

另外还有一种方式是将一个复合数组的数组项合并在一起，比如：

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];

将数组myArray的数组项合并在一起，变成想要的效果：

arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]

将多个数组合并成一个数组

我们先来考虑下面的这种情况，我们有两个（或多个）数组：

var arr1 = [1,2];
var arr2 = [3,4];

想要的结果是将arr1和arr2合并在一起，最终想要的结果是：[1,2,3,4]。实现这样的效果，在JavaScript中有很多种，接下来看看各种实现方法。

Array.prototype.concat()方法

在JavaScript中Array.prototype.concat()方法可以传入的数组或非数组与原数组合并，并组成一个新数组再返回。

如此一来就可以这样做：

var arr1 = [1,2];
var arr2 = [3,4];
var arr = arr1.concat(arr2);
console.log(arr); // [1, 2, 3, 4]

将上面的代码封装到一个函数中，比如：

function flatten (arr1, arr2) {
    return arr1.concat(arr2);
}
flatten(arr1,arr2); // [1, 2, 3, 4]

正如你看到的，返回的结果是一个全新的数组，将数组arr1和arr2合并在一起，并且arr1和arr2不会有任何变化。是不是很简单。

不过这种方法将会有所限制，如果arr1和arr2数组元素都很多的话或者说内存有限的系统中经常重复这个过程，它其实还有很多改进的地方。

for循环和Array.prototype.push()方法

其实还可以使用for循环和Array.prototype.push()方法，将一个数组的内容复制到另一个。

function flatten (arr1, arr2) {
    for (var i = 0; i < arr2.length; i++) {
        arr1.push(arr2[i]);
    }
    return arr1;
}

上面的方法将数组arr2中的每个元素复制到数组arr1中。现在数组arr1中有了数组arr2的元素。

有个小细节，如果数组arr1和arr2相比，数组arr1中的元素数量小于数组arr2时，出于内存和速度的原因，可以将更小的数组arr1放到数组arr2前面。在JavaScript中只需要将Array.prototype.push()方法换成Array.prototype.unshift()方法。

function flatten (arr1,arr2) {
    for (var i = arr1.length - 1; i >= 0; i--) {
        arr2.unshift(arr1[i]);
    }
    return arr2;
}

他们得到的结果都将是一样的。

数组的reduce()或reduceRight()方法

使用for循环看上去很丑而且又不好维护，其实使用Array.prototype.reduce()和Array.prototype.reduceRight()可以做得更好：

function flatten (arr1, arr2) {
    return arr2.reduce(function(prev, curr){
        prev.push(curr);
        return prev;
    },arr1);
}

或者

function flatten(arr1, arr2){
    return arr1.reduceRight( function (prev, curr){
        prev.unshift(curr);
        return prev;
    },arr2);
}

上面这些方法都实现了想要的结果。但他们都有不同的限制，比如使用push()、unshift()、reduce()和reduceRight()只能针对两个数组合并，如果要将两个以上数组合并，就困难了。不过concat()方法可以将多个数组合并在一起。

有时候将两个或多个数组合并在一起的时候，还需要对合并后的相同的数组元素删除（数组去重）。在合并后的数组之后，再做一下数组去重，即可达到数组去重的效果：

function flatten(arr1,arr2){
    var result = [];
    var arr = [];

    arr = arr2.reduce(function(prev, curr){
        prev.push(curr);
        return prev;
    },arr1);

    for (var i = 0; i < arr.length; i++) {
        var index = arr[i];
        if (result.indexOf(index) === -1) {
            result.push(index);
        }
    }
    return result;
}
flatten([1,2],[12,1,2,3,4]); // [1, 2, 12, 3, 4]

将复合数组合并成一个数组

接下来看另外一种数组合并情形。首先有一个复合数组:

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];

现在想要做的就是将数组myArray中的子数组的数组项合并在一起，变成一个新数组：[1, 2, 3, 4, 5, 6, 7, 8, 9]。接下来看看怎么实现这样的数组合并效果。

Array.prototype.push()方法

先来看一个简单的方法，就是通过for循环和Array.prototype.push()方法实现。

function flatten(arr) {
    var result = [];
    for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j< arr[i].length; j++) {
            result.push(arr[i][j]);
        }
    }
    return result;
}
flatten([[1, 2],[3, 4, 5], [6, 7, 8, 9]]); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

不过上面的方法：

flatten([[1, 2],[3, 4, 5], [6, 7, 8, 9],10]);

返回的值仍然是：

[1, 2, 3, 4, 5, 6, 7, 8, 9]

而不是想要的：

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

要完成上面的效果可以做一下改造：

function flatten(a, r) {
    if (!r) {
        r = [];
    }
    for (var i = 0; i < a.length; i++) {
        if (a[i].constructor == Array) {
            flatten(a[i], r);
        } else {
            r.push(a[i]);
        }
    }
    return r;
}
flatten([[1, 2],[3, 4, 5], [6, 7, 8, 9,[11,12,[12,13,[14]]]],10]);
// =>[1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]

Array.prototype.concat()

除了push()方法，在JavaScript中可以使用Array.prototype.concat()方法来实现:

function flatten(arr){
    var result = [];
    for (var i = 0; i < arr.length; i++) {
        result = result.concat(arr[i]);
    }
    return result;
}
flatten([[1, 2],[3, 4, 5], [6, 7, 8, 9]]);//[1, 2, 3, 4, 5, 6, 7, 8, 9]
flatten([[1, 2],[3, 4, 5], [6, 7, 8, 9],10,11]);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

不过可以通过Function.prototype.apply()方法，让其变得更简单：

function flatten (arr) {
    return Array.prototype.concat.apply([], arr);
}

还可以将上面的方法做个精简：

function flatten (arr) {
    return [].concat.apply([],arr);
}

在ES6中，还可以这样写：

function flatten(arr) {
    return [].concat(...arr)
}

另外让自己的代码变得更健壮，还可以添加一些判断：

function flatten(arr) {
    arr = Array.prototype.concat.apply([], arr);
    return arr.some(Array.isArray) ? flatten(arr) : arr;
}

这样写，还可以实现三重或者更多重的数组合并：

flatten([[1, 2],[3, 4, 5], [6, 7, 8, 9,[11,12,[12]]],10]);
// =>[1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 12, 10]
flatten([[1, 2],[3, 4, 5], [6, 7, 8, 9,[11,12,[13]]],10]);
// =>[1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 10]

或者：

function flatten (arr) {
    var isArray = Object.prototype.toString.call(arr) === '[object Array]';
    if (isArray && arr.length > 0) {
        var head = arr[0];
        var tail = arr.slice(1);
        return flatten(head).concat(flatten(tail));
    } else {
        return [].concat(arr);
    }
}

Array.prototype.reduce()

同样的，还可以使用Array.prototype.reduce()来实现同样的效果：

function flatten(arr) {
    return arr.reduce(function(flat, toFlatten) {
        return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
    }, []);
}
flatten([[1, 2],[3, 4, 5], [6, 7, 8, 9]]);
// => [1, 2, 3, 4, 5, 6, 7, 8, 9]
flatten([[1, 2],[3, 4, 5], [6, 7, 8, 9,[10]]]);
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

ES6方法

使用ES6方法：

function flatten(arr) {
    return [].concat(...arr)
}

除了上面这种方法，还可以这样：

function deepFlatten(arr) {
    return flatten( // return shalowly flattened array
        arr.map(x => // with each x in array
            Array.isArray(x) // is x an array?
            ? deepFlatten(x) // if yes, return deeply flattened x
            : x // if no, return just x
        )
    )
}

在上面的几种方法中，添加一些去重的代码，也可以很快实现。

function flatten(arr) {
    var newArr = arr.reduce(function(flat, toFlatten) {
        return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
    }, []);
    var result;
    result = newArr.filter(function (ele,i,arr) {
        return newArr.indexOf(ele) === i;
    });
    return result;
}
flatten([[1, 2],[3, 4, 5], [6, 7, 8, 9,[10,[12]]],11]);
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 11]
flatten([[1, 2],[3, 4, 5,[1,2,3,4,5]], [6, 7, 8, 9,[10,[12]]],11]);
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 11]

有关于更多的数组去重方法，可以阅读《JavaScript学习笔记：数组去重》一文。

扩展阅读

总结

这篇文章主要介绍了在JavaScript中通过push()、concat()和reduce()等方法的组合，实现数组合并的功能。并且在此基础上结合《JavaScript学习笔记：数组去重》一文介绍的方法，还可以轻松的实现合并后的数组，把重复的数组项删除。

如果文中有不对之处或者你有更好的方案，欢迎在下面的评论中与我们一起分享。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：http://www.w3cplus.com/javascript/merge-flatten-an-array-of-arrays-in-javascript.html

上一篇: CSS Text3: text-align-last | 下一篇: Lodash入门介绍

w3cplus

JavaScript学习笔记：数组合并

将多个数组合并成一个数组

Array.prototype.concat()方法

for循环和Array.prototype.push()方法

数组的reduce()或reduceRight()方法

将复合数组合并成一个数组

Array.prototype.push()方法

Array.prototype.concat()

Array.prototype.reduce()

ES6方法

扩展阅读

总结

大漠

关注我们

合作网站

友情链接

关于我们

关于站长

我的作品

w3cplus

你在这里

JavaScript学习笔记：数组合并

将多个数组合并成一个数组

Array.prototype.concat()方法

for循环和Array.prototype.push()方法

数组的reduce()或reduceRight()方法

将复合数组合并成一个数组

Array.prototype.push()方法

Array.prototype.concat()

Array.prototype.reduce()

ES6方法

扩展阅读

总结

大漠

关注我们

合作网站

友情链接

关于我们

关于站长

我的作品