JavaScript數(shù)組方法之數(shù)組合并

izhuhaodev 發(fā)布于2019-08-20 10:37 / 3325人閱讀

摘要：可以看到，方法，簡潔高效，且能實現(xiàn)多個數(shù)組合并并且能夠實現(xiàn)深度嵌套注意最后還是使用了哦，換成是不可以的。多個數(shù)組合并原生的方法可以簡單實現(xiàn)多個數(shù)組合并，比如會返回至于其他方法，應該只是一個接口的問題，可以像下面這樣實現(xiàn)。

網(wǎng)易前端面試的時候，面試官問我有幾種數(shù)組合并的方法，當時第一反應就是concat，但是面試官說幾種，我尋思著原生js方法好像也只有concat呀，就說不改變原數(shù)組的話concat就可以了。當時沒多想，回來之后才發(fā)現(xiàn)，這個

1,concat

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

concat 函數(shù)總結，可以合并多個數(shù)組，不影響原數(shù)組(會造成內存浪費)，不能處理嵌套數(shù)組.

2,基于for循環(huán)使用pop和push方法

    function for_pushshift(arr1,arr2){
        if (arr1.length > arr2.length) {
        for (var i=0; i 
3,使用forEach和pop和push方法實現(xiàn)
這個方法原理和2中一樣，只是使用了forEach代替了for循環(huán)。for循環(huán)方法總結，看上去土而且不好維護,只能合并兩個數(shù)組，也不能處理嵌套數(shù)組。
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方法，簡潔高效，且能實現(xiàn)多個數(shù)組合并,并且能夠實現(xiàn)深度嵌套,注意最后還是使用了concat哦，換成push是不可以的。
6,數(shù)組嵌套合并
上面是5中基本的合并數(shù)組的方法，注意事項和優(yōu)缺點在注釋里都已經(jīng)寫了。上面1-4方法如果含有嵌套數(shù)組，都是直接返回的，也就是沒有對嵌套數(shù)組整合，對嵌套數(shù)組的整合我的思路是使用遞歸，在循環(huán)中加一個判斷是否為數(shù)組，像下面的例子
 function for_pushift(arr1,arr2){
    if (arr1.length > arr2.length) {
    ***for (var i=0; i 
主要是增加了*號部分的判斷代碼， 其他幾種方法也可以增加類似的代碼，在上面方法4中的判斷語句取消屏蔽就可以實現(xiàn)。方法5是不用做任何改變的，本身就可以實現(xiàn)嵌套的合并。
7,多個數(shù)組合并
原生的concat方法可以簡單實現(xiàn)多個數(shù)組合并，比如[1,2,3].concat([4,5,6],[6,7,8)；會返回1,2,3,4,5,6,7,8至于其他方法，應該只是一個接口的問題，可以像下面這樣實現(xiàn)。
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]];
參數(shù)處理好了，上面兩個問題整合一下就OK了。另外一種思路是寫一個整合函數(shù)，參數(shù)是一個數(shù)組，如果數(shù)組有嵌套整合為無嵌套的數(shù)組。
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部分函數(shù)的基礎上再增加一個這樣的函數(shù)就OK了；不過這樣看來總結一下，還是方法5比較好用。

GPU云服務器云服務器 javascript數(shù)組方法數(shù)組合并合并數(shù)組 php合并數(shù)組

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/80240.html

JavaScript 小技巧之數(shù)組合并

摘要：對于一些小數(shù)組來說，這樣做當然沒有問題。第一個主要問題在于，我們將要追加的數(shù)組的元素數(shù)量翻倍了當然是臨時性的，因為實質上要將數(shù)組內容拷貝到函數(shù)調用棧上。所以，假如要追加的數(shù)組中有一百萬個元素，那么幾乎一定會超過函數(shù)和的調用棧限制的大小。原文鏈接： https://davidwalsh.name/combi... 這是一篇介紹 JavaScript 技術的小短文。我們將會講到組合/合并...

張率功 2019-08-21 16:57 評論0 收藏0
Javascript基礎之Array數(shù)組API

摘要：數(shù)組原型提供的方法非常之多，主要分為三種直接修改原數(shù)組原數(shù)組不變，返回新數(shù)組數(shù)組遍歷方法直接修改原數(shù)組的刪除一個數(shù)組中的最后的一個元素，并且返回這個元素添加一個或者多個元素到數(shù)組末尾，并且返回數(shù)組新的長度刪除數(shù)組的第一個元素，并返回這個元素 Javascript數(shù)組原型提供的方法非常之多，主要分為三種：直接修改原數(shù)組原數(shù)組不變，返回新數(shù)組數(shù)組遍歷方法直接修改原數(shù)組的API ...

hsluoyz 2019-08-23 15:28 評論0 收藏0
LeetCode 之 JavaScript 解答第23題 —— 合并K個有序鏈表（Merge K S

摘要：分治算法遞歸每層操作分解將原問題分解成一系列的子問題。分治算法滿足的條件可分解原問題與分解成的小問題具有相同的模式無關聯(lián)原問題分解成的子問題可以獨立求解，子問題之間沒有相關性，這一點是分治算法跟動態(tài)規(guī)劃的明顯區(qū)別。 Time：2019/4/10Title: Merge K Sorted ListsDifficulty: DifficultyAuthor: 小鹿題目：Merge K...

zhou_you 2019-08-23 16:53 評論0 收藏0
Javascript數(shù)組系列五之增刪改和強大的 splice()

摘要：刪除數(shù)組元素的開始索引需要刪除元素的個數(shù)，插入數(shù)組的元素語法因為參數(shù)變化多樣，我們主要從三個方面來展示的用法。今天是我們介紹數(shù)組系列文章的第五篇，也是我們數(shù)組系列的最后一篇文章，只是數(shù)據(jù)系列的結束，所以大家不用擔心，我們會持續(xù)的更新干貨文章。生命不息，更新不止！今天我們就不那么多廢話了，直接干貨開始。我們在《Javascript數(shù)組系列一之棧與隊列》中描述我們是如何利用 pus...

chavesgu 2019-08-23 12:01 評論0 收藏0
JavaScript基礎整理之數(shù)組(一)

摘要：原文發(fā)布在數(shù)組應該是日常開發(fā)中最常見的數(shù)據(jù)結構了，雖然常見，但是卻不一定能優(yōu)雅地處理好，中數(shù)組的處理方法很多，各個方法的參數(shù)返回值是否修改原數(shù)組等也容易記混。原文發(fā)布在：http://blog.xiaofeixu.cn/2017... 數(shù)組應該是日常開發(fā)中最常見的數(shù)據(jù)結構了，雖然常見，但是卻不一定能優(yōu)雅地處理好，JavaScript中數(shù)組的處理方法很多，各個方法的參數(shù)、返回值、是否修...

dingda 2019-08-21 17:04 評論0 收藏0