Rumah > hujung hadapan web > tutorial js > Kebenaran 'Hole': Memahami Tatasusunan Jarang JavaScript dan Gelagat Tidak Dijangka

Kebenaran 'Hole': Memahami Tatasusunan Jarang JavaScript dan Gelagat Tidak Dijangka

Barbara Streisand
Lepaskan: 2025-01-13 08:45:43
asal
448 orang telah melayarinya

The

Saya baru-baru ini meneliti kemahiran Struktur Data dan Algoritma saya, khususnya, menyusun algoritma; dan saya mendapati diri saya berada dalam situasi yang menarik.

Bagaimanakah saya boleh mencipta tatasusunan rawak panjang n nilai untuk menguji algoritma pengisihan saya? Anda mungkin mengatakan itu mudah, dan ia benar-benar mudah. Dalam kepala anda, anda mungkin terfikir sesuatu seperti ini:

function randomArray(n) {
    const arrToReturn = [];

    for (let i = 0; i < n; i++) {
        arrToReturn.push(Math.floor(Math.random() * 10));
    }
    return arrToReturn;
}

Salin selepas log masuk

Ini pasti berfungsi seperti yang dimaksudkan. Tetapi saya sedang mencari sesuatu yang lebih mudah. Sebaiknya satu pelapik. Nah, pemikiran pertama yang terlintas di fikiran ialah menggunakan Array() baharu.

const randomArray = (n) => new Array(n).map(() => Math.floor(Math.random() * 10));

console.log(randomArray(5))
Salin selepas log masuk

Apa yang anda jangkakan ini akan dilog?

Nah, saya menjangkakan ini akan mencatatkan tatasusunan 5 nilai rawak. Jika anda tidak, maka bersorak! Anda tahu apa yang saya akan bincangkan :)

Saya terkejut, ia tidak berlaku. Ia log ini dalam Nod 20:
[ <5 item kosong> ]

Hmmm ... Membingungkan!

Menariknya, console.log(randomArray(5).length) log 5.

Jadi, mengapa ini berlaku? Baiklah, mari kita bincangkan tentang Tatasusunan Jarang dalam Javascript!

Susunan Jarang

Tatasusunan jarang ialah tatasusunan yang mengandungi satu atau lebih slot kosong. Contohnya:

new Array(2)
// [<2 empty items>]

[1, , , 3]
// [1, <2 empty items>, 3]
Salin selepas log masuk

Jadi, bagaimana ini berfungsi?

Nah, apabila anda mencipta tatasusunan dalam JS dengan Tatasusunan(5) baharu, ia mencipta tatasusunan dengan 5 slot yang tidak dimulakan. Ini bermakna ia tidak mengandungi apa-apa; bukan null, bukan undefined.

Baiklah, saya faham! Tetapi bolehkah anda menghubungi .map pada "slot" itu?

Nah, apabila anda memanggil kaedah lelaran seperti forEach, map, reduce, dan filter, dsb... pada tatasusunan yang jarang, slot kosong ini dilangkau.

Jom kita lihat semula fungsi randomArray kami.

const randomArray = (n) => new Array(n).map(() => Math.floor(Math.random() * 10));
Salin selepas log masuk

Kami mencipta tatasusunan panjang n dengan Tatasusunan(n) baharu yang mengembalikan tatasusunan jarang [<5 item kosong>]. Kemudian kami memanggil peta pada tatasusunan itu. Oleh kerana semua slot kosong, mereka semua melangkau. Oleh itu, keputusan yang kami dapat!

Mengapakah memanggil .length pada tatasusunan jarang mengembalikan nilai?

Ini disebabkan oleh cara kaedah tatasusunan .length dilaksanakan dalam JS. Untuk mendapatkan nilai panjang, kami mengambil indeks terbesar dan hanya menambah 1. Dan memandangkan tatasusunan jarang diindeks, kami akan mendapat nilai panjang seperti yang diharapkan. Anda boleh membaca lebih lanjut di sini.

Mari betulkan fungsi buggy randomArray kami di atas

Memandangkan tatasusunan jarang mengandungi slot kosong atau tidak dimulakan, oleh itu, tidak boleh diubah, kami boleh membetulkannya dengan mengisi slot ini dengan beberapa nilai. Kita boleh mencapainya dengan menggunakan kaedah tatasusunan .fill:

const randomArray = (n) => new Array(n).fill().map(() => Math.floor(Math.random() * 10));

console.log(randomArray(5))
Salin selepas log masuk

Dan sekarang, kami bersedia untuk pergi!

Atas ialah kandungan terperinci Kebenaran 'Hole': Memahami Tatasusunan Jarang JavaScript dan Gelagat Tidak Dijangka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan