Rumah > hujung hadapan web > tutorial js > Jangan Keliru?? dengan || dalam JavaScript: Inilah Perbezaannya!

Jangan Keliru?? dengan || dalam JavaScript: Inilah Perbezaannya!

DDD
Lepaskan: 2024-10-25 04:27:29
asal
371 orang telah melayarinya

Don’t Confuse ?? with || in JavaScript: Here’s How They Differ!

?? lwn || dalam JavaScript: Perbezaan Yang Sedikit Diketahui

pengenalan

JavaScript menyediakan beberapa cara untuk mengendalikan nilai yang tidak ditentukan atau nol dalam kod. Dua operator biasa yang digunakan untuk tujuan ini ialah pengendali penggabungan batal (??) dan operator ATAU logik (||). Walaupun pengendali ini mungkin kelihatan serupa pada pandangan pertama, tingkah laku mereka boleh berbeza dengan ketara dalam situasi tertentu. Memahami perbezaan antara kedua-dua operator ini adalah penting, terutamanya bagi pemula yang ingin menulis kod yang lebih tepat dan bebas pepijat.

Dalam panduan ini, kita akan meneroka perbezaan antara ?? dan || dalam JavaScript, pecahkan langkah demi langkah dengan contoh supaya anda boleh beralih dari sifar kepada wira dalam masa yang singkat.

Apakah Pengendali Gabungan Nullish (??)?

Pengendali penggabungan yang batal ?? digunakan untuk memberikan nilai sandaran apabila berurusan dengan null atau undefined. Ia hanya menyemak sama ada nilai itu batal atau tidak ditentukan—dan jika ya, ia mengembalikan nilai sandaran yang diberikan.

Sintaks:

let result = value ?? fallbackValue;
Salin selepas log masuk
Salin selepas log masuk

Dalam ungkapan ini, jika nilai sama ada batal atau tidak ditentukan, fallbackValue akan dikembalikan.

Contoh 1: Menggunakan Nullish Coalescing Operator (??)

let name = null;
let defaultName = name ?? 'John Doe';

console.log(defaultName); // Output: 'John Doe'
Salin selepas log masuk
Salin selepas log masuk

Dalam contoh ini, nama adalah null, jadi defaultName diberikan 'John Doe' sebagai sandaran.

Perkara Utama:

  • ?? menyemak sama ada batal atau tidak ditentukan.
  • Ia mengembalikan nilai di sebelah kiri jika ia BUKAN batal atau tidak ditentukan, jika tidak, ia mengembalikan sandaran di sebelah kanan.

Apakah Operator Logik ATAU (||)?

Pengendali OR logik || ialah operator lain yang digunakan untuk nilai sandaran, tetapi ia berfungsi secara berbeza. Ia menyemak sama ada bahagian sebelah kiri ungkapan ialah nilai palsu. Dalam JavaScript, nilai palsu termasuk null, undefined, false, 0, NaN dan '' (rentetan kosong).

Sintaks:

let result = value || fallbackValue;
Salin selepas log masuk
Salin selepas log masuk

Jika nilai palsu, fallbackValue akan dikembalikan.

Contoh 2: Menggunakan Operator Logik ATAU (||)

let age = 0;
let defaultAge = age || 18;

console.log(defaultAge); // Output: 18
Salin selepas log masuk
Salin selepas log masuk

Dalam kes ini, umur ialah 0, iaitu nilai palsu, jadi defaultAge ditetapkan 18.

Perkara Utama:

  • || menyemak sebarang nilai palsu.
  • Jika nilai di sebelah kiri palsu, ia mengembalikan nilai sandaran di sebelah kanan.

Perbezaan Utama Antara ?? dan ||

Pada pandangan pertama, ?? dan || mungkin kelihatan mempunyai tujuan yang sama—menyediakan nilai sandaran—tetapi terdapat perbezaan penting:

  • The ?? operator hanya menyemak sama ada null atau undefined.
  • || pengendali menyemak sebarang nilai palsu.

Perbezaan halus ini menjadi penting apabila anda berurusan dengan nilai palsu tetapi sah seperti 0, '' atau palsu.

Contoh 3: ?? lwn || dengan Nilai Palsu

let result = value ?? fallbackValue;
Salin selepas log masuk
Salin selepas log masuk

Di sini, kiraan ialah 0, iaitu nilai yang sah tetapi palsu dalam JavaScript.

  • Menggunakan ??, defaultCount1 mengekalkan 0, kerana 0 bukanlah batal atau tidak ditentukan.
  • Menggunakan ||, defaultCount2 menjadi 10, kerana 0 ialah nilai palsu.

