Artikel ini memperkenalkan ecmascript 6 akan membawa kita metode operasi array baru dan cara menerapkan fitur array baru ini di browser yang ada.
Catatan: Saya akan menggunakan istilah konstruktor dan kelas secara bergantian.
Metode kelas
Metode yang dimiliki array itu sendiri.
Array.from (seperti array, mapfunc?, Thisarg?)
Fungsi dasar array.from () adalah untuk mengubah dua jenis objek menjadi array.
Objek seperti array
Kelas objek ini memiliki sifat panjang dan indeks. Hasil operator DOM milik kelas ini, seperti Document.GetElementsByClassName ().
Objek iterable
Saat mengambil nilai, hanya satu elemen yang dapat diambil pada satu waktu. Array dapat berulang, seperti struktur array baru, peta (peta) dan set (set) dalam ecmascript.
Kode berikut adalah contoh mengubah objek array menjadi array:
Salinan kode adalah sebagai berikut:
Biarkan lis = document.queryselectorall ('ul.fancy li');
Array.from (lis) .foreach (function (li) {
console.log (node);
});
Hasil QuerySelectorAll () bukan array, dan tidak akan ada metode foreach (). Inilah sebabnya mengapa kita perlu mengonversi metode ini menjadi array sebelum menggunakannya.
Menggunakan pemetaan melalui array.from ()
Array.from () juga merupakan alternatif generik menggunakan peta ().
Salinan kode adalah sebagai berikut:
let spans = document.queryselectorall ('span.name');
// peta (), umumnya:
Biarkan nama1 = array.prototype.map.call (spans, s => s.textcontent);
// array.from ():
Biarkan nama2 = array.from (spans, s => s.textcontent);
Parameter kedua dalam dua metode adalah fungsi panah.
Dalam contoh ini, hasil dari dokumen.QuerySelectorAll () adalah objek array kelas lain, bukan array. Inilah sebabnya kami tidak dapat memanggil peta () secara langsung. Dalam contoh pertama, untuk menggunakan foreach (), kami mengubah objek array kelas menjadi array. Di sini kami menghilangkan langkah-langkah perantara melalui metode generik dan versi dua parameter array.from ().
Lubang
Array.from () mengabaikan elemen yang hilang - lubang di array, yang akan diperlakukan sebagai elemen yang tidak ditentukan.
Salinan kode adalah sebagai berikut:
> Array.from ([0 ,, 2])
[0, tidak terdefinisi, 2]
Ini berarti Anda dapat menggunakan array.from () untuk membuat atau mengisi array:
Salinan kode adalah sebagai berikut:
> Array.from (array baru (5), () => 'a')
['a', 'a', 'a', 'a', 'a', 'a']
> Array.from (array baru (5), (x, i) => i)
[0, 1, 2, 3, 4]
Jika Anda ingin mengisi array dengan nilai tetap, maka array.prototype.fill () (lihat di bawah) akan menjadi pilihan yang lebih baik. Yang pertama adalah dua metode dari contoh di atas.
dari () dalam subkelas array (array)
Skenario penggunaan lain untuk array.from () adalah untuk mengonversi instance objek array atau objek yang dapat diulang ke subkelas array. Jika Anda membuat array subclass myArray dan ingin mengubah jenis objek ini menjadi contoh myArray, Anda dapat menggunakan myarray.from (). Alasan mengapa hal ini dapat digunakan adalah bahwa dalam Ecmascript 6 konstruktor akan mewarisi (konstruktor kelas induk adalah prototipe konstruktor subkelasnya).
Salinan kode adalah sebagai berikut:
kelas myarray memperluas array {
...
}
Biarkan instanceOfMyArray = myArray.from (aniterable);
Anda dapat menggabungkan fungsi ini dengan pemetaan untuk menyelesaikan operasi peta di mana Anda mengontrol konstruktor hasil:
Salinan kode adalah sebagai berikut:
// dari () Tentukan konstruktor hasil melalui penerima
// (dalam hal ini, myarray)
Biarkan instanceOfMyArray = myArray.from ([1, 2, 3], x => x * x);
// peta (): Hasilnya selalu merupakan instance dari array
Biarkan instanceOfArray = [1, 2, 3] .map (x => x * x);
Array.of (... item)
Jika Anda ingin mengubah satu set nilai menjadi array, Anda harus menggunakan teks sumber array (array literal). Terutama ketika hanya ada satu nilai dan itu adalah angka, konstruktor array akan mogok. Untuk informasi lebih lanjut, silakan merujuk ke.
Salinan kode adalah sebagai berikut:
> Array Baru (3, 11, 8)
[3, 11, 8]
> Array Baru (3)
[,,,]
> Array Baru (3.1)
RangeError: panjang array yang tidak valid
Jadi jika kita ingin mengubah serangkaian nilai menjadi contoh sub-konstruktor, apa yang harus kita lakukan? Ini adalah nilai array.of () (ingat, subkonstruktur array akan mewarisi semua metode array, termasuk () tentu saja).
Salinan kode adalah sebagai berikut:
kelas myarray memperluas array {
...
}
Console.log (myarray.of (3, 11, 8) Contoh dari myarray); // BENAR
console.log (myarray.of (3) .length === 1); // BENAR
Array.of () akan cukup nyaman untuk membungkus nilai dalam array, tanpa cara aneh menangani array (). Tetapi juga perhatikan array.prototype.map (), ada lubang di sini:
Salinan kode adalah sebagai berikut:
> ['a', 'b']. peta (array.of)
[['a', 0, ['a', 'b']],
['b', 1, ['a', 'b']]]
> ['a', 'b']. map (x => array.of (x)) // lebih baik
[['a'], ['b']]
> ['a', 'b']. peta (x => [x]) // terbaik (dalam hal ini)
[['a'], ['b']]
Seperti yang Anda lihat, MAP () akan melewati tiga parameter ke dalam panggilan baliknya. Dua yang terakhir sering diabaikan (detail).
Metode prototipe
Ada banyak metode baru yang tersedia untuk contoh array.
Iterasi lebih dari array
Metode berikut akan membantu menyelesaikan iterasi dalam array:
Salinan kode adalah sebagai berikut:
Array.prototype.entries ()
Array.prototype.keys ()
Array.prototype.values ()
Masing -masing metode di atas mengembalikan serangkaian nilai, tetapi tidak akan dikembalikan sebagai array. Mereka akan ditampilkan satu per satu melalui iterator. Mari kita lihat contoh (saya akan meletakkan isi iterator dalam array menggunakan array.from ()):
Salinan kode adalah sebagai berikut:
> Array.from (['a', 'b'] .keys ())
[0, 1]
> Array.from (['a', 'b'] .values ())
['a', 'b']
> Array.from (['a', 'b'] .entries ())
[[0, 'a'],
[1, 'b']]
Anda dapat menggabungkan entri () dan untuk loop dalam ecmascript 6 untuk dengan mudah membongkar objek berulang menjadi pasangan nilai kunci:
Salinan kode adalah sebagai berikut:
untuk (biarkan [indeks, elem] dari ['a', 'b']. entri ()) {
console.log (indeks, elem);
}
Catatan: Kode ini sudah dapat dijalankan di browser Firefox terbaru. T firefox.
Temukan elemen array
Array.prototype.find (predikat, thisarg?) Mengembalikan elemen pertama yang memenuhi fungsi callback. Jika tidak ada elemen yang memenuhi kondisinya, ia kembali tidak ditentukan. Misalnya:
Salinan kode adalah sebagai berikut:
> [6, -5, 8] .find (x => x <0)
-5
> [6, 5, 8] .find (x => x <0)
belum diartikan
Array.prototype.findindex (predikat, thisarg?)
Mengembalikan indeks elemen pertama yang memenuhi fungsi callback. Jika tidak ada elemen yang memuaskan, -1 dikembalikan. Misalnya:
Salinan kode adalah sebagai berikut:
> [6, -5, 8] .findIndex (x => x <0)
1
> [6, 5, 8] .findIndex (x => x <0)
-1
Keduanya menemukan* metode mengabaikan lubang, yaitu, mereka tidak memperhatikan elemen yang tidak ditentukan. Tanda Tangan Fungsi Penyelesaian dari Callback adalah:
Predikat (elemen, indeks, array)
Temukan Nan via FindIndex ()
Array.prototype.indexof () memiliki batasan yang terkenal, yaitu, tidak dapat menemukan NANS. Karena menggunakan identitas (===) untuk menemukan elemen yang cocok:
Salinan kode adalah sebagai berikut:
> [Nan] .indexof (nan)
-1
Menggunakan findIndex (), Anda dapat menggunakan objek.is (), yang tidak akan menyebabkan masalah seperti itu:
Salinan kode adalah sebagai berikut:
> [Nan] .findIndex (y => object.is (nan, y))
0
Anda juga dapat menggunakan cara yang lebih umum untuk membuat fungsi helper elemis ():
Salinan kode adalah sebagai berikut:
> fungsi elemis (x) {return object.is.bind (objek, x)}
> [Nan] .findindex (elemis (nan))
0
Array.prototype.fill (value, start?, End?)
Gunakan nilai yang diberikan untuk mengisi array:
Salinan kode adalah sebagai berikut:
> ['A', 'B', 'C']. Isi (7)
[7, 7, 7]
Lubang tidak akan diobati dengan perlakuan khusus apa pun:
Salinan kode adalah sebagai berikut:
> Array Baru (3) .Fill (7)
[7, 7, 7]
Anda juga dapat membatasi awal dan akhir pengisian Anda:
Salinan kode adalah sebagai berikut:
> ['A', 'B', 'C']. Isi (7, 1, 2)
['A', 7, 'C']
Kapan saya bisa menggunakan metode array baru?
Ada beberapa metode yang dapat digunakan di browser.