我想知道JavaScript中null和undefined之间的区别。


当前回答

请仔细阅读以下内容。它应该可以消除您对JavaScript中null和undefined之间区别的所有疑虑。此外,您可以在答案末尾使用效用函数来获取更具体的变量类型。

在JavaScript中,我们可以有以下类型的变量:

未声明的变量已声明但未分配的变量未定义文字赋值的变量赋值为文本null的变量变量分配了除未定义或null以外的任何值

以下逐一解释了每种情况:

未声明的变量只能使用返回字符串“undefined”的typeof运算符进行检查不能用松散相等运算符(==undefined)检查,更不用说严格相等运算符(===undefineed),以及if语句和三元运算符(?:)-这些抛出引用错误已声明但未分配的变量typeof返回字符串“undefined”==检查null返回true==未定义的检查返回true==检查null返回false==未定义的检查返回trueif语句和三元运算符(?:)是否错误未定义文字赋值的变量这些变量与已声明但未分配的变量完全相同。赋值为文本null的变量typeof返回字符串“object”==检查null返回true==未定义的检查返回true==检查null返回true==检查未定义返回falseif语句和三元运算符(?:)是否错误变量分配了除未定义或null以外的任何值typeof返回以下字符串之一:“bigint”、“boolean”、“function”、“number”、“object”、“string”、“symbol”

以下提供了正确检查变量类型的算法:

获取变量的类型,如果它不是“object”,则返回它检查null,因为typeof null也返回“object”使用switch语句对Object.protype.toString.call(o)求值,以返回更精确的值。Object的toString方法为本机/主机对象返回类似“[Object ConstructorName]”的字符串。对于所有其他对象(用户定义的对象),它始终返回“[object object]”如果最后一部分是这种情况(变量的字符串化版本为“[objectObject]”),并且参数returnConstructorBoolean为真,则它将尝试通过对其进行字符串化并从中提取名称来获取构造函数的名称。如果无法访问构造函数,将照常返回“object”。如果字符串不包含其名称,则返回“匿名”

(支持ECMAScript 2020之前的所有类型)

