Membuka kunci JavaScript: Logik OR (||) vs Nullish Coalescing Operator (??)

pengenalan

JavaScript, sebagai salah satu bahasa pengaturcaraan yang paling popular, menyediakan pembangun dengan pelbagai operator untuk mengendalikan pelbagai operasi logik. Antaranya, pengendali Logical OR (||) dan Nullish Coalescing (??) ialah alat asas untuk mengurus nilai lalai dan mengendalikan nilai batal. Artikel ini akan menyelidiki perbezaan antara kedua-dua pengendali ini, kes penggunaannya dan contoh praktikal yang kompleks untuk menggambarkan penggunaannya.

Memahami Operator Logik ATAU (||).

Pengendali Logik OR (||) dalam JavaScript digunakan secara meluas untuk mengembalikan nilai kebenaran pertama antara operannya atau nilai terakhir jika tiada nilai kebenaran. Ia digunakan terutamanya untuk menetapkan nilai lalai.

Sintaks

result = operand1 || operand2;

Bagaimana ia Berfungsi

|| operator menilai dari kiri ke kanan, mengembalikan operan pertama jika ia benar; jika tidak, ia menilai dan mengembalikan operan kedua.

Contoh 1: Menetapkan Nilai Lalai

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput || defaultText;
console.log(message); // Output: 'Hello, World!'

Dalam contoh ini, userInput ialah rentetan kosong (palsu), jadi defaultText dikembalikan.

Contoh 2: Mengendalikan Pelbagai Nilai

let firstName = null;
let lastName = 'Doe';

let name = firstName || lastName || 'Anonymous';
console.log(name); // Output: 'Doe'

Di sini, FirstName adalah batal (falsy), jadi LastName dikembalikan kerana ia adalah benar.

Had Operator Logik ATAU (||).

Had utama || operator ialah ia menganggap beberapa nilai sebagai palsu, seperti 0, NaN, '', false, null, dan undefined. Ini boleh membawa kepada hasil yang tidak dijangka apabila nilai ini bertujuan untuk sah.

Memperkenalkan Operator Nullish Coalescing (??).

Pengendali Nullish Coalescing (??) ialah tambahan terbaru kepada JavaScript, yang diperkenalkan pada ES2020. Ia direka bentuk untuk mengendalikan kes di mana null atau undefined secara eksplisit dimaksudkan sebagai satu-satunya nilai batal yang dipertimbangkan.

Sintaks

result = operand1 ?? operand2;

Bagaimana ia Berfungsi

The ?? operator mengembalikan operan kanan apabila operan kiri adalah batal atau tidak ditentukan. Jika tidak, ia mengembalikan operan sebelah kiri.

Contoh 1: Menetapkan Nilai Lalai

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput ?? defaultText;
console.log(message); // Output: ''

Dalam contoh ini, userInput ialah rentetan kosong, yang bukan nol atau tidak ditentukan, jadi ia dikembalikan.

Contoh 2: Mengendalikan Nilai Batal

let firstName = null;
let lastName = 'Doe';

let name = firstName ?? lastName ?? 'Anonymous';
console.log(name); // Output: 'Doe'

Di sini, firstName adalah batal, jadi lastName dikembalikan kerana ia bukan null atau undefined.

Membandingkan Operator Logik OR (||) dan Nullish Coalescing (??).

Contoh 1: Membandingkan Nilai Palsu

let value1 = 0;
let value2 = '';

let resultOR = value1 || 'default';
let resultNullish = value1 ?? 'default';

console.log(resultOR); // Output: 'default'
console.log(resultNullish); // Output: 0

Dalam contoh ini, 0 dianggap palsu oleh || pengendali tetapi adalah nilai yang sah untuk ?? pengendali.

Contoh 2: Menggunakan Kedua-dua Operator Bersama

let userInput = null;
let fallbackText = 'Default Text';

let message = (userInput ?? fallbackText) || 'Fallback Message';
console.log(message); // Output: 'Default Text'

Di sini, userInput adalah batal, jadi fallbackText digunakan oleh ?? pengendali. Kemudian hasilnya disemak oleh || operator, tetapi kerana fallbackText adalah benar, ia dikembalikan.

Contoh Kompleks Operator Logik OR (||) dan Nullish Coalescing (??).

Contoh 3: Operasi Bersarang dengan Objek

Pertimbangkan senario di mana anda perlu menetapkan nilai lalai untuk sifat objek bersarang.

let userSettings = {
  theme: {
    color: '',
    font: null
  }
};

let defaultSettings = {
  theme: {
    color: 'blue',
    font: 'Arial'
  }
};

let themeColor = userSettings.theme.color || defaultSettings.theme.color;
let themeFont = userSettings.theme.font ?? defaultSettings.theme.font;

console.log(themeColor); // Output: 'blue'
console.log(themeFont); // Output: 'Arial'

