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

在这里插入图片描述

🎬 岸边的风:个人主页

 🔥 个人专栏:《 VUE 》 《 javaScript 》

⛺️生活的理想,就是为了理想的生活!

目录

前言

内容

📟 1. 检查是否为null:

📟 2. 检查undefined:

📟 3. 检查 NaN:

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

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

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

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

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

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

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

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

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

📟 13. 可选链接:

📟14. 空合并运算符:

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

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

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

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

结论:


前言

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. 如果为 nullundefined则默认为某个值:

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

const result = variable || defaultValue;

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

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

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

📟 6. 将 nullundefined 转换为空字符串:

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

const result = variable || '';

📟 7. 将 nullundefined 转换为零:

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

const result = variable || 0;

📟 8. 将 nullundefined 转换为默认对象:

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

const result = variable || {};

📟 9. 检查变量是否为 nullundefined

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

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

📟 10. 检查值是否为 nullundefinedNaN

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

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

📟 11. unllundefined的短路评估:

如果变量为 nullundefined,请使用逻辑 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. 将 nullundefined 转换为布尔值:

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

const result = !!variable;

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

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

const result = !isNaN(value);

📟 17. 处理函数参数中的 nullundefined

您可以使用默认参数值来处理函数参数中的 nullundefined

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

📟 18. 从数组中删除 nullundefined的值:

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

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

结论:

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/18447.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【3D捏脸功能实现】

文章目录 一、技术方案介绍二、技术核心三、底层技术实现选型进行模型建模编写逻辑代码 四、功能落地五、总结 一、技术方案介绍 3D捏脸功能是一种利用3D技术实现用户自定义头像的功能。通常实现这种功能需要以下技术: 3D建模技术。通过3D建模技术可以创建一个可以…

【uniapp 样式】使用setStorageSync存储历史搜索记录

<template><view><view class"zhuangbox u-flex"><u--inputplaceholder"请输入关键字搜索"border"surround"shapecircleprefixIcon"search"prefixIconStyle"font-size: 22px;color: #909399"v-model&q…

Linux | VIM | 常用vim快捷键(建议收藏)

文章目录 Linux | VIM | 常用vim快捷键一、移动光标二、删除复制三、插入模式四、编辑五、查找替换六、退出编辑器七、多文件编辑八、多标签编辑九、执行shell命令十、VIM启动项十一、自动排版十二、如何在vim中编译程序十三、buffer操作buffer状态 十四、 VIM 操作目录1.打开目…

重新登录成功和登录失败处理器

<template><div class="login"><el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"><h3 class="title">Java1234 Vue3 后台管理系统</h3><el…

测试|LoadRunner安装及介绍

测试|LoadRunner安装及介绍 文章目录 测试|LoadRunner安装及介绍1.什么是LoadRunner2.LoadRunner特点3.LoadRunner基本概念4.LoadRunner三大组件之间关系LoadRunner安装1.安装包2.安装loadrunner 1.什么是LoadRunner LoadRunner是用来模拟用户负载完成性能测试的工具。 它适用…

重新理解 RocketMQ Commit Log 存储协议

最近突然感觉&#xff1a;很多软件、硬件在设计上是有 root reason 的&#xff0c;不是 by desgin 如此&#xff0c;而是解决了那时、那个场景的那个需求。一旦了解后&#xff0c;就会感觉在和设计者对话&#xff0c;了解他们的思路&#xff0c;学习他们的方法&#xff0c;思维…

Android Studio 关于BottomNavigationView 无法预览视图我的解决办法

一、前言&#xff1a;最近在尝试一步一步开发一个自己的软件&#xff0c;刚开始遇到的问题就是当我们引用 com.google.android.material.bottomnavigation.BottomNavigationView出现了无法预览视图的现象&#xff0c;我也在网上查了很多中解决方法&#xff0c;最后在执行了如下…

无涯教程-Lua - 简介

Lua是一种轻量语言&#xff0c;它的官方版本只包括一个精简的核心和最基本的库。这使得Lua体积小、启动速度快。它用ANSI C语言编写并以源代码形式开放&#xff0c;编译后仅仅一百余K&#xff0c;可以很方便的嵌入别的程序里。和许多“大而全”的语言不一样&#xff0c;网络通信…

pb:DDE客户函数

1、CloseChannel() 功 能:关闭先前用OpenChannel()函数打开的DDE服务器的通道。 语 法:CloseChannel ( handle {, windowhandle } ) 参 数:handle:long类型,通道句柄,指明要关闭的DDE通道; windowhandle:long类型,可选项,指明用做DDE客户的PowerBuilder窗口的…

