Teknik Penggunaan Lanjutan untuk Fungsi Split dan Bergabung dalam JavaScript

JavaScript memiliki dua fungsi yang cukup kuat dan populer di kalangan pengembang: Split dan bergabung. Kedua fungsi ini dapat menukar jenis string dan array, yaitu, array dapat diserialisasi menjadi string, dan sebaliknya. Kami dapat sepenuhnya memainkan dua fungsi ini. Mari kita jelajahi beberapa aplikasi menarik di sini. Pertama, mari kita perkenalkan dua fungsi ini:

String.prototype.split (pemisah, batas)

Pemisah membagi string menjadi array, dan batas parameter opsional mendefinisikan panjang maksimum dari array yang dihasilkan.

 "85 @@ 86 @@ 53" .split ('@@'); // ['85', '86', '53']; "pisang" .split (); //["pisang"]; // (terima kasih Peter (-:) "Presiden, Senat, DPR" .split (',', 2); // ["Presiden", "Senat"] array.prototype.join (pemisah)

Pemisah parameter opsional mengubah array menjadi string. Jika pemisah tidak disediakan, maka koma akan digunakan sebagai nilai parameter (seperti fungsi ToString dari array).

 ["siput", "siput", "ekor anjing anak anjing"]. Bergabunglah ('dan'); // "siput dan siput dan ekor anjing anak anjing" ['raksasa', 4, 'rangers', 1] .noin (''); // "Giants 4 Rangers 1" [1962.1989.2002.2010] .join ();

Berikut beberapa aplikasi:

Replaceall

Fungsi sederhana ini tidak seperti fungsi penggantian asli, dapat diganti sebagai substring global tanpa menggunakan ekspresi reguler.

 String.prototype.replaceall = function (find, replacewith) {return this.split (find) .join (replacewith); } "The Man and the Plan" .replaceall ('the', 'a'); // "seorang pria dan rencana"

Untuk string kecil, ini sedikit lebih lemah dari fungsi asli yang digantikan oleh satu karakter (di sini mengacu pada dua fungsi tambahan dari ekspresi reguler), tetapi di bawah Mozilla, jika karakter melebihi 2 atau 3 karakter, fungsi penggunaan ini berjalan lebih cepat daripada ekspresi reguler.

Kejadian

Fungsi ini bisa membuat jumlah substring cocok. Selain itu, fungsi semacam ini sangat langsung dan tidak memerlukan keteraturan.

 String.prototype.ocCurences = function (find, matchCase) {var text = this; Matchcase || (find = find.tolowercase (), text = text.tolowercase ()); return text.split (find) .length-1; } document.body.innerhtml.occurences ("div"); // Halaman Beranda Google memiliki 114Document.Body.InnerHTML.occurences ("/div"); // Google Home Page memiliki 57 "Inggris melibatkan insinyurnya" .Occurrences ("Eng", True); // 2repeat

Fungsi ini dipinjam dari prototipe.js:

 String.prototype.repeat = function (Times) {return new Array (Times+1) .join (this); } "go" .repeat (3) + "Giants!"; // "Pergi pergi Giants!"

Keindahannya terletak pada penggunaan fungsi gabungan. Fokusnya adalah pada nilai parameter pemisah ini, dan kemudian array dasar ini hanya berisi beberapa nilai nilai yang tidak ditentukan. Untuk mengilustrasikan ini dengan lebih jelas, mari kita buat ulang contoh di atas:

 [tidak terdefinisi, tidak terdefinisi, tidak terdefinisi, tidak terdefinisi] .join ("go") + "raksasa

Ingatlah bahwa sebelum bergabung, setiap elemen array akan dikonversi ke string (berikut adalah string kosong). Penerapan fungsi pengulangan ini adalah salah satu dari sedikit aplikasi yang tidak layak yang mendefinisikan array melalui array literal.

Gunakan parameter batas

