JavaScript中undefined与null的区别及比较方法

作者：纸飞机时间：2026-10-30 09:04:51浏览：356

本文详解JavaScript中两个特殊值undefined和null的定义与区别。通过代码示例展示如何判断属性是否存在，并对比使用相等运算符(==)和等同运算符(===)时，null与undefined在类型转换下的不同表现，帮助开发者准确处理空值逻辑。

undefined与null的基本定义

JavaScript语言中包含两个特殊的原始值：undefined和null，在处理数据时需谨慎区分。当访问未初始化的变量或读取对象中不存在的属性时，系统会返回undefined值。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learn4UndefinedAndNull</title>
</head>
<body>
<script>
  var myData = {
    name:"Luka",
    weather:"sunny"
  };
  document.writeln("Prop: "+myData.doesntexits);
</script>
</body>
</html>

运行上述代码后的输出结果如下：


Prop: undefined

JavaScript还定义了另一个特殊值null，它与undefined存在细微差异。undefined通常表示变量已声明但未赋值，或者对象属性不存在；而null则表示变量已被显式赋值为一个无效对象，即该变量存在但指向空值（no value），其类型不是object、string、number或boolean中的任何一种有效类型。

以下代码演示了如何分别使用undefined和null来展示它们的不同行为：

代码示例：属性存在性与赋值状态


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learn4UndefinedAndNull</title>
</head>
<body>
<script>
  var myData = {
    name:"Luka"
  };
  //读取 weather 属性
  document.writeln("Var: "+myData.weather+"<br />");
  //判断对象是否具有 weather 这个属性
  document.writeln("Prop: "+("weather" in myData)+"<br /><br />");

  myData.weather = "sunny";
  document.writeln("Var: "+myData.weather+"<br />");
  document.writeln("Prop: "+("weather" in myData)+"<br /><br />");

  myData.weather = null;
  document.writeln("Var: "+myData.weather+"<br />");
  document.writeln("Prop: "+("weather" in myData)+"<br /><br />");
</script>
</body>
</html>

代码执行后的输出结果如下：


Var: undefined
Prop: false

Var: sunny
Prop: true

Var: null
Prop: true

1. 判断变量或属性是否为undefined或null

若需检测某个属性是否为null或undefined（无论具体是哪一个），可以使用if语句配合逻辑非运算符(!)进行判断。

判断属性是否为空值的技巧


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learn4UndefinedAndNull</title>
</head>
<body>
<script>
  var myData = {
    name:"Luka",
    city:null
  };

  if(!myData.name){
    document.writeln("name is null or undefined <br /><br />");
  }else {
    document.writeln("name is not null or undefined <br /><br />")
  }

  if(!myData.city){
    document.writeln("city is null or undefined <br /><br />");
  }else {
    document.writeln("city is not null or undefined <br /><br />")
  }

  if(!myData.weather){
    document.writeln("weather is null or undefined <br /><br />");
  }else {
    document.writeln("weather is not null or undefined <br /><br />")
  }

</script>
</body>
</html>

相等运算符与等同运算符的区别


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learn4UndefinedAndNull</title>
</head>
<body>
<script>
  var firstVal = null;
  var secondVal;

  var equality = firstVal == secondVal;
  var identity = firstVal === secondVal;

  document.writeln("Equality: "+equality+" <br />");
  document.writeln("Identity: "+identity+" <br />");
</script>
</body>
</html>

上述比较操作的输出结果如下：


Equality: true
Identity: false

以上就是关于JavaScript中undefined与null基础比较的完整内容，希望能为读者提供有价值的参考，并支持本站的技术分享。

作者最新文章

JS动态构建复杂嵌套JSON对象的方法

2026-11-05 15:41:52

JS负数取余为什么是负数？详解余数与模运算区别

2026-11-05 13:34:41

JS 解压出现乱码或报错怎么解决？

2026-11-05 12:32:38

JS 中 startsWith、indexOf 与正则判断字符串前缀的对比

2026-11-04 22:19:43

JS解析Excel后怎么将数据转换为JSON格式

2026-11-04 20:58:28