脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS undefined与null

关于JS中的undefined与null详解

 更新时间：2023年05月23日 10:09:14   作者：施主来了  
在JavaScript中，undefined和null是两个特殊的值，用于表示缺失或空值，文章通过代码示例详细介绍undefined与null作用及使用方法，感兴趣的同学可以借鉴一下

undefined 是一个表示未定义或未赋值的原始值。它在以下情况下使用：

  • 变量声明了但未初始化时，默认为 undefined。
let x;
console.log(x); // undefined
  • 访问对象属性或数组元素时，如果该属性或元素不存在，则返回 undefined。
let obj = { name: "John", age: 30 };
console.log(obj.address); // undefined
let arr = [1, 2, 3];
console.log(arr[3]); //undefined
  • 函数没有明确返回值时，默认返回 undefined。
function foo() {
  // 没有明确返回值
}
console.log(foo()); // undefined

相比之下，null 是一个表示空值或没有对象引用的特殊值。它通常由程序员显式赋予变量或属性，表示该值为空。例如：

let x = null;
console.log(x); // null

null 主要用于以下情况：

  • 初始化一个变量，以便稍后将其设置为对象。
let obj = null; // 初始化为 null
obj = { name: "John", age: 30 }; // 后续设置为对象
  • 表示函数的参数不具有对象引用。
function foo(arg) {
  if (arg === null) {
    console.log("参数为空");
  } else {
    console.log("参数不为空");
  }
}
foo(null); // 参数为空
foo("Hello"); // 参数不为空

需要注意的是，undefined 和 null 是不同的类型。undefined 是一个类型为 undefined 的值，而 null 是一个类型为 object 的值。然而，在相等性比较（== 或 ===）中，它们是相等的，因为它们都表示着相同的含义——空值。

console.log(undefined == null); // true
console.log(undefined === null); // false

在编程中，通常使用 undefined 来表示未定义或未赋值的状态，使用 null 来表示有意地将一个值设置为空。

当涉及到undefined和null的更多细节时，还有一些要注意的事项：

  • 类型检查：

    • 使用 typeof 操作符检查 undefined 值时，会返回字符串 "undefined"。
    • 使用 typeof 操作符检查 null 值时，会返回字符串 "object"。这是一个历史遗留问题，null 被错误地标识为对象类型。
let x;
console.log(typeof x); // "undefined"
let y = null;
console.log(typeof y); // "object"

默认参数值：

  • 当函数的参数没有传递或传递的值为 undefined 时，可以使用默认参数值。
  • 当函数的参数传递 null 值时，会将 null 视为有效值，而不会触发默认参数值。
function foo(x = "default") {
  console.log(x);
}
foo(); // "default"
foo(undefined); // "default"
foo(null); // null

安全导航操作符（Optional Chaining）：

  • 使用安全导航操作符（?.）可以避免访问对象属性或调用方法时出现 undefined 或 null 的错误。如果属性或方法不存在，则会返回 undefined。
let obj = { name: "John", address: { city: "New York" } };
console.log(obj.address?.city); // "New York"
console.log(obj.address?.zipCode); // undefined

变量赋值：

  • 在变量赋值时，undefined 被视为一个变量可以接收的有效值。
  • 而 null 被视为一个特殊值，通常用于表示空或未定义的状态。
let x = undefined;
console.log(x); // undefined
let y = null;
console.log(y); //  null

以上就是关于JS中的undefined与null详解的详细内容，更多关于JS undefined与null的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • JavaScript中操作Mysql数据库实例

    JavaScript中操作Mysql数据库实例

    这篇文章主要介绍了JavaScript中操作Mysql数据库实例,本文直接给出实现代码,代码中包含详细注释,需要的朋友可以参考下
    2015-04-04
  • 如何自定义微信小程序tabbar上边框的颜色

    如何自定义微信小程序tabbar上边框的颜色

    这篇文章主要介绍了如何自定义微信小程序tabbar上边框的颜色,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • echarts几个公司内部数据可视化图表必收藏

    echarts几个公司内部数据可视化图表必收藏

    最近公司有一个需求，要做一个数据可视化的页面，所有的图表都在下面，做这些都是本人自己写的，全部都是真是的项目中的代码，包含有柱状图、折线图、水球图以及散点图，这里直接打出来给大家练手，希望大家多多支持，如果这篇文章对您有用的话必须收藏
    2022-08-08
  • JSONP跨域请求

    JSONP跨域请求

    本文主要介绍了jsonp跨域请求的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript实现移动端滑动选择日期功能

    JavaScript实现移动端滑动选择日期功能

    这篇文章主要介绍了JavaScript实现滑动选择日期功能，基于sui-mobile的移动端实现，感兴趣的小伙伴们可以参考一下
    2016-06-06
  • js的touch事件的实际引用

    js的touch事件的实际引用

    研究移动端页面的触屏滑动事件，搜索jquery 的相应技术支持实在繁琐，而js只需几步简单定义即可，下面与大家分享下js的touch事件的实际引用
    2014-10-10
  • 深入浅出理解javaScript原型链

    深入浅出理解javaScript原型链

    这篇文章主要介绍了对javaScript原型链的理解,以实例形式对javaScript原型链的概念及相关使用技巧做了较为浅显易懂的分析,需要的朋友可以参考下
    2015-05-05
  • 一篇文章让你彻底搞懂js中的位置计算

    一篇文章让你彻底搞懂js中的位置计算

    js中有各种与位置相关的属性,每次看到的时候都各种懵逼,索性一次总结一下,这篇文章主要给大家介绍了关于js中位置计算的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-09-09
  • javascript模拟的Ping效果代码 （Web Ping）

    javascript模拟的Ping效果代码 （Web Ping）

    JS虽然发送不了真正Ping的ICMP数据包,但Ping的本质仍然是请求/回复的时间差,HTTP自然可以实现此功能.
    2011-03-03
  • 详解微信小程序工程化探索之webpack实战

    详解微信小程序工程化探索之webpack实战

    这篇文章主要介绍了详解微信小程序工程化探索之webpack实战，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04

最新评论