Memahami Operator Penggabungan Nullish JavaScript (??)

Nollish Coalescing Operator (??) ialah ciri dalam JavaScript yang diperkenalkan dalam ECMAScript 2020. Menggunakan operator ini, anda boleh mengendalikan nilai lalai untuk pembolehubah yang mungkin batal atau tidak ditentukan.

Sebelum pengenalannya, operator OR logik (||) biasanya digunakan untuk tujuan ini, tetapi ia tidak selalunya sesuai kerana ia mengendalikan semua nilai palsu. ke?? operator menyediakan alternatif yang lebih tepat dan lebih jelas.

Dalam artikel ini, anda akan mempelajari konsep Nullish Coalescing Operator, kelebihannya, cara menggunakannya dan beberapa contoh.

Mari kita terjun terus ke dalamnya!?

Apakah itu Nullish Coalescing Operator (??)?

Pengendali penggabungan batal (??) ialah pengendali logik, yang digunakan untuk menyemak sama ada nilai adalah batal atau tidak ditentukan.

Jika operan sebelah kirinya adalah batal atau tidak ditentukan, maka ia mengembalikan operan sebelah kanannya (nilai sandaran).

Jika operan sebelah kirinya tidak batal atau tidak ditentukan, maka ia mengembalikan operan sebelah kiri.

Contohnya:

let userInput = null;
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: default

Dalam contoh ini, userInput adalah batal, jadi ?? operator mengembalikan nilai sandaran 'lalai'.

Sekarang, anda mungkin berfikir bagaimana ia berbeza daripada logik ATAU || pengendali??

Ini berbeza daripada logik ATAU || pengendali, kerana || operator mengembalikan operan sebelah kanan jika operan kiri ialah sebarang nilai palsu (seperti false, 0, '', NaN, dsb.), bukan sahaja batal atau tidak ditentukan. Manakala?? operator hanya menumpukan pada null atau undefined.

Mengapa menggunakan operator Nullish Coalescing (??) dan bukannya operator Logical OR (||)?

The ?? operator hanya menumpukan pada nilai null dan undefined, manakala || pengendali menyemak semua nilai palsu (seperti palsu, 0, '', NaN, dll.), yang boleh membawa kepada hasil yang tidak dijangka.

Contohnya:

let obj = {};
let value = obj.age ?? 'default value';
console.log(value); // Output: default value

Dalam contoh ini, umur tidak ditentukan dalam objek, jadi ?? operator mengembalikan nilai sandaran 'nilai lalai'.

Sekarang, mari kita ambil contoh lain untuk memahami perkara ini dengan lebih baik.

let userInput = '';
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: <empty string>

Dalam contoh ini, userInput ialah rentetan kosong, yang merupakan nilai palsu dan bukan null atau undefined, jadi ?? operator mengembalikan .

Sekarang mari lihat apa yang berlaku jika anda menggunakan || bukannya ??.

let userInput = '';
let inputValue = userInput || 'default';
console.log(inputValue); // Output: default

Di sini, || operator mengembalikan lalai, kerana ia menyemak sebarang nilai palsu.

Sebab lain untuk menggunakan ?? bukannya || pengendali adalah kebolehbacaan.

Kod menggunakan ?? umumnya lebih jelas dan lebih mudah dibaca kerana tujuannya dikaitkan secara langsung dengan pengendalian null dan undefined. Ia memberikan nilai sandaran apabila pembolehubah adalah nol atau tidak ditentukan, menjadikan kod lebih mudah dibaca dan kurang terdedah kepada ralat.

Pengendali batal ?? dengan operator logik DAN/ATAU

Anda juga boleh menggunakan ?? operator dengan operator logik lain untuk menyemak berbilang syarat.

Contohnya:

let userInput = null;
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: default

Dalam contoh ini, inputValue mendapat nilai 'lalai' kerana operan kiri (userInput) adalah batal.

Sekarang mari kita lihat apa yang berlaku jika userInput bukan batal.

let obj = {};
let value = obj.age ?? 'default value';
console.log(value); // Output: default value

Aduh!! Ini menimbulkan ralat??

Tetapi kenapa ini berlaku??

Ini berlaku kerana Nullish Coalescing Operator (??) tidak boleh digunakan secara langsung dalam operator logik seperti || ATAU dan && DAN tanpa kurungan yang betul di sekelilingnya.

Sebabnya ialah JavaScript mempunyai peraturan khusus untuk keutamaan pengendali, yang merujuk kepada tahap keutamaan pengendali yang berbeza, yang bermaksud susunan operasi dinilai.

Contohnya: ?? mempunyai keutamaan yang lebih rendah daripada || dan &&, jadi meletakkannya di dalam kurungan memastikan ia dinilai terlebih dahulu dalam ungkapan logik.

Jadi cara penggunaan yang betul ?? terus dengan pengendali logik:

let userInput = '';
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: <empty string>

Di sini, tanda kurung memaksa JavaScript untuk menilai ?? operasi dahulu, dan selepas itu hasilnya digunakan dalam operasi logik ATAU dengan 'alternatif'.

Kesimpulan

Dalam JavaScript, Nullish Coalescing Operator (??) menyediakan cara yang lebih jelas dan konsisten untuk mengendalikan nilai lalai untuk null dan undefined. Ia mengelakkan perangkap || operator dengan tidak mengembalikan nilai palsu yang tidak diingini. Menggunakan Nullish Coalescing Operator (??) boleh menjadikan kod anda lebih bersih, lebih mudah dibaca dan kurang terdedah kepada ralat, terutamanya apabila ia berkaitan dengan nilai pilihan. Memahami dan menggunakan Nullish Coalescing Operator (??) boleh membawa kepada kod yang lebih cekap dan boleh diselenggara.

Itu sahaja untuk hari ini.

Saya harap ia membantu.

Terima kasih kerana membaca.

Berikut ialah 45 Lagi Petua & Trik JavaScript untuk Pembangun.

Untuk lebih banyak kandungan seperti ini, klik di sini.

Ikuti saya di X(Twitter) untuk petua pembangunan web harian.

Teruskan Pengekodan!!

Lihat toast.log, sambungan penyemak imbas yang membolehkan anda melihat ralat, amaran dan log semasa ia berlaku di tapak anda - tanpa perlu membuka konsol penyemak imbas. Klik di sini untuk mendapatkan diskaun 25% untuk toast.log.

Atas ialah kandungan terperinci Memahami Operator Penggabungan Nullish JavaScript (??). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!