分享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,一经查实,立即删除!

相关文章

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

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

测试|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;网络通信…

在腾讯云服务器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,-…

音视频技术开发周刊 | 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;在曲折前进中放…

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

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

【电影推荐系统】实时推荐

概览 技术方案&#xff1a; 日志采集服务&#xff1a;通过利用Flume-ng对业务平台中用户对于电影的一次评分行为进行采集&#xff0c;实时发送到Kafka集群。消息缓冲服务&#xff1a;项目采用Kafka作为流式数据的缓存组件&#xff0c;接受来自Flume的数据采集请求。并将数据推…

深度学习:使用全连接神经网络FCN实现MNIST手写数字识别

1 引言 本项目构建了一个全连接神经网络(FCN)&#xff0c;实现对MINST数据集手写数字的识别&#xff0c;没有借助任何深度学习算法库&#xff0c;从原理上理解手写数字识别的全过程&#xff0c;包括反向传播&#xff0c;梯度下降等。 2 全连接神经网络介绍 2.1 什么是全连接…

maven引入本地jar包的简单方式【IDEA】【SpringBoot】

前言 想必点进来看这篇文章的各位&#xff0c;都是已经习惯了Maven从中央仓库或者阿里仓库直接拉取jar包进行使用。我也是&#x1f921;&#x1f921;。 前两天遇到一个工作场景&#xff0c;对接三方平台&#xff0c;结果对方就是提供的一个jar包下载链接&#xff0c;可给我整…

SpringBoot使用MyBatis Plus + 自动更新数据表

1、Mybatis Plus介绍 Mybatis&#xff0c;用过的都知道&#xff0c;这里不介绍&#xff0c;mybatis plus只是在mybatis原来的基础上做了些改进&#xff0c;增强了些功能&#xff0c;增强的功能主要为增加更多常用接口方法调用&#xff0c;减少xml内sql语句编写&#xff0c;也可…

python使用selenium 打开谷歌浏览器闪退, 怎么解决

问题描述&#xff1a; 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 使用 Selenium 操作 Chrome 浏览器&#xff0c; Chrome 浏览器闪退 问题解决&#xff1a; 可能是以下几个方面出现了问题&#xff1a; 1. Chromedriver 版本与 Chrome 浏览器版本不匹配 你需要确保你正在…

安卓:JzvdStd——网络视频播放器

目录 一、JzvdStd介绍 JzvdStd的特点和功能&#xff1a; JzvdStd常用方法&#xff1a; 二、JzvdStd使用 1、补充知识&#xff1a; 例子&#xff1a; MainActivity &#xff1a; VideoPageAdapter &#xff1a; activity_main&#xff1a; video_page&#xff1a; …

第十次CCF计算机软件能力认证

第一题&#xff1a;分蛋糕 小明今天生日&#xff0c;他有 n 块蛋糕要分给朋友们吃&#xff0c;这 n 块蛋糕&#xff08;编号为 1 到 n&#xff09;的重量分别为 a1,a2,…,an。 小明想分给每个朋友至少重量为 k 的蛋糕。 小明的朋友们已经排好队准备领蛋糕&#xff0c;对于每个朋…

Blazor前后端框架Known-V1.2.9

V1.2.9 Known是基于C#和Blazor开发的前后端分离快速开发框架&#xff0c;开箱即用&#xff0c;跨平台&#xff0c;一处代码&#xff0c;多处运行。 Gitee&#xff1a; https://gitee.com/known/KnownGithub&#xff1a;https://github.com/known/Known 概述 基于C#和Blazor…