Dalam contoh ini, userSettings.theme.color ialah rentetan kosong, jadi defaultSettings.theme.color digunakan. userSettings.theme.font adalah batal, jadi defaultSettings.theme.font digunakan.

Contoh 4: Parameter Fungsi dengan Lalai

Apabila berurusan dengan parameter fungsi, anda mungkin mahu memberikan nilai lalai untuk argumen yang hilang.

function greet(name, greeting) {
  name = name ?? 'Guest';
  greeting = greeting || 'Hello';

  console.log(`${greeting}, ${name}!`);
}

greet(); // Output: 'Hello, Guest!'
greet('Alice'); // Output: 'Hello, Alice!'
greet('Bob', 'Hi'); // Output: 'Hi, Bob!'
greet(null, 'Hey'); // Output: 'Hey, Guest!'

Dalam contoh ini, parameter nama menggunakan ?? operator untuk menetapkan nilai lalai 'Tetamu' jika nama adalah batal atau tidak ditentukan. Parameter ucapan menggunakan || pengendali untuk menetapkan nilai lalai 'Hello' jika sapaan adalah sebarang nilai palsu selain batal atau tidak ditentukan.

Contoh 5: Menggabungkan dengan Rantaian Pilihan

Perantaian pilihan (?.) boleh digabungkan dengan || dan?? untuk mengendalikan sifat objek bersarang dalam dengan selamat.

let user = {
  profile: {
    name: 'John Doe'
  }
};

let userName = user?.profile?.name || 'Anonymous';
let userEmail = user?.contact?.email ?? 'No Email Provided';

console.log(userName); // Output: 'John Doe'
console.log(userEmail); // Output: 'No Email Provided'

Dalam contoh ini, rantaian pilihan memastikan bahawa jika mana-mana bahagian laluan sifat tidak wujud, ia mengembalikan yang tidak ditentukan, menghalang ralat. || dan?? operator kemudian memberikan nilai lalai yang sesuai.

Amalan Terbaik dan Kes Penggunaan

1. Gunakan || untuk Lalai Luas:

   • Apabila anda perlu memberikan nilai lalai untuk julat keadaan palsu (cth., rentetan kosong, 0, NaN).

2. Gunakan ?? untuk Pemeriksaan Nullish Tepat:

   • Apabila anda secara khusus ingin mengendalikan null atau undefined tanpa menjejaskan nilai palsu yang lain.

3. Menggabungkan Kedua-duanya:

   • Gunakan gabungan || dan?? untuk senario kompleks di mana anda perlu mengendalikan kedua-dua nilai kebenaran/palsu dan nilai batal dengan jelas.

Soalan Lazim

Apakah yang dilakukan oleh operator Logik OR (||)?
Operator Logik OR (||) mengembalikan nilai kebenaran pertama di antara operannya atau operan terakhir jika tiada yang benar.

Bilakah saya harus menggunakan pengendali Nullish Coalescing (??)?
Gunakan operator Nullish Coalescing (??) apabila anda perlu mengendalikan null atau undefined secara khusus tanpa menganggap nilai palsu lain seperti 0 atau rentetan kosong sebagai batal.

Bolehkah saya menggunakan kedua-dua operator bersama-sama?
Ya, anda boleh menggunakan kedua-duanya || dan?? bersama-sama untuk mengendalikan pelbagai jenis nilai dan memastikan logik kod anda merangkumi pelbagai kes dengan berkesan.

Bagaimana || mengendalikan rentetan kosong?
|| operator menganggap rentetan kosong sebagai palsu, jadi ia akan mengembalikan operan seterusnya jika rentetan pertama ialah rentetan kosong.

Adakah pengendali Nullish Coalescing (??) disokong dalam semua penyemak imbas?
yang?? operator disokong dalam pelayar moden dan persekitaran yang menyokong ES2020. Untuk persekitaran yang lebih lama, anda mungkin perlu menggunakan transpiler seperti Babel.

Apakah perbezaan antara || dan?? pengendali?
Perbezaan utama ialah || menganggap beberapa nilai sebagai palsu (cth., 0, '', palsu), manakala ?? hanya menganggap null dan undefined sebagai nilai nullish.

Kesimpulan

Memahami perbezaan antara operator Logical OR (||) dan Nullish Coalescing (??) dalam JavaScript adalah penting untuk menulis kod yang mantap dan bebas pepijat. || operator bagus untuk senario lalai yang luas, manakala ?? adalah sempurna untuk mengendalikan nilai batal dengan ketepatan. Dengan menggunakan operator ini dengan sewajarnya, anda boleh memastikan kod anda mengendalikan pelbagai keadaan data dengan berkesan, memberikan pengalaman pengguna yang lancar.

Atas ialah kandungan terperinci Membuka kunci JavaScript: Logik OR (||) vs Nullish Coalescing Operator (??). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!