Bilakah Anda Perlu Menggunakan?? atau ||

Pilihan antara ?? dan || bergantung pada tingkah laku khusus yang anda mahukan.

guna?? bila:

  • Anda mahu mengendalikan nilai null atau undefined secara khusus, tanpa menjejaskan nilai palsu seperti 0, palsu atau ''.
  • Anda perlu mengekalkan nilai palsu yang sah, seperti 0 (kiraan yang sah) atau '' (rentetan kosong yang sah).

Contoh:

let name = null;
let defaultName = name ?? 'John Doe';

console.log(defaultName); // Output: 'John Doe'
Salin selepas log masuk
Salin selepas log masuk

Dalam contoh ini, rentetan kosong '' ialah input pengguna yang sah, jadi ?? membolehkannya melepasi tanpa menggantikannya dengan sandaran.

Gunakan || bila:

  • Anda mahu menganggap semua nilai palsu (seperti 0, palsu, NaN, '' dan tidak ditentukan) sebagai memerlukan nilai sandaran.
  • Anda boleh menggantikan nilai seperti 0 atau palsu.

Contoh:

let result = value || fallbackValue;
Salin selepas log masuk
Salin selepas log masuk

Di sini, palsu dianggap sebagai palsu dan sandaran 'Tidak dilog masuk' digunakan.

Perangkap Biasa dan Cara Mengelakkannya

Sekarang anda tahu perbezaannya, mari lihat beberapa kesilapan biasa yang sering dilakukan oleh pemula dan cara mengelakkannya.

Kesilapan 1: Menggunakan || untuk Nilai Palsu Sah

let age = 0;
let defaultAge = age || 18;

console.log(defaultAge); // Output: 18
Salin selepas log masuk
Salin selepas log masuk

Masalah: Anda mahu memaparkan 0 sebagai skor, tetapi || menggantikannya dengan 'Tiada markah' kerana 0 adalah palsu.

Penyelesaian: Gunakan ?? untuk membenarkan 0 melalui.

let count = 0;
let defaultCount1 = count ?? 10; // Using nullish coalescing
let defaultCount2 = count || 10; // Using logical OR

console.log(defaultCount1); // Output: 0
console.log(defaultCount2); // Output: 10
Salin selepas log masuk

Kesilapan 2: Salah Faham Nullish Coalescing

let userInput = '';
let fallbackInput = userInput ?? 'default input';

console.log(fallbackInput); // Output: ''
Salin selepas log masuk

Penjelasan: userPreference adalah batal, jadi fallback false digunakan. Ini adalah kelakuan yang betul untuk ??.

Soalan Lazim

Boleh Guna?? dan || bersama?

Ya, anda boleh menggunakan kedua-dua pengendali dalam bahagian yang berbeza dalam ungkapan yang sama jika perlu.

Contoh:

let isLoggedIn = false;
let loginStatus = isLoggedIn || 'Not logged in';

console.log(loginStatus); // Output: 'Not logged in'
Salin selepas log masuk

Ini pertama kali menyemak untuk menggunakan null atau undefined ?? dan kemudian semak nilai palsu lain menggunakan ||.

Adakah Operator Penggabungan Nullish Disokong dalam Semua Pelayar?

The ?? operator disokong dalam penyemak imbas moden, tetapi untuk persekitaran yang lebih lama, anda mungkin perlu menggunakan transpiler seperti Babel.

Apakah Kes Penggunaan untuk Setiap Operator?

  • Gunakan ?? apabila anda secara khusus mengambil berat tentang null atau undefined.
  • Gunakan || apabila anda mahu mengendalikan sebarang nilai palsu.

Adakah?? Bekerja dengan Nilai Palsu Lain?

Tidak, ?? hanya menyemak untuk null dan undefined, bukan untuk nilai palsu lain seperti false, 0 atau ''.

Kesimpulan

Memahami perbezaan antara ?? dan || dalam JavaScript adalah penting untuk menulis kod yang mantap dan bebas ralat. Walaupun kedua-dua pengendali membantu dalam menyediakan nilai sandaran, tingkah laku mereka berbeza apabila melibatkan pengendalian nilai palsu. guna?? apabila anda perlu menyemak sama ada null atau undefined, dan gunakan || apabila anda ingin menyemak sebarang nilai palsu.

Dengan menguasai pengendali ini, anda akan dapat menulis kod yang lebih fleksibel dan tepat yang berkelakuan tepat seperti yang dimaksudkan.

Atas ialah kandungan terperinci Jangan Keliru?? dengan || dalam JavaScript: Inilah Perbezaannya!. 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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan