JavaScript数组方法之数组合并

izhuhaodev 发布于2019-08-20 10:37 / 3283人阅读

摘要：可以看到，方法，简洁高效，且能实现多个数组合并并且能够实现深度嵌套注意最后还是使用了哦，换成是不可以的。多个数组合并原生的方法可以简单实现多个数组合并，比如会返回至于其他方法，应该只是一个接口的问题，可以像下面这样实现。

网易前端面试的时候，面试官问我有几种数组合并的方法，当时第一反应就是concat，但是面试官说几种，我寻思着原生js方法好像也只有concat呀，就说不改变原数组的话concat就可以了。当时没多想，回来之后才发现，这个

1,concat

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

concat 函数总结，可以合并多个数组，不影响原数组(会造成内存浪费)，不能处理嵌套数组.

2,基于for循环使用pop和push方法

    function for_pushshift(arr1,arr2){
        if (arr1.length > arr2.length) {
        for (var i=0; i 
3,使用forEach和pop和push方法实现
这个方法原理和2中一样，只是使用了forEach代替了for循环。for循环方法总结，看上去土而且不好维护,只能合并两个数组，也不能处理嵌套数组。
4，使用reduce()和reduceRight()方法
function concat_reduce( arr1 ,arr2){
    if(arr1.length > arr2.length){
       return arr1.reduce( function(prev,curr){
           if (Array.isArray(curr)) {
               concat_reduce(curr);
           }  else{ 
               prev.push(curr);
            return prev ;    //return 语句不能忘记，要自己返回prev的值，
            }             
        }, arr2);
    } else {
       return arr2.reduceRight(function(prev ,curr){
             prev.unshift(curr);
             return prev ;
       } ,arr1);
    }
}
5,使用apply方法
function concat_apply() {
        // return  Array.prototype.push.apply(arr1,arr2);
        return Array.prototype.concat.apply([], arguments)
      }
使用：
var arr2 =  [ "a","b"];
console.log([concat_apply([[1, 2],[3, 4, 5], [6, 7, 8, 9,[11,12,[13]]],10],arr2)].join(":")) ;  
输出为  1,2,3,4,5,6,7,8,9,11,12,13,10,"a","b"  。可以看到，apply方法，简洁高效，且能实现多个数组合并,并且能够实现深度嵌套,注意最后还是使用了concat哦，换成push是不可以的。
6,数组嵌套合并
上面是5中基本的合并数组的方法，注意事项和优缺点在注释里都已经写了。上面1-4方法如果含有嵌套数组，都是直接返回的，也就是没有对嵌套数组整合，对嵌套数组的整合我的思路是使用递归，在循环中加一个判断是否为数组，像下面的例子
 function for_pushift(arr1,arr2){
    if (arr1.length > arr2.length) {
    ***for (var i=0; i 
主要是增加了*号部分的判断代码， 其他几种方法也可以增加类似的代码，在上面方法4中的判断语句取消屏蔽就可以实现。方法5是不用做任何改变的，本身就可以实现嵌套的合并。
7,多个数组合并
原生的concat方法可以简单实现多个数组合并，比如[1,2,3].concat([4,5,6],[6,7,8)；会返回1,2,3,4,5,6,7,8至于其他方法，应该只是一个接口的问题，可以像下面这样实现。
function for_more(){
    var oriArr = arguments[0] ? arguments[0] : [];
    var otherArr = Array.prototype.slice.call(arguments,1) ;
    otherArr.forEach(function(item){
        oriArr.push(item);
    })
    return oriArr;
}
console.log( for_more([1,2],[3,[4,5]],[6,7]) ); // [1,2,[3,[4,5]],[6,7]];
参数处理好了，上面两个问题整合一下就OK了。另外一种思路是写一个整合函数，参数是一个数组，如果数组有嵌套整合为无嵌套的数组。
function flatten(arr) {
    return arr.reduce(function(flat, toFlatten) {
        return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
    }, []);
}
console.log(flatten([[1, 2],[3, 4, 5], [6, 7, 8, 9]]) ) ; //输出 1,2,3,4,5,6,7,8,9
在1,2部分函数的基础上再增加一个这样的函数就OK了；不过这样看来总结一下，还是方法5比较好用。

GPU云服务器云服务器 javascript数组方法数组合并合并数组 php合并数组

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80240.html

JavaScript 小技巧之数组合并

摘要：对于一些小数组来说，这样做当然没有问题。第一个主要问题在于，我们将要追加的数组的元素数量翻倍了当然是临时性的，因为实质上要将数组内容拷贝到函数调用栈上。所以，假如要追加的数组中有一百万个元素，那么几乎一定会超过函数和的调用栈限制的大小。原文链接： https://davidwalsh.name/combi... 这是一篇介绍 JavaScript 技术的小短文。我们将会讲到组合/合并...

张率功 2019-08-21 16:57 评论0 收藏0
Javascript基础之Array数组API

摘要：数组原型提供的方法非常之多，主要分为三种直接修改原数组原数组不变，返回新数组数组遍历方法直接修改原数组的删除一个数组中的最后的一个元素，并且返回这个元素添加一个或者多个元素到数组末尾，并且返回数组新的长度删除数组的第一个元素，并返回这个元素 Javascript数组原型提供的方法非常之多，主要分为三种：直接修改原数组原数组不变，返回新数组数组遍历方法直接修改原数组的API ...

hsluoyz 2019-08-23 15:28 评论0 收藏0
LeetCode 之 JavaScript 解答第23题 —— 合并K个有序链表（Merge K S

摘要：分治算法递归每层操作分解将原问题分解成一系列的子问题。分治算法满足的条件可分解原问题与分解成的小问题具有相同的模式无关联原问题分解成的子问题可以独立求解，子问题之间没有相关性，这一点是分治算法跟动态规划的明显区别。 Time：2019/4/10Title: Merge K Sorted ListsDifficulty: DifficultyAuthor: 小鹿题目：Merge K...

zhou_you 2019-08-23 16:53 评论0 收藏0
Javascript数组系列五之增删改和强大的 splice()

摘要：删除数组元素的开始索引需要删除元素的个数，插入数组的元素语法因为参数变化多样，我们主要从三个方面来展示的用法。今天是我们介绍数组系列文章的第五篇，也是我们数组系列的最后一篇文章，只是数据系列的结束，所以大家不用担心，我们会持续的更新干货文章。生命不息，更新不止！今天我们就不那么多废话了，直接干货开始。我们在《Javascript数组系列一之栈与队列》中描述我们是如何利用 pus...

chavesgu 2019-08-23 12:01 评论0 收藏0
JavaScript基础整理之数组(一)

摘要：原文发布在数组应该是日常开发中最常见的数据结构了，虽然常见，但是却不一定能优雅地处理好，中数组的处理方法很多，各个方法的参数返回值是否修改原数组等也容易记混。原文发布在：http://blog.xiaofeixu.cn/2017... 数组应该是日常开发中最常见的数据结构了，虽然常见，但是却不一定能优雅地处理好，JavaScript中数组的处理方法很多，各个方法的参数、返回值、是否修...

dingda 2019-08-21 17:04 评论0 收藏0