Berikut adalah artikel sederhana tentang beberapa tips tentang menggunakan array JavaScript. Kami akan menggunakan metode yang berbeda untuk menggabungkan/menggabungkan dua array JS, serta membahas keuntungan/kerugian dari masing -masing metode.
Mari kita pertimbangkan situasi berikut terlebih dahulu:
Salinan kode adalah sebagai berikut:
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var b = ["foo", "bar", "baz", "bam", "bun", "fun"];
Jelas, hasil kombinasi paling sederhana harus:
Salinan kode adalah sebagai berikut:
[
1, 2, 3, 4, 5, 6, 7, 8, 9,
"foo", "bar", "baz", "bam" "bun", "fun"
]
concat (..)
Ini adalah praktik yang paling umum:
Salinan kode adalah sebagai 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", "roti", "menyenangkan"]
Seperti yang Anda lihat, C adalah array baru yang mewakili kombinasi dua array A dan B dan menjaga A dan B invarian. Sederhana?
Tetapi jika A memiliki 10.000 elemen dan B memiliki 10.000 elemen? C akan memiliki 20.000 elemen, sehingga penggunaan memori A dan B akan berlipat ganda.
"Tidak masalah!" Anda berkata. Biarkan mereka dikumpulkan, atur a dan b ke nol, masalahnya terpecahkan!
Salinan kode adalah sebagai berikut:
a = b = null; // 'a' dan 'b' didaur ulang
hehe. Untuk susunan kecil dengan hanya beberapa elemen, ini baik -baik saja. Tetapi untuk array besar, atau sistem dengan memori terbatas, proses ini perlu diulang sering, sebenarnya memiliki banyak perbaikan.
Penyisipan Loop
Oke, mari kita salin konten satu array ke yang lain, menggunakan: array#push (..)
Salinan kode adalah sebagai berikut:
// `b` ke` a`
untuk (var i = 0; i <b.length; i ++) {
A.push (b [i]);
}
A; // [1,2,3,4,5,6,7,8,9, "foo", "bar", "baz", "bam", "roti", "menyenangkan"]
b = null;
Sekarang, array A memiliki isi array b.
Tampaknya ada jejak memori yang lebih baik.
Tapi bagaimana jika array A lebih kecil? Untuk alasan memori dan kecepatan, Anda mungkin ingin menempatkan A yang lebih kecil di depan B,. Tidak masalah, ubah saja dorong (..) menjadi unshift (..):
Salinan kode adalah sebagai berikut:
// `a` ke` 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", "roti", "menyenangkan"]
Keterampilan fungsional
Namun, loop untuk memang jelek dan sulit dipertahankan. Bisakah kita melakukan yang lebih baik?
Ini adalah upaya pertama kami, menggunakan array#redukir:
Salinan kode adalah sebagai berikut:
// `b` ke` a`:
a = b.reduce (function (coll, item) {
coll.push (item);
return coll;
}, A );
A; // [1,2,3,4,5,6,7,8,9, "foo", "bar", "baz", "bam", "roti", "menyenangkan"]
// atau `a` ke` b`:
b = a.reduceright (function (coll, item) {
coll.unshift (item);
return coll;
}, B );
B; // [1,2,3,4,5,6,7,8,9, "foo", "bar", "baz", "bam", "roti", "menyenangkan"]
Array#redukir (..) dan array#reduceright (..) bagus, tetapi mereka sedikit canggung. Fungsi panah ES6 => akan mengurangi jumlah kode, tetapi masih membutuhkan fungsi, dan setiap elemen perlu dipanggil sekali, yang tidak sempurna.
Jadi bagaimana dengan ini:
Salinan kode adalah sebagai berikut:
// `b` ke` a`:
A.push.Apply (a, b);
A; // [1,2,3,4,5,6,7,8,9, "foo", "bar", "baz", "bam", "roti", "menyenangkan"]
// atau `a` ke` b`:
B.unshift.Apply (B, A);
B; // [1,2,3,4,5,6,7,8,9, "foo", "bar", "baz", "bam", "roti", "menyenangkan"]
Apakah ini tempat yang jauh lebih baik? Terutama karena metode unshift (..) tidak perlu khawatir tentang penyortiran terbalik sebelumnya di sini. Operasi pidato ES6 akan lebih indah: a.push (... b) atau b.unshift (... a
Batas panjang maksimum untuk array
Masalah utama pertama adalah bahwa penggunaan memori ganda (hanya sementara tentu saja!) Pada dasarnya adalah menyalin elemen ke dalam tumpukan melalui panggilan fungsi. Selain itu, mesin JS yang berbeda memiliki batasan pada panjang data salinan.
Jadi, jika array memiliki sejuta elemen, Anda pasti akan berada di luar batas yang dorong (...) atau tidak menghindari (...) memungkinkan tumpukan panggilan. Sayangnya, itu akan melakukan pekerjaan yang baik dalam menangani ribuan elemen, tetapi Anda harus berhati -hati untuk tidak melebihi batas panjang yang wajar.
Catatan: Anda dapat mencoba splice (...), yang memiliki masalah ini seperti push (...) dan unshift (...).
Ada cara untuk menghindari batas panjang maksimum ini.
Salinan kode adalah sebagai berikut:
fungsi gabungan (a, b) {
var len = a.length;
untuk (var i = 0; i <len; i = i+5000) {
b.unshift.Apply (b, a.slice (i, i+5000));
}
}
Tunggu, keterbacaan kami telah mundur. Itu saja, mungkin menjadi lebih buruk dan lebih buruk, haha.