ECMAScript 6 tidak lama lagi akan membawakan kepada kita pratonton kemahiran operasi tatasusunan baru method_javascript

Artikel ini memperkenalkan kaedah operasi tatasusunan baharu yang akan dibawakan oleh ECMAScript 6 kepada kami, dan cara menggunakan ciri tatasusunan baharu ini dalam penyemak imbas sedia ada.

Nota: Saya akan menggunakan istilah pembina dan kelas secara bergantian.

Kaedah kelas
Kaedah yang dimiliki oleh Array sendiri.

Array.from(arrayLike, mapFunc?, thisArg?)

Fungsi asas Array.from() adalah untuk menukar dua jenis objek kepada tatasusunan.

Objek seperti tatasusunan

Benda jenis ini mempunyai sifat panjang dan indeks. Hasil pengendali DOM tergolong dalam kelas ini, seperti document.getElementsByClassName().

Objek boleh lelar

Apabila objek jenis ini mengambil nilai, ia hanya boleh mengambil satu elemen pada satu masa. Tatasusunan boleh diubah, sama seperti struktur tatasusunan baharu dalam ECMAScript, Peta dan Set.

Kod berikut ialah contoh menukar objek seperti tatasusunan kepada tatasusunan:

Salin kod Kod adalah seperti berikut:

biarkan lis = document.querySelectorAll('ul.fancy li');
Array.from(lis).forEach(function (li) {
console.log(nod);
});

Hasil querySelectorAll() bukan tatasusunan, dan tiada kaedah forEach(). Inilah sebabnya mengapa kita perlu menukarnya kepada tatasusunan sebelum menggunakan kaedah ini.

Gunakan Pemetaan melalui Array.from()
Array.from() juga merupakan alternatif untuk menggunakan map() dengan generik.

Salin kod Kod adalah seperti berikut:

biarkan span = document.querySelectorAll('span.name');
// map(), secara umum:
biarkan nama1 = Array.prototype.map.call(spans, s => s.textContent);
// Array.from():
biarkan nama2 = Array.from(spans, s => s.textContent);

Parameter kedua dalam kedua-dua kaedah ialah fungsi anak panah.
Dalam contoh ini, hasil document.querySelectorAll() ialah objek seperti tatasusunan, bukan tatasusunan. Inilah sebabnya kami tidak boleh memanggil map() secara langsung. Dalam contoh pertama, untuk menggunakan forEach(), kami menukar objek seperti tatasusunan kepada tatasusunan. Di sini kami menggunakan kaedah generik dan versi dua parameter Array.from(), menghapuskan langkah perantaraan.

Lubang
Array.from() mengabaikan unsur yang hilang - lubang - dalam tatasusunan dan menganggapnya sebagai unsur yang tidak ditentukan.

Salin kod Kod adalah seperti berikut:

> Array.from([0,,2])
[ 0, undefined, 2 ]

Ini bermakna anda boleh menggunakan Array.from() untuk mencipta atau mengisi tatasusunan:

Salin kod Kod adalah seperti berikut:

> Array.from(new Array(5), () => 'a')
[ 'a', 'a', 'a', 'a', 'a' ]
> Array.from(New Array(5), (x,i) => i)
[ 0, 1, 2, 3, 4 ]

Jika anda ingin mengisi tatasusunan dengan nilai tetap, maka Array.prototype.fill() (lihat di bawah) akan menjadi pilihan yang lebih baik. Yang pertama ialah dua cara contoh di atas.

dari()
dalam subkelas Array Kes penggunaan lain untuk Array.from() adalah untuk menukar objek seperti tatasusunan atau objek boleh lelar kepada contoh subkelas tatasusunan (Array). Jika anda mencipta subkelas Array MyArray dan ingin menukar objek sedemikian kepada contoh MyArray, anda boleh menggunakan MyArray.from(). Sebab ini boleh digunakan ialah pembina diwarisi dalam ECMAScript 6 (pembina kelas induk ialah prototaip pembina subkelasnya).

Salin kod Kod adalah seperti berikut:

kelas MyArray memanjangkan Array {
...
}
biarkan instanceOfMyArray = MyArray.from(anIterable);

Anda boleh menggabungkan fungsi ini dengan pemetaan dan melengkapkan operasi peta di tempat di mana anda mengawal pembina hasil:

Salin kod Kod adalah seperti berikut:

// from() – tentukan pembina hasil melalui penerima
// (dalam kes ini, MyArray)
biarkan instanceOfMyArray = MyArray.from([1, 2, 3], x => x * x);
// map(): hasilnya sentiasa merupakan contoh Array
biarkan instanceOfArray = [1, 2, 3].map(x => x * x);
Tatasusunan(...item)

Jika anda ingin menukar satu set nilai ke dalam tatasusunan, anda harus menggunakan tatasusunan literal. Terutama apabila terdapat hanya satu nilai dan ia adalah nombor, pembina tatasusunan akan gagal. Sila rujuk halaman ini untuk maklumat lanjut.

Salin kod Kod adalah seperti berikut:

> Tatasusunan baharu(3, 11, 8)
[ 3, 11, 8 ]
> Tatasusunan baharu(3)
[ , , ,]
> Tatasusunan baharu(3.1)
RangeError: Panjang tatasusunan tidak sah

