分享18个用于处理 null、NaN 和undefined 的 JS 代码片段

简介: Null、NaN 和 undefined 是程序员在使用 JavaScript 时遇到的常见值。有效处理这些值对于确保代码的稳定性和可靠性至关重要。

前言


Null、NaN 和 undefined 是程序员在使用 JavaScript 时遇到的常见值。


有效处理这些值对于确保代码的稳定性和可靠性至关重要。


因此,在今天这篇文章中,我们将探讨 18 个 JavaScript 代码片段,它们为处理 null、NaN 和未定义场景提供了便捷的解决方案。


这些代码片段将帮助你通过有效处理这些值来编写更清晰、更优雅的代码。


内容


📟 1. 检查是否为null:

要检查变量是否为 null,可以使用严格相等运算符 (===) 将其直接与 null 进行比较:


if (variable === null) {
  // Code to handle null value
}


📟 2. 检查undefined:


同样,你可以使用 typeof 运算符检查变量是否为undefined:


if (typeof variable === 'undefined') {
  // Code to handle undefined value
}


📟 3. 检查 NaN:

要检查值是否为 NaN(非数字),可以使用 isNaN() 函数:


if (isNaN(value)) { // Code to handle NaN value}


📟 4. 如果为 null 或undefined则默认为某个值:


如果变量为 null 或undefined,您可以使用逻辑 OR 运算符 (||) 提供默认值:


const result = variable || defaultValue;


📟 5. 如果为 NaN,则默认为一个值:


如果值为 NaN,您可以使用 isNaN() 函数以及逻辑 OR 运算符来提供默认值:


const result = isNaN(value) ? defaultValue : value;


📟 6. 将 null 或 undefined 转换为空字符串:


要将 null 或undefined的值转换为空字符串,可以使用逻辑 OR 运算符和空字符串:


const result = variable || '';


📟 7. 将 null 或 undefined 转换为零:


如果需要将 null 或 undefined 转换为零,可以使用逻辑 OR 运算符和数字零:


const result = variable || 0;


📟 8. 将 null 或 undefined 转换为默认对象:


要将 null 或 undefined 转换为默认对象,可以将逻辑 OR 运算符与空对象文字结合使用:


const result = variable || {};


📟 9. 检查变量是否为 null 或undefined:


您可以使用逻辑 OR 运算符组合 null 和未定义检查:


if (variable === null || typeof variable === 'undefined') {
  // Code to handle null or undefined value
}


📟 10. 检查值是否为 null、undefined或 NaN:


将 null、未定义和 NaN 检查与逻辑 OR 运算符结合起来:


if (variable === null || typeof variable === 'undefined' || isNaN(variable)) {
  // Code to handle null, undefined, or NaN value
}


📟 11. unll或undefined的短路评估:


如果变量为 null 或undefined,请使用逻辑 AND 运算符 (&&) 执行短路计算:


const result = variable && someFunction();


📟 12. 使用 NaN 进行短路评估:


如果值为 NaN,则可以使用逻辑 AND 运算符进行短路评估:


const result = !isNaN(value) && someFunction();


📟 13. 可选链接:


为了避免在访问可能为 null 或未定义的对象的属性时出现错误,您可以使用可选链接运算符 (?.):


const result = object?.property;


📟14. 空合并运算符:


空值合并运算符 (??) 提供了一种简洁的方法来为 null 或未定义的变量提供默认值:


const result = variable ?? defaultValue;


📟 15. 将 null 或 undefined 转换为布尔值:


要将 null 或 undefined 转换为布尔值,可以使用逻辑 NOT 运算符 (!):


const result = !!variable;


📟 16. 将 NaN 转换为布尔值:

要将 NaN 转换为布尔值,可以使用 isNaN() 函数和逻辑 NOT 运算符:


const result = !isNaN(value);


📟 17. 处理函数参数中的 null 或 undefined:


您可以使用默认参数值来处理函数参数中的 null 或undefined:


function myFunction(param = defaultValue) {
  // Code that uses the parameter
}


📟 18. 从数组中删除 null 或undefined的值:


要从数组中删除 null 或undefined的值,可以使用 filter() 方法:


const newArray = originalArray.filter((value) => value !== null && typeof value !== 'undefined');


结论:

以上就是我今天与您分享的18 个 JavaScript 代码片段,希望这些代码片段对您有用,因为,这些代码片段可以帮助您有效地处理代码中的 null、NaN 和undefined的使用场景。


这些代码片段,无论您需要检查这些值、提供默认值还是将它们转换为不同的类型,它们都将帮助您编写更清晰、更优雅的 JavaScript 代码。


最后,感谢您的阅读,祝编程愉快!


相关文章
|
2月前
|
JavaScript 前端开发
JavaScript如何判断变量undefined
JavaScript如何判断变量undefined
|
2月前
|
机器学习/深度学习 JavaScript 前端开发
JavaScript typeof, null, 和 undefined
JavaScript typeof, null, 和 undefined
53 4
|
3月前
|
JavaScript Java 虚拟化
JS代码片段
本文档详细规定了Java编程中的排版、命名及注释规范。排版方面,强调变量初始化时对齐赋值符号,操作符与关键词或变量间加空格,独立代码块间加空行,长语句换行书写,并将`main`方法置于类底部。命名规范包括全小写包名、驼峰命名法的类与变量名,以及大写的静态最终变量名。注释部分提倡使用Eclipse自动生成模板,并及时补充描述。文档还提供了多个格式示例,以JDK源码和Hyperic HQ为参考,展示了不同语句的具体应用。
22 2
|
2月前
|
存储 JavaScript 前端开发
|
3月前
|
开发者 图形学 C#
揭秘游戏沉浸感的秘密武器:深度解析Unity中的音频设计技巧,从背景音乐到动态音效,全面提升你的游戏氛围艺术——附实战代码示例与应用场景指导
【8月更文挑战第31天】音频设计在游戏开发中至关重要,不仅能增强沉浸感,还能传递信息,构建氛围。Unity作为跨平台游戏引擎,提供了丰富的音频处理功能,助力开发者轻松实现复杂音效。本文将探讨如何利用Unity的音频设计提升游戏氛围,并通过具体示例代码展示实现过程。例如,在恐怖游戏中,阴森的背景音乐和突然的脚步声能增加紧张感;在休闲游戏中,轻快的旋律则让玩家感到愉悦。
87 0
|
3月前
|
JavaScript 前端开发
|
3月前
|
JavaScript 前端开发
|
3月前
|
JavaScript 前端开发 C++
【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题
【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题
|
3月前
|
前端开发 JavaScript 开发者
JavaScript中的哲学难题:深入探讨undefined与null的情感纠葛
【8月更文挑战第23天】在Web前端开发中,理解和区分`undefined`与`null`至关重要。`undefined`表示变量已声明但未赋值,常出现在未初始化的变量或函数无返回值的情形;`null`则是开发者主动赋值的结果,意味着变量虽存在但值为空。虽然`undefined == null`为真,但`undefined === null`为假,表明它们在语义上有明显差异。合理使用两者能增强代码的健壮性和可读性,避免运行时错误。
33 0
|
6月前
|
SQL 关系型数据库 MySQL
实时计算 Flink版产品使用合集之从MySQL同步数据到Doris时,历史数据时间字段显示为null,而增量数据部分的时间类型字段正常显示的原因是什么
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStreamAPI、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。