编程笔记 html5&css&js 070 JavaScript Null数据类型

简介: 编程笔记 html5&css&js 070 JavaScript Null数据类型


在JavaScript中,Null 是一种基本数据类型,它是JavaScript七种原始数据类型(包括:BooleanNumberStringNullUndefinedSymbolES6新增)和 BigInt(ES10新增))之一。尽管它在技术上是原始类型,但在使用 typeof 运算符检测时会返回 "object",这是JavaScript语言设计上的一个历史遗留问题,而不是因为它真的是对象。

一、Null数据类型

在JavaScript中,Null 是一种基本数据类型,它是JavaScript七种原始数据类型(包括:BooleanNumberStringNullUndefinedSymbol(ES6新增)和 BigInt(ES10新增))之一。尽管它在技术上是原始类型,但在使用 typeof 运算符检测时会返回 "object",这是JavaScript语言设计上的一个历史遗留问题,而不是因为它真的是对象。

  1. 定义与概念:
  • Null 类型仅有一个值,就是 null
  • null 值表示“无”或“空”,它通常用来表示变量尚未指向任何有效的对象或者有意清空一个变量的引用。
  1. 用途:
  • 当一个变量应该被赋予对象值但当前为空或未定义时,可以设置为 null
  • 在API调用中,返回 null 可以明确地指示没有有效结果或者资源不存在。
  • 作为函数参数,传递 null 可能意味着不需要提供对象或值。
  1. 示例:
// 定义一个变量并赋值为 null
let myVariable = null;
// 使用 typeof 检测该变量的类型
console.log(typeof myVariable); // 输出 "object" (注意此处是语言特性的表现)
// 检查变量是否为 null
if (myVariable === null) {
  console.log('myVariable is null');
} else {
  console.log('myVariable is not null');
}
// 示例:清空对象引用
let myObject = { name: 'Alice' };
myObject = null; // 此时 myObject 不再引用任何对象
// 示例:从函数返回 null
function findUser(id) {
  // 假设执行查找逻辑...
  if (!userExists(id)) {
    return null;
  }
  return getUserById(id);
}
let user = findUser(12345);
if (user === null) {
  console.log('User with id 12345 does not exist');
}

需要注意的是,在实际开发中,undefinednull 都常用来表示某种形式的“无”,但它们有微妙的区别:

二、 类型运算

在JavaScript中,Null 类型的值只有 null 这一个特定的实例。虽然它是一个单独的数据类型,但因为它只有一个值,因此直接针对 null 的运算相对有限。以下是一些与 null 值相关的常见运算:

  1. 相等性检查:
  • 使用 ===== 检查变量是否为 null
let value = null;
if (value === null) {
  console.log('Value is indeed null');
}
  1. 逻辑运算:
  • 在逻辑表达式中,null 被视为 false,因此可以用在条件语句中:
if (!value) {
  console.log('Value is falsy, which includes being null');
}
  1. 类型检查:
  • 使用 typeof 运算符检测变量类型时,尽管 null 是一种特殊的原始类型,但它会返回 "object"
console.log(typeof null); // 输出 "object"
  1. 比较运算:
  • null 与自身或其他原始类型的比较结果是明确的:
console.log(null == undefined); // 输出 true (抽象相等比较)
console.log(null === undefined); // 输出 false (严格相等比较)
console.log(null > 0); // 输出 false
console.log(null < 0); // 输出 false
  1. 赋值和销毁引用:
  • null 赋给一个变量可以清除该变量对任何对象的引用:
let obj = { name: 'Alice' };
obj = null; // 现在 obj 不再指向任何对象
  1. JSON.stringify():
  • 当使用 JSON.stringify() 方法序列化数据时,null 值会被保留:
let data = { user: null };
let json = JSON.stringify(data);
console.log(json); // 输出 '{"user":null}'

总之,对于 null 数据类型的直接运算并不多,主要是用于比较、类型判断和清空引用,以及与其他数据类型交互时的行为表现。

小结

  • undefined 表示变量声明了但还没有赋值,或者访问的对象属性不存在。
  • null 则是开发者显式地设定变量为“无”值状态,强调是有意为之。
相关文章
|
10天前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
29 3
|
28天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
|
1月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
118 1
|
23天前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
17 0
|
20天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
44 7
|
20天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
29 6
|
20天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
31 5
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
44 1
[HTML、CSS]细节与使用经验

热门文章

最新文章