undefined与null的区别

许多编程语言都有一个名为null. 它表示一个变量当前没有指向一个对象——例如,当它还没有被初始化时。

相比之下,JavaScript 有两个“非值”表示缺失信息:undefined 和 null:

  • undefined 意味着“no value”(既不是原始的也不是对象)。未初始化的变量、缺少的参数和缺少的属性具有该非值。如果没有显式返回,函数会隐式返回它。
  • null 意思是“no object”。它用作期望对象的非值(作为参数,作为对象链中的成员等)。

1、undefined与null对比

这两个值非常相似并且经常互换使用。因此,它们的不同之处是微妙的。

ECMAScript 语言规范对它们的描述如下:

  • undefined 是“在变量尚未赋值时使用” (来源)
  • null “代表有意不存在任何对象价值” (来源)

1.1 相似性

在 JavaScript 中,将一个变量赋值为 undefined 或 null,老实说,几乎没区别。

var a = undefined;

var a = null;

上面代码中,a变量分别被赋值为 undefined 和 null,这两种写法几乎等价。

undefined 和 null 在 if 语句中,都会被自动转为 false,相等运算符甚至直接报告两者相等。

if (!undefined) 
    console.log('undefined is false');
// undefined is false

if (!null) 
    console.log('null is false');
// null is false

undefined == null
// true

上面代码说明,两者的行为是何等相似!

既然 undefined 和 null 的含义与用法都差不多,为什么要同时设置两个这样的值,这不是无端增加 JavaScript 的复杂度,令初学者困扰吗?Google 公司开发的 JavaScript 语言的替代品 Dart 语言,就明确规定只有null,没有 undefined!

1.2 undefined

undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。 典型用法是:

// 1)如果变量myVar尚未初始化,则其值为 undefined:
let myVar;
console.log(myVar); // undefined

// 2)如果缺少某个属性,则访问该属性会生成值 undefined:
const obj = {};
console.log(obj.unknownProp); // undefined

// 3)如果函数未显式返回任何内容,则该函数隐式返回 undefined:
function myFunc() {}
console.log(myFunc()); // undefined

// 4)如果一个函数有一个 return 没有参数的语句,则该函数隐式返回 undefined:
function myFunc() {
  return;
}
console.log(myFunc()); // undefined

// 5)如果x省略了参数,则语言会使用以下内容初始化该参数 undefined:
function myFunc(x) {
  console.log(x); // undefined
}
myFunc();

// 6)obj?.someProp 返回的可选链接:undefined if obj is undefined or null

undefined?.someProp
// undefined
null?.someProp
// undefined

1.3 null

null表示"没有对象",即该处不应该有值。 典型用法是:

(1) 作为函数的参数,表示该函数的参数不是对象。

(2) 作为对象原型链的终点。

Object.getPrototypeOf(Object.prototype)
// null

如果我们将正则表达式(例如/a/)与字符串(例如'x')进行匹配,我们将获得具有匹配数据的对象(如果匹配成功)或 null(如果匹配失败):

/a/.exec('x')
// null

JSON 数据格式不支持 undefined,只有 null:

JSON.stringify({a: undefined, b: null})
// '{"b":null}'

2、检测 undefined 和 null

检查是否为空:

if (x === null) ...

检查是否为未定义:

if (x === undefined) ...

检查未定义或空值:

// x有值吗?
if (x !== undefined && x !== null) {
    ...
}
// x是非值吗?
if (x === undefined || x === null) {
    ...
}

另一种方法是利用 undefined 和 null 都被考虑的事实 false:

// x 是否有值(是否真实)?
if (x) {
    ...
}
// x 是假的吗?
if (!x) {
    ...
}

注意:false, 0, NaN, 和''也被考虑false。

3、两个非值——一个无法消除的错误

JavaScript 中有两个非值现在被认为是一个设计错误(即使是 JavaScript 的创造者,Brendan Eich)。

那么,为什么不从 JavaScript 中删除这些值之一呢?JavaScript 的一项核心原则是永不破坏向后兼容性。这个原则有很多好处。它最大的缺点是无法消除设计错误。

4、历史原因

为什么 JavaScript 有两个这样的值?原因是历史的。

1995年 JavaScript 诞生时,最初像 Java 一样,只设置了 null 作为表示"无"的值。

根据 C 语言的传统,null 被设计成可以自动转为0。

Number(null)
// 0

5 + null
// 5

但是,JavaScript 的设计者 Brendan Eich,觉得这样做还不够,有两个原因。

首先,null 像在 Java 里一样,被当成一个对象。但是,JavaScript 的数据类型分成原始类型(primitive)和合成类型(complex)两大类,Brendan Eich 觉得表示"无"的值最好不是对象。

其次,JavaScript 的最初版本没有包括错误处理机制,发生数据类型不匹配时,往往是自动转换类型或者默默地失败。Brendan Eich 觉得,如果 null 自动转为0,很不容易发现错误。

因此,Brendan Eich 又设计了一个 undefined。他强制 undefined 为 NaN:

Number(undefined)
// NaN

5 + undefined
// NaN
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,186评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,858评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,620评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,888评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,009评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,149评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,204评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,956评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,385评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,698评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,863评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,544评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,185评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,899评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,141评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,684评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,750评论 2 351

推荐阅读更多精彩内容