Saya punya dua array JavaScript:
var array1 = ["Vijendra","Singh"];
var array2 = ["Singh", "Shakya"];
Saya ingin hasilnya:
var array3 = ["Vijendra","Singh","Shakya"];
Keluaran array seharusnya kata-kata yang berulang dihapus.
Bagaimana cara menggabungkan dua array dalam JavaScript sehingga saya hanya mendapatkan item unik dari setiap array dalam urutan yang sama ketika mereka dimasukkan ke dalam array asli?
javascript
arrays
merge
Vijjendra
sumber
sumber
Jawaban:
Untuk hanya menggabungkan array (tanpa menghapus duplikat)
Penggunaan versi ES5
Array.concat
:Versi ES6 menggunakan destrukturisasi
Karena tidak ada cara 'bawaan' untuk menghapus duplikat ( ECMA-262 sebenarnya memiliki
Array.forEach
yang akan bagus untuk ini), kita harus melakukannya secara manual:Kemudian, untuk menggunakannya:
Ini juga akan mempertahankan urutan array (yaitu, tidak diperlukan penyortiran).
Karena banyak orang merasa terganggu dengan augmentasi
Array.prototype
danfor in
loop prototipe , berikut ini cara yang kurang invasif untuk menggunakannya:Bagi mereka yang cukup beruntung untuk bekerja dengan browser di mana ES5 tersedia, Anda dapat menggunakan
Object.defineProperty
seperti ini:sumber
[a, b, c]
dan[x, b, d]
jadilah array (anggap kutipan). Concat memberi[a, b, c, x, b, d]
. Bukankah keluaran unik () menjadi[a, c, x, b, d]
. Itu tidak menjaga urutan saya pikir - Saya percaya OP ingin[a, b, c, x, d]
for ... in
denganhasOwnProperty
dalam hal metode prototype baik-baik sajaDengan Underscore.js atau Lo-Dash Anda dapat melakukannya:
http://underscorejs.org/#union
http://lodash.com/docs#union
sumber
underscore.flatten()
, yang lebih baik daripada penyatuan karena dibutuhkan array array.Pertama menggabungkan dua array, berikutnya hanya menyaring item unik:
Edit
Seperti yang disarankan, solusi yang lebih berkinerja baik adalah menyaring item-item unik
b
sebelum bergabung dengana
:sumber
a
untuk menambahkanb
, apakah lebih baik untuk mengulang dan menggunakan push?a.forEach(function(item){ if(a.indexOf(item)<0) a.push(item); });
var c = [...a, ...b.filter(o => !~a.indexOf(o))];
2.var c = [...new Set([...a, ...b])];
☺Ini adalah solusi ECMAScript 6 menggunakan spread operator dan array generics.
Saat ini hanya berfungsi dengan Firefox, dan mungkin Pratinjau Teknis Internet Explorer.
Tetapi jika Anda menggunakan Babel , Anda dapat memilikinya sekarang.
sumber
Array.from
dapat digunakan sebagai ganti spread operator:Array.from(new Set([].concat(...arr)))
ES6
ATAU
ATAU
sumber
union
sama sekali tidak + Contoh 1 meledakkan tumpukan untukArray
s besar + contoh 3 sangat lambat dan menghabiskan banyak memori, karena dua perantaraArray
harus dibangun + contoh 3 hanya dapat digunakan untukunion
dengan yang diketahui jumlahArray
s pada waktu kompilasi.Set
adalah cara untuk pergi ke siniMenggunakan Set (ECMAScript 2015), maka akan sesederhana itu:
sumber
const array3 = [...new Set(array1.concat(array2))]
Ini adalah pandangan yang sedikit berbeda pada loop. Dengan beberapa optimasi dalam versi terbaru Chrome, ini adalah metode tercepat untuk menyelesaikan penyatuan dua array (Chrome 38.0.2111).
http://jsperf.com/merge-two-arrays-keeping-only-unique-values
sementara loop: ~ 589k ops / s
filter: ~ 445k ops / s
lodash: 308k ops / s
untuk loop: 225k ops / s
Sebuah komentar menunjukkan bahwa salah satu variabel setup saya menyebabkan loop saya untuk menarik sisanya, karena tidak perlu menginisialisasi array kosong untuk menulis. Saya setuju dengan itu, jadi saya menulis ulang tes bahkan untuk bidang bermain, dan termasuk pilihan yang lebih cepat.
http://jsperf.com/merge-two-arrays-keeping-only-unique-values/52
Dalam solusi alternatif ini, saya telah menggabungkan solusi array asosiatif satu jawaban untuk menghilangkan
.indexOf()
panggilan dalam loop yang banyak memperlambatnya dengan loop kedua, dan menyertakan beberapa optimasi lain yang disarankan pengguna lain dalam jawaban mereka juga. .Jawaban teratas di sini dengan loop ganda pada setiap nilai (i-1) masih jauh lebih lambat. lodash masih melakukan yang kuat, dan saya masih akan merekomendasikan hal ini kepada siapa pun yang tidak keberatan menambahkan perpustakaan ke proyek mereka. Bagi mereka yang tidak mau, loop sementara saya masih merupakan jawaban yang baik dan jawaban filter memiliki tampilan yang sangat kuat di sini, mengalahkan semua tes saya dengan Canary Chrome terbaru (44.0.2360) pada tulisan ini.
Periksa jawaban Mike dan jawaban Dan Stocker jika Anda ingin meningkatkannya dengan cepat. Itu adalah yang tercepat dari semua hasil setelah melewati hampir semua jawaban yang layak.
sumber
Anda dapat melakukannya hanya dengan ECMAScript 6,
sumber
Array.from(new Set(array1.concat(array2)))
.tsconfig.json
, Anda dapat menambahkan"downlevelIteration": true
untukcompilerOptions
.Fungsi gabungan array yang jauh lebih baik.
sumber
var test = ['a', 'b', 'c']; console.log(test);
akan mencetak["a", "b", "c", merge: function]
Hanya melempar dua sen saya.
Ini adalah metode yang saya gunakan banyak, menggunakan objek sebagai tabel hashlookup untuk melakukan pemeriksaan duplikat. Dengan asumsi bahwa hash adalah O (1), maka ini berjalan di O (n) di mana n adalah a.length + b.length. Jujur saya tidak tahu bagaimana browser melakukan hash, tetapi berkinerja baik pada ribuan titik data.
sumber
String()
fungsi dalam javascript. Yang mungkin bekerja untuk nilai-nilai primitif (meskipun dengan tabrakan antar tipe), tetapi itu tidak cocok untuk array objek.Hanya menghindari loop bersarang (O (n ^ 2)), dan
.indexOf()
(+ O (n)).sumber
Jawaban terbaik yang disederhanakan dan mengubahnya menjadi fungsi yang menyenangkan:
sumber
Mengapa Anda tidak menggunakan objek? Sepertinya Anda mencoba memodelkan set. Namun, ini tidak akan mempertahankan pesanan.
sumber
if (!set1.hasOwnProperty(key))
?Solusi terbaik...
Anda dapat memeriksa langsung di konsol peramban dengan menekan ...
Tanpa duplikat
Dengan duplikat
Jika Anda ingin tanpa duplikat, Anda dapat mencoba solusi yang lebih baik dari sini - Kode Shouting .
Coba di konsol browser Chrome
Keluaran:
sumber
Satu setengah dolar saya:
sumber
Anda dapat mencapainya hanya menggunakan Underscore.js's => uniq :
Ini akan mencetak ["Vijendra", "Singh", "Shakya"] .
sumber
Untuk ES6, hanya satu baris:
sumber
Saya tahu pertanyaan ini bukan tentang berbagai objek, tetapi pencari berakhir di sini.
jadi ada baiknya menambahkan bagi pembaca di masa depan cara penggabungan ES6 yang tepat dan kemudian menghapus duplikat
berbagai objek :
sumber
Implementasi
indexOf
metode untuk browser lain diambil dari MDCsumber
from
parameter btw?indexOf
. Membersihkan kode dengan menghapus bagian komentar. @meder - terima kasih lagi.Solusi baru (yang menggunakan
Array.prototype.indexOf
danArray.prototype.concat
):Pemakaian:
Array.prototype.indexOf (untuk penjelajah internet):
sumber
Itu bisa dilakukan menggunakan Set.
sumber
Ada begitu banyak solusi untuk menggabungkan dua array. Mereka dapat dibagi menjadi dua kategori utama (kecuali penggunaan perpustakaan pihak ke-3 seperti lodash atau underscore.js).
a) menggabungkan dua array dan menghapus item yang digandakan.
b) memfilter item sebelum menggabungkannya.
Gabungkan dua array dan hapus item yang digandakan
Menggabungkan
Menyatukan
Ada banyak cara untuk menyatukan array, saya pribadi menyarankan di bawah dua metode.
Saring item sebelum menggabungkannya
Ada juga banyak cara, tetapi saya pribadi menyarankan kode di bawah ini karena kesederhanaannya.
sumber
sumber
Yang menyenangkan tentang yang satu ini adalah kinerja dan bahwa Anda secara umum, ketika bekerja dengan array, adalah metode chaining seperti filter, peta, dll sehingga Anda dapat menambahkan baris itu dan itu akan menggabungkan dan menduplikat array2 dengan array1 tanpa perlu referensi ke nanti satu (ketika Anda menggunakan metode chaining yang tidak Anda miliki), contoh:
(Saya tidak suka mencemari Array.prototype dan itu akan menjadi satu-satunya cara untuk menghormati rantai - mendefinisikan fungsi baru akan merusaknya - jadi saya pikir sesuatu seperti ini adalah satu-satunya cara untuk mencapainya)
sumber
Anda dapat mencoba ini:
sumber
Pendekatan fungsional dengan ES2015
Mengikuti pendekatan fungsional a
union
dari duaArray
s hanya komposisiconcat
danfilter
. Untuk memberikan kinerja yang optimal, kami menggunakanSet
tipe data asli , yang dioptimalkan untuk pencarian properti.Lagi pula, pertanyaan utama dalam hubungannya dengan
union
fungsi adalah bagaimana memperlakukan duplikat. Permutasi berikut dimungkinkan:Dua permutasi pertama mudah ditangani dengan satu fungsi. Namun, dua yang terakhir lebih rumit, karena Anda tidak dapat memprosesnya selama Anda mengandalkan
Set
pencarian. Karena beralih keObject
pencarian properti lama biasa akan memerlukan kinerja yang serius, implementasi berikut ini hanya mengabaikan permutasi ketiga dan keempat. Anda harus membuat versi terpisahunion
untuk mendukung mereka.Dari sini, sepele untuk mengimplementasikan suatu
unionn
fungsi, yang menerima sejumlah array (terinspirasi oleh komentar naomik):Ternyata
unionn
hanyafoldl
(aliasArray.prototype.reduce
), yangunion
dianggap sebagai peredamnya. Catatan: Karena implementasi tidak menggunakan akumulator tambahan, itu akan menimbulkan kesalahan ketika Anda menerapkannya tanpa argumen.sumber
flip
dannotf
tidak digunakan.unionBy
Rincian implementasi kebocoran juga predikat (memerlukan pengetahuanSet
tipe implisit ). Mungkin menyenangkan jika Anda bisa melakukan sesuatu seperti ini:union = unionBy (apply)
danunionci = unionBy (p => x => p(x.toLowerCase()))
. Dengan cara itu pengguna hanya mengirim apa pun nilai pengelompokannyap
- hanya sebuah ide ^ _ ^zs
deklarasi variabel juga kurangvar
/let
kata kunciuntuk itu ... berikut ini adalah solusi jalur tunggal:
Tidak terlalu mudah dibaca tetapi dapat membantu seseorang:
Set
.Set
array.sort()
Fungsi diterapkan ke array baru.sumber
reduce()
Anda tidak dapat menggunakanArray.from(set)
DeDuplicate single atau Gabungkan dan DeDuplicate input larik ganda. Contoh di bawah ini.
menggunakan ES6 - Set, untuk, perusakan
Saya menulis fungsi sederhana ini yang mengambil beberapa argumen array. Apakah hampir sama dengan solusi di atas itu hanya memiliki kasus penggunaan yang lebih praktis. Fungsi ini tidak menggabungkan nilai duplikat ke satu array saja sehingga dapat menghapusnya di beberapa tahap kemudian.
DEFINISI FUNGSI SINGKAT (hanya 9 baris)
GUNAKAN CONTOH CODEPEN :
sumber
arr.map
disini? Anda menggunakannya sebagaiforeach
, karena hasilnya diabaikansumber
sumber