Gabungkan/gabungkan dua tatasusunan JS menggunakan petua method_javascript yang berbeza

Ini ialah artikel ringkas tentang beberapa petua tentang menggunakan tatasusunan JavaScript. Kami akan menggunakan kaedah yang berbeza untuk menggabungkan/menggabungkan dua tatasusunan JS, serta membincangkan kelebihan/kelemahan setiap kaedah.

Mari kita pertimbangkan dahulu situasi berikut:

Salin kod Kod adalah seperti berikut:

var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
var b = [ "foo", "bar", "baz", "bam", "bun", "fun" ];

Jelas sekali hasil gabungan yang paling mudah ialah:

Salin kod Kod adalah seperti berikut:

[
1, 2, 3, 4, 5, 6, 7, 8, 9,
"foo", "bar", "baz", "bam" "bun", "seronok"
]

concat(..)

Ini ialah pendekatan yang paling biasa:

Salin kod Kod adalah seperti berikut:

var c = a.concat( b );
a; // [1,2,3,4,5,6,7,8,9]
b; // ["foo","bar","baz","bam","bun","fun"]
c; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

Seperti yang anda lihat, C ialah tatasusunan serba baharu, mewakili gabungan dua tatasusunan a dan b, menjadikan A dan B tidak berubah. Simple kan?

Tetapi bagaimana jika a mempunyai 10,000 elemen dan b juga mempunyai 10,000 elemen? C akan mempunyai 20,000 elemen, jadi penggunaan memori a dan b akan berganda.

“Tiada masalah!”, anda berkata. Biarkan mereka menjadi sampah dikutip, tetapkan A dan B kepada batal, masalah selesai!

a = b = null; // 'a' dan 'b' dikitar semula

Haha. Untuk tatasusunan kecil dengan hanya beberapa elemen, ini tiada masalah. Tetapi untuk tatasusunan besar, atau dalam sistem dengan memori terhad yang perlu mengulangi proses ini dengan kerap, ia sebenarnya mempunyai banyak ruang untuk penambahbaikan.
Sisipan gelung

Baiklah, mari salin kandungan satu tatasusunan kepada tatasusunan yang lain, menggunakan: Array#push(..)

Salin kod Kod adalah seperti berikut:

// `b` ke `a`
untuk (var i=0; i < b.panjang; i ) {
a.tolak( b[i] );
}
a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]
b = batal;

Kini, tatasusunan a mempunyai kandungan tatasusunan b.

Nampaknya mempunyai jejak ingatan yang lebih baik.

Tetapi bagaimana jika tatasusunan a lebih kecil? Atas sebab ingatan dan kelajuan, anda mungkin mahu meletakkan a yang lebih kecil di hadapan b. Tiada masalah, cuma gantikan push(..) dengan unshift(..):

Salin kod Kod adalah seperti berikut:

// `a` ke dalam `b`:
untuk (var i=a.length-1; i >= 0; i--) {
b.unshift( a[i] );
}
b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

Petua Berfungsi

Namun, gelung for memang hodoh dan sukar diselenggara. Bolehkah kita berbuat lebih baik?

Ini adalah percubaan pertama kami, menggunakan Array#reduce:

Salin kod Kod adalah seperti berikut:

// `b` ke `a`:
a = b.reduce( function(coll,item){
coll.push( item );
pulangkan kol;
}, a );

a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

// atau `a` ke dalam `b`:
b = a.reduceRight( fungsi(coll,item){
coll.unshift(item);
pulangkan kol;
}, b );

b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

Array#reduce(..) dan Array#reduceRight(..) bagus, tetapi ia agak kikuk. Fungsi anak panah ES6=> akan mengurangkan jumlah kod beberapa, tetapi ia masih memerlukan fungsi yang perlu dipanggil sekali untuk setiap elemen, yang tidak sempurna.

Bagaimana pula dengan ini:

Salin kod Kod adalah seperti berikut:

// `b` ke `a`:

a.push.apply( a, b );

a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

// atau `a` ke dalam `b`:

b.unshift.apply( b, a );

b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

Ini jauh lebih baik bukan? Terutama kerana kaedah unshift(..) tidak perlu risau tentang pengisihan terbalik sebelumnya di sini. Operasi span ES6 akan menjadi lebih cantik: a.push( ...b) atau b.unshift( ...a

Had panjang tatasusunan maksimum

Isu utama pertama ialah penggunaan memori telah meningkat dua kali ganda (tentu saja untuk sementara waktu!) dan apa yang dilampirkan pada asasnya ialah menyalin elemen ke tindanan melalui panggilan fungsi. Selain itu, enjin JS yang berbeza mempunyai had pada panjang data yang disalin.

Jadi, jika tatasusunan mempunyai sejuta elemen, anda pasti akan melebihi had timbunan panggilan yang dibenarkan untuk push(...) atau unshift(...). Malangnya, ia akan melakukan kerja yang baik dengan beberapa ribu elemen, tetapi anda perlu berhati-hati untuk tidak melebihi had panjang yang munasabah.

Nota: Anda boleh mencuba splice(...), yang mempunyai masalah yang sama seperti push(...) dan unshift(...).

Ada cara untuk mengelakkan had panjang maksimum ini.

Salin kod Kod adalah seperti berikut:

function combineInto(a,b) {
var len = a.panjang;
untuk (var i=0; i < len; i=i 5000) {
b.unshift.apply( b, a.slice( i, i 5000 ) );
}
}

Tunggu sebentar, kebolehbacaan kami adalah ke belakang. Itu sahaja, mungkin bertambah teruk apabila berubah, haha.