Apakah yang perlu kita lakukan jika kita ingin menukar satu set nilai ke dalam contoh sub-pembina angka? Ini ialah nilai Array.of() (ingat, subconstructor tatasusunan mewarisi semua kaedah tatasusunan, termasuk of() sudah tentu).

Salin kod Kod adalah seperti berikut:

kelas MyArray memanjangkan Array {
...
}
console.log(MyArray.of(3, 11, 8) instanceof MyArray); // true
console.log(MyArray.of(3).length === 1); // true

Array.of() akan menjadi sangat mudah untuk membungkus dan menyarangkan nilai dalam tatasusunan, tanpa kaedah pemprosesan pelik seperti Array(). Tetapi juga perhatikan Array.prototype.map(), terdapat perangkap di sini:

Salin kod Kod adalah seperti 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'].map(x => [x]) // terbaik (dalam kes ini)
[ [ 'a' ], [ 'b' ] ]

Seperti yang anda lihat, map() akan menghantar tiga parameter kepada panggilan baliknya. Dua yang terakhir sering diabaikan (perincian).

Kaedah prototaip
Banyak kaedah baharu akan tersedia untuk contoh tatasusunan.

Lelaran pada tatasusunan

Kaedah berikut akan membantu melengkapkan lelaran dalam tatasusunan:

Salin kod Kod adalah seperti berikut:

Array.prototype.entry()
Array.prototype.keys()
Array.prototype.values()

Setiap kaedah di atas akan mengembalikan rentetan nilai, tetapi bukan sebagai tatasusunan. Mereka akan dipaparkan satu demi satu melalui iterator. Mari lihat contoh (saya akan menggunakan Array.from() untuk meletakkan kandungan iterator dalam tatasusunan):

Salin kod Kod adalah seperti berikut:

> Array.from([ 'a', 'b' ].keys())
[ 0, 1 ]
> Array.from([ 'a', 'b' ].values())
[ 'a', 'b' ]
> Array.from([ 'a', 'b' ].entry())
[ [ 0, 'a' ],
[ 1, 'b' ] ]

Anda boleh menggabungkan entri() dengan gelung for-of dalam ECMAScript 6 untuk menguraikan objek yang diulang menjadi pasangan nilai kunci dengan mudah:

Salin kod Kod adalah seperti berikut:

untuk (biar [indeks, elem] daripada ['a', 'b'].entri()) {
console.log(index, elem);
}

Nota: Kod ini sudah boleh dijalankan dalam penyemak imbas Firefox terkini. t Firefox.

Cari elemen tatasusunan

Array.prototype.find(predikat, thisArg?) akan mengembalikan elemen pertama yang memenuhi fungsi panggil balik. Jika tiada unsur yang memenuhi syarat, ia kembali tidak ditentukan. Contohnya:

Salin kod Kod adalah seperti berikut:

> [6, -5, 8].cari(x => x < 0)
-5
> [6, 5, 8].cari(x => x < 0)
tidak ditentukan
Array.prototype.findIndex(predikat, thisArg?)

akan mengembalikan indeks elemen pertama yang memenuhi fungsi panggil balik. Jika tiada unsur yang memuaskan ditemui, -1 dikembalikan. Contohnya:

Salin kod Kod adalah seperti berikut:

> [6, -5, 8].cariIndex(x => x < 0)
1
> [6, 5, 8].cariIndex(x => x < 0)
-1

Kedua-dua kaedah find* akan mengabaikan lubang, iaitu, mereka tidak akan memberi perhatian kepada elemen yang tidak ditentukan. Tandatangan fungsi penyiapan panggilan balik ialah:

predikat(elemen, indeks, tatasusunan)
Cari NaN

melalui findIndex()

Array.prototype.indexOf() mempunyai had yang terkenal, iaitu, ia tidak dapat mencari NaN. Kerana ia menggunakan identiti (===) untuk mencari elemen padanan:

Salin kod Kod adalah seperti berikut:

> [NaN].indexOf(NaN)
-1

Menggunakan findIndex(), anda boleh menggunakan Object.is(), yang tidak akan menyebabkan masalah seperti itu:

Salin kod Kod adalah seperti berikut:

> [NaN].findIndex(y => Object.is(NaN, y))
0

Anda juga boleh mengambil pendekatan yang lebih umum dan mencipta fungsi pembantu elemIs():

Salin kod Kod adalah seperti berikut:

> fungsi elemIs(x) { return Object.is.bind(Object, x) }
> [NaN].findIndex(elemIs(NaN))
0
Array.prototype.fill(nilai, mula?, tamat?)

Isi tatasusunan dengan nilai yang diberikan:

Salin kod Kod adalah seperti berikut:

> ['a', 'b', 'c'].isi(7)
[ 7, 7, 7 ]

Lubang tidak akan menerima sebarang rawatan istimewa:

Salin kod Kod adalah seperti berikut:

> Array(3) baharu.isi(7)
[ 7, 7, 7 ]

Anda juga boleh mengehadkan permulaan dan akhir pengisian anda:

Salin kod Kod adalah seperti berikut:

> ['a', 'b', 'c'].isi(7, 1, 2)
[ 'a', 7, 'c' ]

Bilakah saya boleh menggunakan kaedah tatasusunan baharu?
Beberapa kaedah sudah tersedia dalam penyemak imbas.