短路在JavaScript中是如何工作的?

在 JavaScript 中,理解真实和虚假的值是编写高效简洁代码的基础。结合短路的概念,开发人员可以编写优雅的解决方案来应对常见的编程挑战。

在本实践指南中,我们将探讨真实值和虚假值,并了解 JavaScript 中短路的机制。

您可以从这里获取所有源代码。

(本文内容参考:java567.com)

目录

  • 了解真实和虚假的价值观
  • 什么是 JavaScript 中的短路?
  • 实际使用案例
  • 结论

了解真实和虚假的价值观

在 JavaScript 中,在布尔上下文中计算时,每个值都具有固有的布尔解释。计算结果为 的值被认为是真实的,而评估结果为 的值是虚假的。true``false

让我们来看看一些例子:

// Truthy Values
if ('Hello') {
    console.log('Truthy!'); // Output: Truthy!
}

if (42) {
    console.log('Truthy!'); // Output: Truthy!
}

if (['apple', 'banana']) {
    console.log('Truthy!'); // Output: Truthy!
}

// Falsy Values
if ('') {
    console.log('Falsy!'); // This code block is not executed
}

if (0) {
    console.log('Falsy!'); // This code block is not executed
}

if (null) {
    console.log('Falsy!'); // This code block is not executed
}

以下是上述代码的细分:

真实价值观

  • 'Hello':JavaScript 中的任何非空字符串都被认为是真实的。在这种情况下,字符串为非空,因此条件的计算结果为 true。'Hello'
  • 42:任何非零数(正数或负数)都被认为是真实的。由于是非零数,因此条件的计算结果为 true。42
  • ['apple', 'banana']:JavaScript 中的数组被认为是真实的,无论其内容如何。由于数组为非空,因此条件的计算结果为 true。['apple', 'banana']

虚假的价值观

''(空字符串):JavaScript 中的空字符串被认为是虚假的。因此,条件的计算结果为 false,并且不会执行 if 语句中的代码块。

0:数字零在 JavaScript 中被认为是假的。因此,条件的计算结果为 false,并且不会执行 if 语句中的代码块。

null:null 值在 JavaScript 中被认为是虚假的。因此,条件的计算结果为 false,并且不会执行 if 语句中的代码块。

在 JavaScript 中,除 、 、 (空字符串)、 和 之外的值被认为是真实的。在 JavaScript 中编写条件语句和逻辑运算时,理解这些真值和假值至关重要。false``0``''``null``undefined``NaN

理解真值和假值至关重要,因为它们在条件语句和逻辑运算中起着重要作用。

什么是 JavaScript 中的短路?

短路是逻辑运算符 (, ) 表现出的一种行为,如果结果可以通过单独计算第一个操作数来确定,则跳过对第二个操作数的计算。&&``||

让我们通过实际示例来检查短路的工作原理:

运算符&&

运算符返回第一个假操作数,如果所有操作数都为真,则返回最后一个真实操作数。&&

const value = 0;
const result = value && 'Truthy Value';
console.log(result); // Output: 0

在此示例中,计算结果为 ,这是一个虚假值。由于第一个操作数是假的,因此表达式短路,结果是 。value``0``0

const value = 'Hello';
const result = value && 'Truthy Value';
console.log(result); // Output: Truthy Value

在这里,计算结果为一个非空字符串,这是真实的。因此,返回第二个操作数,因为它是最后一个真实操作数。value``'Truthy Value'

运算符||

运算符返回第一个真实操作数,如果所有操作数都是假操作数,则返回最后一个假操作数。||

const name = '';
const displayName = name || 'Guest';
console.log(displayName); // Output: Guest

在此示例中,计算结果为空字符串,该字符串是假的。因此,表达式短路,并分配给 。name``'Guest'``displayName

const name = 'Alice';
const displayName = name || 'Guest';
console.log(displayName); // Output: Alice

在这里,计算结果为一个非空字符串,这是真实的。因此,将返回第一个操作数,因为它是遇到的第一个真实操作数。name``'Alice'

实际使用案例

提供默认值

短路通常用于为变量提供默认值。

const options = {};
const limit = options.limit || 10;
console.log(limit); // Output: 10 (default value)

在此示例中,是一个空对象。该代码打算根据属性为其分配一个值。但是,由于未定义(未定义),因此使用逻辑 OR () 运算符。options``limit``options.limit``options.limit``||

逻辑 OR 运算符返回第一个操作数的值(如果为真)。如果第一个操作数是假的(在本例中为 undefined),则返回第二个操作数(在本例中为 )的值,该值充当默认值。options.limit``10

因此,将被分配值,因为是假的(未定义)。limit``10``options.limit

安全访问嵌套属性

短路还可用于安全地访问对象的嵌套属性。

const user = { address: { city: 'New York' } };
const city = user.address && user.address.city;
console.log(city); // Output: New York

在此示例中,是一个对象,其中包含另一个对象,该对象包含该属性。user``address``city

该表达式正在利用短路。它检查是否存在,如果存在,则进一步检查是否存在。user.address && user.address.city``user.address``user.address.city

如果是真实的(如果存在),JavaScript 会继续计算 。如果是虚假的(如果它是未定义或 null),则 JavaScript 会使计算短路,并且不会继续计算。user.address``user.address.city``user.address``user.address.city

这样可以防止未定义或为 null 的潜在。TypeError``user.address

由于在这种情况下存在,因此表达式的计算结果为 ,即 。user.address``user.address.city``'New York'

此技术可确保安全访问嵌套属性,并有助于避免在对象未按预期完全填充或结构化的情况下出现运行时错误。

结论

短路可以大大增强您的开发工作流程。

您可以在项目中练习这些概念,以熟练有效地利用 JavaScript 的短路行为。

(本文内容参考:java567.com)

posted @ 2024-02-14 16:40  晓风晓浪  阅读(19)  评论(0编辑  收藏  举报