一张表格讲明白white-space属性。html如何识别\n\r,让这些特殊换行符换行。

大多数标签在展示文本内容的时候都会默认把文本中的空白和换行符去掉&#xff0c;这的确大大的使得文本的排版更加美观了&#xff0c;也怎加了区域的利用率&#xff0c;可是就有一些需求是需要原原本本的展示出原汁原味的文本格式。那该如何展示出文本的内在格式呢&#xff1f;…

vue3+ts+vite 引入静态资源require报错 ——解决方案

vue3中报错&#xff0c;导入reqire静态图片资源的时候&#xff0c;显示require不存在 require is not defined 发现是 在vite中不能使用require引入图片资源&#xff0c;因为这里的require是webpack提供的一种加载能力&#xff0c;由于我们使用的是Vite&#xff0c;因此这里必须…

在腾讯云服务器OpenCLoudOS系统中安装nginx(有图详解)

1. 创建安装目录 2. 下载、安装、编译 进入安装目录&#xff1a; cd /app/soft/nginx/ 下载&#xff1a; wget https://nginx.org/download/nginx-1.21.6.tar.gz 解压&#xff1a; tar -zxvf nginx-1.21.6.tar.gz 安装插件&#xff1a; yum -y install pcre-devel 安装…

spring boot+thymeleaf+semantic ui 分页

参考&#xff1a; https://my.oschina.net/ayyao/blog/898041 后端 springboot 使用&#xff1a; com.github.pagehelper.PageInfo&#xff0c;作为分页对象 <!--引入分页插件--> <dependency><groupId>com.github.pagehelper</groupId><artifa…

高通滤波器,低通滤波器

1.高通滤波器是根据像素与邻近像素的亮度差值来提升该像素的亮度。 import cv2 import numpy as np from scipy import ndimagekernel_3_3 np.array([[-1,-1,-1],[-1,8,-1],[-1,-1,-1]]) print(kernel_3_3) kernel_5_5 np.array([[-1,-1,-1,-1,-1],[-1,1,2,1,-1],[-1,2,4,2,-…

python操作MongoDB数据库入门

MongoDB是一种非关系型数据库&#xff08;NoSQL&#xff09;&#xff0c;其以文档形式存储数据&#xff0c;这些文档集合在一起就是一个数据库。MongoDB的表现形式非常灵活&#xff0c;它的表现形式可以是JSON形式的键值对。Python中的pymongo库是MongoDB的官方驱动库&#xff…

音视频技术开发周刊 | 304

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 更强的Llama 2开源&#xff0c;可直接商用&#xff1a;一夜之间&#xff0c;大模型格局变了 Meta 终于发布了大家期待已久的免费可商用版本 Llama 2。 6000份问卷透露出AI…

ClickHouse目录结构

默认安装路径&#xff1a;/var/lib/clickhouse/ 目录结构&#xff1a; 主要介绍metadata和data metadata 其中的default、system及相应的数据库&#xff0c;.sql文件即数据库创建相关sql语句 进入default数据库&#xff08;默认数据库&#xff09;&#xff1a; 可以看到数据库…

「如何优雅有效利用周末和下班时间?」

文章目录 每日一句正能量前言下班的时间规划周末的时间规划提升周末体验感的好方法怎样才能获得充分的休息后记 每日一句正能量 眼望古城街尽&#xff0c;心谱落愁无序&#xff0c;旧时的誓言&#xff0c;曾而相似&#xff0c;河水在遵循河道的指引下&#xff0c;在曲折前进中放…

零基础学习编程(前端、Java、Python、大数据……)的一些建议

一、学习要明确动机和方向&#xff0c;有强烈的学习欲望 就自学前端来说&#xff0c;很多时候你其实都是孤独的&#xff0c;不知道到底学得怎么样&#xff0c;除非有强烈的欲望&#xff0c;不然大部分的新手很容易就会半途而废。 首先&#xff0c;要想明白自己学习编程的强烈…

QT学习笔记-QT5.15 + MSVC编译套件时编译日志及运行日志日志乱码解决

QT学习笔记-QT5.15 MSVC编译套件时编译日志及运行日志日志中文乱码解决 0、基础环境1、QtCreator中的基本设置编辑->首选项->文本编辑器 2、问题1&#xff1a;MSVC编译日志乱码问题解决问题描述解决方法 3、问题2&#xff1a;MSVC构建套件编译后程序运行日志乱码问题问题…