快捷導(dǎo)航

JavaScript數(shù)組合并的8種常見方法小結(jié)

更新時(shí)間：2022年11月12日 11:37:56 作者：tengxi_5290

項(xiàng)目過程中經(jīng)常會(huì)遇到 JS 數(shù)組合并的情況,時(shí)常為這個(gè)糾結(jié),這里整理一下,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組合并的8種常見方法,需要的朋友可以參考下

1.ES6 解構(gòu)

[...arr, ...array]

不改原數(shù)組值，生成新的數(shù)組。

2.遍歷添加

array.forEach(item => {
    arr.push(item)
})

遍歷方法：forEach、map、filter、every、for、for in、for of等。

添加方法：push（后追加）、unshift（前追加）等。

arr值改變成追加后的樣子，array值不改變

3.concat

arr.concat(array)

不改原數(shù)組值，生成新的數(shù)組。

4.join & split

(arr.join(',') + ',' + array.join(',')).split(',')

原數(shù)組值不改變。

默認(rèn)會(huì)把數(shù)組中的數(shù)字類型轉(zhuǎn)成字符串類型。

數(shù)組的項(xiàng)是引用類型時(shí)會(huì)自動(dòng)生成'[object Object]'，造成數(shù)據(jù)丟失或錯(cuò)誤。

5.解構(gòu)添加

arr.push(...array)
arr.unshift(...array)

arr變成合并后的樣子，array值不變。

6.splice解構(gòu)

arr.splice(arr.length, '', ...array)

原數(shù)組值不變，返回空數(shù)組。

7.apply

arr.push.apply(arr, array)
arr.unshift.apply(arr, array)

原數(shù)組值不改變，返回拼接后數(shù)組的長(zhǎng)度。

8.call

arr.push.call(arr, ...array)
arr.unshift.call(arr, ...array)

原數(shù)組值不改變，返回拼接后數(shù)組的長(zhǎng)度。

補(bǔ)充：兩個(gè)數(shù)組的交叉合并

var ary=["A","B","C","D"];
var ary2=[1,2,3,4,5,6,];
function aryJoinAry(ary,ary2) {
    var itemAry=[];
    var minLength;
    //先拿到兩個(gè)數(shù)組中長(zhǎng)度較短的那個(gè)數(shù)組的長(zhǎng)度
    if(ary.length>ary2.length){
        minLength=ary2.length;
    }
    else{
        minLength=ary.length;
    }
    //將兩個(gè)數(shù)組中較長(zhǎng)的數(shù)組記錄下來
    var longAry=arguments[0].length>arguments[1].length?arguments[0]:arguments[1];
    //循環(huán)范圍為較短的那個(gè)數(shù)組的長(zhǎng)度
    for (var i = 0; i < minLength; i++) {
        //將數(shù)組放入臨時(shí)數(shù)組中
        itemAry.push(ary[i]);
        itemAry.push(ary2[i])
    }
    //itemAry和多余的新數(shù)組拼接起來并返回。
    return itemAry.concat(longAry.slice(minLength));
}
console.log(aryJoinAry(ary, ary2));// ["A", 1, "B", 2, "C", 3, "D", 4, 5, 6]