function TypeOf(o, returnConstructorBoolean) {
  const type = typeof o

  if (type !== 'object') return type
  if (o === null)        return 'null'

  const toString = Object.prototype.toString.call(o)

  switch (toString) {
    // Value types: 6
    case '[object BigInt]':            return 'bigint'
    case '[object Boolean]':           return 'boolean'
    case '[object Date]':              return 'date'
    case '[object Number]':            return 'number'
    case '[object String]':            return 'string'
    case '[object Symbol]':            return 'symbol'

    // Error types: 7
    case '[object Error]':             return 'error'
    case '[object EvalError]':         return 'evalerror'
    case '[object RangeError]':        return 'rangeerror'
    case '[object ReferenceError]':    return 'referenceerror'
    case '[object SyntaxError]':       return 'syntaxerror'
    case '[object TypeError]':         return 'typeerror'
    case '[object URIError]':          return 'urierror'

    // Indexed Collection and Helper types: 13
    case '[object Array]':             return 'array'
    case '[object Int8Array]':         return 'int8array'
    case '[object Uint8Array]':        return 'uint8array'
    case '[object Uint8ClampedArray]': return 'uint8clampedarray'
    case '[object Int16Array]':        return 'int16array'
    case '[object Uint16Array]':       return 'uint16array'
    case '[object Int32Array]':        return 'int32array'
    case '[object Uint32Array]':       return 'uint32array'
    case '[object Float32Array]':      return 'float32array'
    case '[object Float64Array]':      return 'float64array'
    case '[object ArrayBuffer]':       return 'arraybuffer'
    case '[object SharedArrayBuffer]': return 'sharedarraybuffer'
    case '[object DataView]':          return 'dataview'

    // Keyed Collection types: 2
    case '[object Map]':               return 'map'
    case '[object WeakMap]':           return 'weakmap'

    // Set types: 2
    case '[object Set]':               return 'set'
    case '[object WeakSet]':           return 'weakset'

    // Operation types: 3
    case '[object RegExp]':            return 'regexp'
    case '[object Proxy]':             return 'proxy'
    case '[object Promise]':           return 'promise'

    // Plain objects
    case '[object Object]':
      if (!returnConstructorBoolean)
        return type

      const _prototype = Object.getPrototypeOf(o)
      if (!_prototype)              
        return type

      const _constructor = _prototype.constructor
      if (!_constructor)            
        return type

      const matches = Function.prototype.toString.call(_constructor).match(/^function\s*([^\s(]+)/)
        return matches ? matches[1] : 'anonymous'

    default: return toString.split(' ')[1].slice(0, -1)
  }
}

其他回答

通常,不要使用null以避免混淆。

标准库方法返回undefined,而不是null

let a = [10];
console.log(a[1]) //=> undefined
console.log(a.find(value => value === 5)) //=> undefined

我经常在人们的代码中看到,某个变量最初未定义,然后赋值给某个值,然后通过设置为null来清除。这是不一致的,最好回到undefined。

尽管如此,如果框架使用null,或者对于json序列化,null是有意义的。

这种差异可以用卫生纸架来解释:

一个非零值就像一个拿着一卷卫生纸的支架,管上还有卫生纸。零值就像一个空马桶纸巾管的支架。空值就像一个连纸巾管都没有的支架。未定义的值类似于缺少持有者本身。

理解差异的最佳方法是首先理清JavaScript的内部工作原理,并理解以下两者之间的含义差异:

let supervisor = "None"
    // I have a supervisor named "None"

let supervisor = null
    // I do NOT have a supervisor. It is a FACT that I do not.

let supervisor = undefined
    // I may or may not have a supervisor. I either don't know
    // if I do or not, or I am choosing not to tell you. It is
    // irrelevant or none of your business.

这三种情况的含义不同,JavaScript用两个不同的值(null和undefined)来区分后两种情况。您可以自由地明确使用这些值来表达这些含义。

那么,由于这种哲学基础而产生的一些JavaScript特定问题是什么呢?

没有初始值设定项的已声明变量将获得未定义的值,因为您从未说过预期值是什么。出租监督员;断言(主管==未定义);从未设置过的对象的属性求值为undefined,因为没有人说过该属性。const dog={name:“Sparky”,年龄:2};断言(dog.bred==未定义);null和undefined彼此“相似”,因为Brendan Eich是这么说的。但它们显然彼此不相等。断言(null==未定义);断言(null!==未定义);谢天谢地,null和undefined有不同的类型。null属于null类型,undefined属于undefined类型。这在规范中,但你永远不会知道这一点,因为我不会在这里重复这种奇怪的类型。如果函数到达其主体的末尾而没有显式返回语句,则返回undefined,因为您不知道它返回了什么。

顺便说一句,JavaScript中还有其他形式的“虚无”(学习哲学很好……)

NaN公司使用从未声明的变量并接收ReferenceError在其时间死区中使用let或const定义的局部变量并接收ReferenceError稀疏数组中的空单元格。是的,虽然它们与undefined相比==,但它们甚至没有定义。$节点>常量a=[1,未定义,2]>常量b=[1,2]>一个[1,未定义,2]>b级[1,<1空项>,2]

好吧,当我们听到null和undefined时,我们可能会感到困惑,但让我们简单地开始吧,它们都是假的,在很多方面都很相似,但JavaScript的奇怪部分,使它们有一些显著的区别,例如,typeof null是“object”,而typeof undefineed是“undefined'。

typeof null; //"object"
typeof undefined; //"undefined";

但如果你用下面的==检查它们,你会发现它们都是假的:

null==undefined; //true

此外,您可以将null赋给对象属性或原语,而undefined可以通过不赋给任何对象来实现。

我创建了一个快速的图像,以一目了然地显示差异。

引自Marijn Haverbeke第三版《Elquent Javascript》:

undefined和null之间的含义差异是Javascript设计的一个意外,大多数时候这并不重要。如果你真的需要关注这些价值观,我建议你将它们视为可以互换的

老实说,一开始,我对这个建议有点怀疑。然而,在我自己的解释中,这是一种懒惰(或渴望)的方式来处理他们的分歧。也许,我们根本不需要处理这些差异。如果我们必须这样做,我们可以延迟我们的担忧(直到我们不得不这样做),而不是在这些值(null和undefined)流经我们的代码的每一步都过度/防御性地担心它。

PS:这不是对你问题的直接回答。这只是一个相关的观点。