【JavaScript】null和 undefined 的区别是什么?

本文详细介绍了JavaScript中的`null`和`undefined`的区别,包括它们在转化为数值时的行为以及在不同场景下的典型用法。`null`表示没有对象,常用于函数参数判断和对象原型链终点;而`undefined`表示值的缺失,常见于未初始化的变量、未提供的函数参数和未定义的对象属性。了解这些差异对于JavaScript编程至关重要。

面试被问到,不是很会,学习下。

区别

null 表示没有对象(空对象指针),转化为数值时为 0 ,这也是为什么 typeof null 返回 object 的原因。

console.log(Number(null)) // 0
console.log(typeof null) // object

undefined 表示缺少值,转化为数值时为 NaN

console.log(Number(undefined)) // NaN

undefined 典型用法

  1. 变量被声明了,但没有赋值时,就等于 undefined 。
let num
console.log(num) // undefined
  1. 调用函数时,应该提供的参数没有提供,该参数等于 undefined。
function fun(a) {
  console.log(a) // undefined
}
fun()
  1. 对象没有赋值的属性,该属性的值为 undefined。
const obj = {}
console.log(obj.a) // undefined
  1. 函数没有返回值时,默认返回 undefined 。
function fun() {}
console.log(fun()) // undefined

null 的典型用法 :

  1. 作为函数的参数,表示该函数的参数不是对象,用于判断。
function fun(a) {
  if (a !== null) {
    // 进行一系列操作
  }
}
  1. 作为对象原型链的终点。
console.log(Object.prototype.__proto__) // null
JavaScript 中 `null` `undefined` 虽然都表示“无值”或“空”,但它们的语义使用场景存在显著差异,同时在比较时也表现出不同的行为。 ### 区分 null undefined 的方法 #### 1. **严格相等运算符(===)** 使用 `===` 可以区分 `null` `undefined`,因为它不会进行类型转换。 例如: ```javascript console.log(null === undefined); // false ``` 此结果表明,`null` `undefined` 是两个不同的值,且它们的类型不同[^1]。 #### 2. **typeof 操作符** `typeof` 操作符可以用于判断一个值是否为 `null` 或 `undefined`。 - `typeof null` 返回 `"object"`,这是由于历史原因导致的错误行为。 - `typeof undefined` 返回 `"undefined"`。 示例: ```javascript console.log(typeof null); // "object" (历史 bug) console.log(typeof undefined); // "undefined" ``` #### 3. **显式赋值与隐式默认值** - `undefined` 表示变量已声明但未被赋值,或者对象属性不存在、函数没有返回值。 - `null` 是一个特殊的值,通常由开发者显式地赋予变量,表示“有意为空”。 例如: ```javascript let x; console.log(x === undefined); // true let y = null; console.log(y === null); // true ``` #### 4. **算术运算中的表现** 在算术运算中,`null` `undefined` 的表现也不同: - `null` 在数值上下文中会被转换为 `0`。 - `undefined` 在数值上下文中会被转换为 `NaN`(Not-a-Number)。 示例: ```javascript console.log(null + 1); // 1 console.log(undefined + 1); // NaN ``` #### 5. **条件判断** 在布尔上下文中,`null` `undefined` 都被视为 `falsy` 值,这意味着它们在条件表达式中会被当作 `false` 处理。 例如: ```javascript if (null) { console.log("This won't be printed"); } if (undefined) { console.log("This won't be printed either"); } ``` #### 6. **现代 JavaScript 中的操作符** ES2020 引入了链操作符(`?.`)空值合并操作符(`??`),这些操作符可以帮助更安全地处理 `null` `undefined`: - 链操作符(`?.`)允许安全地访问嵌套对象属性,避免因访问 `null` 或 `undefined` 的属性而导致运行时错误。 - 空值合并操作符(`??`)用于提供默认值,当左侧的值为 `null` 或 `undefined` 时,返回右侧的默认值。 示例: ```javascript const user = null; console.log(user?.name); // undefined console.log(user ?? "Default"); // "Default" ``` ### 总结 尽管 `null` `undefined` 都表示“无值”,但它们的含义用途不同: - `undefined` 表示变量未初始化、函数无返回值或对象属性不存在。 - `null` 表示一个显式的空值,通常由开发者设置。 为了确保代码的健壮性可读性,推荐使用严格相等运算符(`===`)来区分 `null` `undefined`,并合理利用现代 JavaScript 提供的操作符(如 `?.` `??`)来简化对这些值的处理[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值