Metode ekstensi array di ES6

Formulir dikonversi menjadi array nyata

Mari kita bicara tentang skenario penggunaan terlebih dahulu. Di JS, kita perlu mengoperasikan DOM sering, seperti mendapatkan tag input dari semua halaman, dan menemukan elemen tombol tipe, dan kemudian mendaftarkan acara klik untuk tombol ini. Kami dapat melakukan ini;

 var inputObjs = document.getElementsbyTagname ('input'); for (var i = 0; i <inputoBjs.length; i ++) {if (inputObjs [i] .type === 'tombol') {inputObjs [i] .onClick = function () {return;}}}

Jelas tidak ada masalah menulis dengan cara ini, tetapi kita tahu bahwa banyak metode pengoperasian array jauh lebih baik daripada untuk loop, seperti metode foreach ES5 sangat berguna; Tapi bisakah itu digunakan secara langsung? tidak bisa! Karena pengumpulan objek DOM bukan jenis array yang benar -benar array, itu akan menyebabkan kesalahan jika Anda menggunakannya secara langsung;

 var inputObjs = document.getElementsbyTagname ('input'); inputoBjs.foreach (); //inputobjs.foreach bukan fungsi

Meskipun demikian, kami masih bisa menggunakannya. Kami tidak dapat menggunakannya secara langsung atau tidak langsung. Cukup gunakan fungsi peniruan objek JS yang kuat;

 var inputObjs = document.getElementsbyTagname ('input'); console.info (inputObjs); // [] panjang: 0__proto__: htmlcollectionConsole.info ([]. slice.call (inputObjs)); // [] Panjang: 0__proto__: array [0]

Dengan cara ini, setelah mengubahnya menjadi array nyata, Anda dapat memanggil metode array sesuka hati; Metode ini tentu saja layak, tetapi tidak mudah dimengerti dan terlalu "berputar". ES6 memberi kita metode, bentuk yang lebih sederhana dan lebih langsung, yang sangat mudah digunakan:

 var inputObjs = document.getElementsbyTagname ('input'); console.info (inputObjs); // [] Panjang: 0__proto__: htmlCollectionConsole.info (array.from (inputObjs)); // [] Panjang: 0__proto__: array [0]

Hasilnya sama, tetapi lebih tepat secara semantik dan lebih mudah dipahami. Bukankah mudah digunakan? Tentu saja ini tidak cukup. Tidak hanya jenis data dari array kelas dapat dikonversi menjadi array menggunakan metode ini, tetapi efek dari berbagai jenis berbeda. Tesnya adalah sebagai berikut:

 Biarkan str = 'google'; console.log (array.from (str)); // ["g", "o", "o", "o", "g", "l", "e"] biarkan num = 234; console.log (array.from (num)); // [] Misalkan bol = false; console.log (array.from (bol)); Biarkan obj = {foo: 'foo', bar: 'bar'}; console.log (array.from (obj)); // [] Misalkan superobj = {0: 'foo', 1: 'bar', panjang: 2}; console.log (array.from (superobj)); // ["foo", "bar"]

Berikut adalah hasil panggilan metode ini dengan tipe data yang berbeda. Perlu dicatat bahwa string dan beberapa objek khusus dapat dikonversi menjadi array dengan konten. Objek khusus merujuk pada objek yang isinya diatur sesuai dengan pasangan nilai kunci numerik dan memiliki atribut panjang. Objek semacam ini dapat digunakan untuk loop, dan string juga dapat digunakan untuk loop untuk mendapatkan setiap karakter, sehingga bermuara pada satu kalimat. Menggunakan metode From yang dapat menggunakan loop untuk konten output bukanlah array kosong; Di sini saya ingin mengingatkan Anda bahwa teman -teman yang telah menggunakan jQuery dapat memperhatikan struktur apa objek jQuery yang dikembalikan ketika Anda menggunakan pemilih untuk memilih elemen? Bahkan, ini adalah struktur terakhir dalam contoh kami. Untuk detailnya, silakan merujuk ke artikel serial analisis kode sumber jQuery saya.

dari nilai konversi ke array

Ada dua cara untuk membuat array, satu adalah konstruktor:

 Biarkan array (1,2,3);

Lainnya adalah ciptaan literal yang paling umum digunakan:

 Biarkan arr = [1,2,3];

Metode array.of sebenarnya merupakan suplemen untuk metode pertama, dan penggunaannya adalah sebagai berikut:

 console.log (array.of (1,2,3)); // [1,2,3]

Tampaknya memiliki efek yang sama dengan metode konstruksi, jadi mengapa metode ini masih diperlukan? Lihatlah contoh -contoh berikut untuk dipahami:

 console.log (array ()); /// mediaconsole.log(array(1)); //$Definedatakan $console.log(array(1,2)); // [1,2]

Dalam contoh ini, jumlah parameter berbeda dalam makna mereka. Ketika hanya ada satu parameter, parameter mewakili elemen yang diwakili oleh panjangnya. Jika lebih dari 1 parameter, itu akan menyebabkan kebingungan. Namun, tidak memiliki masalah ini dengan metode array.of, karena elemen yang diwakili oleh parameternya selalu diwakili:

 console.log (array.of ()); /// mediaconsole.log(array.of(1)); // media1 mediaconsole.log(array.of(1,2)); // [1,2]

Copywithin Array Penggantian Salin Data Internal

Fungsi utama dari metode copywithin adalah untuk mengganti nilai internal array. Metode ini menerima tiga parameter, menunjukkan posisi start copy, posisi salinan akhir dan posisi penyisipan. Contohnya adalah sebagai berikut:

 [1, 2, 3, 4, 5].copyWithin(0, 3)// [4, 5, 3, 4, 5]// Copy bit 3 to bit 0[1, 2, 3, 4, 5].copyWithin(0, 3, 4)// [4, 2, 3, 4, 5]// -2 is equivalent to bit 3, and -1 is equivalent to bit 4[1, 2, 3, 4, 5].copyWithin(0, -2, -1)// [4, 2, 3, 4, 5]// Copy bit 3 to bit 0[].copyWithin.call({length: 5, 3: 1}, 0, 3)// {0: 1, 3: 1, length: 5}// Copy bit 2 to the end of the array and copy to the 0 bit var i32a = new Int32Array([1, 2, 3, 4, 5]);i32a.copyWithin(0, 2);// Int32Array [3, 4, 5, 4, 5]// For platforms without the copyWithin method of TypedArray // The following writing method is required[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);// Int32Array [4, 2, 3, 4, 5]

Di atas adalah metode ekstensi array dalam ES6 yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!