Saya jarang menggunakan parameter opsional batas dari fungsi split. Berikut adalah contoh menggunakan batas ini:

 var getDomain = function (url) {return url.split ('/', 3) .join ('/');} getDomain ("http://www.aneventapart.com/2010/seattle/slides/"); // "http: //www.anev entapart.com "getDomain (" https://addons.mozilla.org/en-us/firefox/bookmarks/ "); //" https://addons.mozilla.org "

Memodifikasi anggota numerik

Jika kita mencampur pelanggan tetap bersama, bergabung dan berpisah dapat dengan mudah memodifikasi anggota array. Namun, fungsi ini tidak sesulit yang dibayangkan. Fungsi utamanya adalah menghapus string yang ditentukan di depan setiap anggota array yang diberikan.

 var seheadMembers = function (arr, Removestr) {var regex = regexp ("[,]?" + Removestr); return arr.join (). split (regex) .slice (1);} // membuat array hanya berisi bagian numerik dari nomor penerbangan yang menjadi anggota (["BA015", "BA129", "BA130"]; // ["015", "129", "130"]

Sayangnya, fungsi ini gagal dalam IE karena mereka secara keliru menghapus anggota kosong pertama dari Split. Sekarang mari kita perbaiki fungsi ini:

 var seheadMembers = function (arr, Removestr) {var regex = regexp ("[,]?" + Removestr); var result = arr.join (). split (regex); Hasil pengembalian [0] && hasil || result.slice (1); // IE solusi}

Mengapa kita menggunakan teknik ini alih -alih fungsi peta array di Emascript 5?

 ["BA015", "BA129", "BA130"]. Map (Function (E) {return e.replace ('ba', '')}); // ["015", "129", "130"]

Dalam penggunaan aktual, jika layak, saya biasanya menggunakan fungsi peta asli (tidak tersedia di bawah ini yaitu <9). Contoh berikut hanya digunakan sebagai alat pembelajaran, tetapi perlu dicatat bahwa sintaks panggilan dari gabungan dan split lebih ringkas dan langsung. Yang paling menarik, ini juga sangat efisien, terutama untuk array kecil, yang lebih efisien dalam FF dan Safari. Untuk array besar, fungsi peta lebih cocok. (Di semua browser), akan ada lebih sedikit panggilan fungsi untuk bergabung dan membagi fungsi.

 // Tes 1-Menggunakan gabungan/splitvar arr = [], x = 1000; while (x--) {arr.push ("ba" + x);} var seheadmembers = function (arr, regex) {return arr.join (). split (regex) .slice (1);} var rEpEx = RegExp (regex) .slice (1);} var rEpEx = RegExp ("; 1000; while (y--) {seheadmembers (arr, regex);}; +tanggal baru-timer; // ff 3.6 733ms // ch 7 464ms // sa 5 701ms // yaitu 8 1256ms // uji 2-menggunakan peta asli function arr = [], x = 1000; while (x-x-x--) {"{" {"{" x-" Tanggal, y = 1000; while (y--) {arr.map (function (e) {return e.replace ('ba', '')});}+Tanggal baru-timer; // ff 3.6 2051ms // cr 7 732ms // sf 5 1520ms // IE 8 (tidak didukung)

Pencocokan pola

Array perlu terus melakukan pencocokan pola, tetapi string tidak. Ekspresi reguler dapat digunakan dalam string, tetapi tidak dalam array. Kekuatan mengubah array menjadi string untuk pencocokan pola jauh di luar ruang lingkup artikel ini. Mari kita lihat aplikasi sederhana.

Asumsikan bahwa hasil balapan perlombaan perlu disimpan ke array. Tujuannya adalah untuk menempatkan para kontestan dan waktu rekaman mereka secara bergantian dalam sebuah array. Kami dapat menggunakan ekspresi bergabung dan reguler untuk memverifikasi apakah pola penyimpanan ini benar. Kode berikut adalah untuk mengetahui waktu catatan yang terlewat dengan mencari dua nama berturut -turut.

 var result = ['sunil', '23: 09 ',' bob ', '22: 09', 'carlos', 'mary', '22: 59 ']; var baddata = results.join (', '). cocok (/[a-za-z]+, [a-za-z]+/g); badda; // ["Carlos, Mary"]