一文彻底搞懂 javascript 中的 undefined

2025-07-25
福建
本文字数：1908 字
阅读完需：约 6 分钟

undefined in javascript

undefined是可以说是 javascript 中最特殊的一个类型，许多其他语言中都没有这个类型。它表示一个变量已经声明，但还没有被赋值。

let a; // a的值是undefined

复制代码

如果没有掌握好undefined，则可能会写出一些非常业余的代码，我们来看一个例子，这是在做 code review 时遇到的真实例子，你能看出下面的代码有什么问题吗？

function getUserName(user) {  if (user) {    return user.name;  } else {    return undefined;  }}

复制代码

在揭晓答案之前，我们先系统学习一下什么情况下 JavaScript 会产生undefined类型。

1. 显式`undefined`类型

const a = undefined;console.log(a); // undefined.

复制代码

2. 未初始化的变量

let a;console.log(a); // undefined.

复制代码

3. 访问对象中不存在的属性

const person = {  name: 'zdd',  age: 41,};
console.log(person.gender); // undefined.

const a = [1, 2, 3];console.log(a[3]); // 数组只有三个元素，而a[3]表示第四个元素，所以它们的值是undefined

复制代码

4. 函数没有返回值

函数没有返回值的时候，实际上返回的就是undefined。

function test() {  console.log('hello, world!');}
console.log(test()); // undefined.

复制代码

5. 调用函数没有传递对应的参数

下面的代码中，函数add没有传入任何参数，所以a和b的值都是undefined。

function add(a, b) {  console.log(a); // 输出undefined.  console.log(b); // 输出undefined.  return a + b;}
add(); // 没有传递参数

复制代码

`undefined` != `not defined`

需要注意的是，undefined和not defined是两个不同的概念。undefined表示一个变量已经声明但还没有被赋值，而not defined表示一个变量没有被声明。

let a;console.log(a); // undefined.console.log(b); // error, b is not defined

复制代码

`undefined` vs `void 0`

既然已经有了undefined，为什么有很多 JavaScript 库中还使用void 0呢？原因就是undefined是一个值，而不是关键字，能被用户串改，看下面的代码：

const undefined = 1; // undefined被用户篡改！
const add = (a, b) => {  // 这里判断参数是否传入，结果失效了，因为undefined值在前面被改成了1  if (a === undefined || b === undefined) {    console.error('请输入两个数');  } else {    return a + b;  }};
add(1, 2); // 这里会执行add函数中的if分支，是不是很崩溃？

复制代码

使用void 0就不会有这个问题。

const undefined = 1;
const add = (a, b) => {  // 写成void 0就没有问题了，无论undefined被改成什么，都不影响。  if (a === void 0 || b === void 0) {    console.error('请输入两个数');  } else {    return a + b;  }};
console.log(add(1, 2));

复制代码

那么为什么void 0返回undefined呢？这是因为void是一个操作符，它的作用是对其后面的表达式求值，然后返回undefined。在 JavaScript 中，void 0等价于undefined，其实你也可以写void 1, void 'hello'等，结果都是undefined。

void expression的求值规则 - 先对expression求值，然后返回undefined

正则表达式中的`undefined`

在正则表达式中，可以使用test来测试某个字符串是否满足特定的规则。

console.log(/^hello/.test('hello, world!')); //true

复制代码

如果你没有传递参数给test，那么它会尝试匹配字符串undefined.

console.log(/undefined/.test()); // true

复制代码

This is equivalent to the following code, since undefined convert to string is 'undefined', so the result is true.

console.log(/undefined/.test(undefined));

复制代码

详情请看这里

`undefined` vs `null`

undefined和null经常被放到一起比较，那么他们之间有什么区别呢？

undefined表示一个变量已经声明但还没有被赋值，
null表示一个变量已经被赋值为一个空值。
null是 JS 中的关键字，但是undefined是一个全局属性。

undefined 与其他类型之间的转换

这里面比较特殊的是和数字类型之间的转换，undefined转换为数字类型时会返回NaN，而null转换为数字时会返回0。

console.log(String(undefined)); // "undefined"console.log(Number(undefined)); // NaNconsole.log(Boolean(undefined)); // false

复制代码

注意null转换为其他类型时与undefined的区别

console.log(String(null)); // "null"console.log(Number(null)); // 0console.log(Boolean(null)); // false

复制代码

回到文章开始的问题，根据上面第四点，函数没有返回值时，返回的就是undefined，所以上面的代码可以简化为如下形式，else 分支完全没有必要。

function getUserName(user) {  if (user) {    return user.name;  }}

复制代码

文章转载自：前端风云志
原文链接：https://www.cnblogs.com/graphics/p/18995153
体验地址：http://www.jnpfsoft.com/?from=001YH

发布于: 刚刚阅读数: 3

量贩潮汐·WholesaleTide

关注

还未添加个人签名 2025-04-01 加入

还未添加个人简介

发布

暂无评论

创作场景

一文彻底搞懂 javascript 中的 undefined

undefined in javascript

1. 显式undefined类型

2. 未初始化的变量

3. 访问对象中不存在的属性

4. 函数没有返回值

5. 调用函数没有传递对应的参数

undefined != not defined

undefined vs void 0

正则表达式中的undefined

undefined vs null

undefined 与其他类型之间的转换

量贩潮汐·WholesaleTide

评论

1. 显式`undefined`类型

`undefined` != `not defined`

`undefined` vs `void 0`

正则表达式中的`undefined`

`undefined` vs `null`