如何检查JavaScript中未定义或空变量?

我们经常在JavaScript代码中使用以下代码模式

if (typeof(some_variable) != 'undefined' && some_variable != null)
{
// Do something with some_variable
}

是否有一种不那么冗长的检查方法具有相同的效果?

根据一些论坛和文献,简单地说下面应该有同样的效果。

if (some_variable)
{
// Do something with some_variable
}

不幸的是,当some_variable未定义时,Firebug在运行时将这样的语句计算为错误,而第一个语句对它来说很好。这仅仅是Firebug的一种(不必要的)行为,还是这两种方式之间真的有一些区别?

846214 次浏览

如果您试图引用一个未声明的变量,那么在所有JavaScript实现中都会抛出一个错误。

对象的属性不受相同条件的约束。如果未定义对象属性,则在尝试访问它时不会抛出错误。在这种情况下,你可以缩短:

 if (typeof(myObj.some_property) != "undefined" && myObj.some_property != null)

if (myObj.some_property != null)

考虑到这一点,并且全局变量可以作为全局对象的属性访问(在浏览器中是window),你可以对全局变量使用以下方法:

if (window.some_variable != null) {
// Do something with some_variable
}

在局部作用域中,确保变量声明在代码块的顶部总是有用的,这将节省重复使用typeof

你必须区分不同的情况:

  1. 变量可以是undefined未申报。如果在typeof以外的任何上下文中访问未声明的变量,将会得到一个错误。
if(typeof someUndeclaredVar == whatever) // works
if(someUndeclaredVar) // throws error

声明但未初始化的变量是undefined

let foo;
if (foo) //evaluates to false because foo === undefined
  1. 未定义属性,如someExistingObj.someUndefProperty。未定义的属性不会产生错误,只是返回undefined,当它转换为布尔值时,计算结果为false。如果你不关心 0false,使用if(obj.undefProp)是可以的。基于这个事实有一个常用的成语:

    value = obj.prop || defaultValue
    

    这意味着“如果obj具有prop属性,则将其分配给value,否则分配默认值defautValue”。

    有些人认为这种行为令人困惑,认为它会导致难以发现的错误,并建议使用in操作符代替

    value = ('prop' in obj) ? obj.prop : defaultValue
    

我认为最有效的测试"值的方法是nullundefined"是

if ( some_variable == null ){
// some_variable is either null or undefined
}

所以这两条线是等价的

if ( typeof(some_variable) !== "undefined" && some_variable !== null ) {}
if ( some_variable != null ) {}

注1

正如问题中提到的,短变体要求已经声明some_variable,否则将抛出ReferenceError。然而,在许多用例中,你可以假设这是安全的:

检查可选参数:

function(foo){
if( foo == null ) {...}

检查现有对象上的属性

if(my_obj.foo == null) {...}

另一方面,typeof可以处理未声明的全局变量(只返回undefined)。然而,正如Alsciende解释的那样,出于充分的理由,这些病例应该减少到最低限度。

注2

这个-甚至更短-变体是等效的:

if ( !some_variable ) {
// some_variable is either null, undefined, 0, NaN, false, or an empty string
}

所以

if ( some_variable ) {
// we don't get here if some_variable is null, undefined, 0, NaN, false, or ""
}

注3

一般来说,建议使用===而不是==。 建议的解决方案是这条规则的一个例外。JSHint语法检查器甚至为此提供了eqnull选项

jQuery风格指南:

严格的相等性检查(===)应该用于==。唯一的 当通过null方式检查undefined和null时出现异常

// Check for both undefined and null values, for some important reason.
undefOrNull == null;

2021 - 03年编辑:

现在大多数浏览器 支持null合并运算符(??) 逻辑空赋值(??=),它允许更简洁的方式 如果变量为空或未定义,则指定一个默认值,例如:

if (a.speed == null) {
// Set default if null or undefined
a.speed = 42;
}

可以写成这些形式中的任何一种

a.speed ??= 42;
a.speed ?? a.speed = 42;
a.speed = a.speed ?? 42;

由于没有一个完整而正确的答案,我将尝试总结:

一般来说,表达式为:

if (typeof(variable) != "undefined" && variable != null)

不能简化,因为variable可能没有声明,因此省略typeof(variable) != "undefined"将导致ReferenceError。但是,# EYZ2:

如果variable全球,你可以简化为:

if (window.variable != null)

如果它是当地的,你可能可以避免这个变量未声明的情况,也可以简化为:

if (variable != null)

如果它是对象属性,你不必担心ReferenceError:

if (obj.property != null)

你必须定义一个这样的函数:

validate = function(some_variable){
return(typeof(some_variable) != 'undefined' && some_variable != null)
}

首先,你必须清楚你要测试什么。JavaScript有各种各样的隐式转换会让您出错,还有两种不同类型的相等比较器:=====

测试nullundefined的函数test(val)应该具有以下特征:

 test(null)         => true
test(undefined)    => true
test(0)            => false
test(1)            => false
test(true)         => false
test(false)        => false
test('s')          => false
test([])           => false

让我们来看看哪些想法实际上通过了我们的测试。

这些工作:

val == null
val === null || val === undefined
typeof(val) == 'undefined' || val == null
typeof(val) === 'undefined' || val === null

这些都不起作用:

typeof(val) === 'undefined'
!!val

我创建了这些方法的Jsperf条目来比较正确性和性能。目前的结果还不确定,因为在不同的浏览器/平台上还没有足够的运行。请花一分钟在你的电脑上运行测试!

目前,简单的val == null测试似乎提供了最好的性能。它也是最短的。如果您想要补码,可以将测试反置为val != null

正如在其中一个答案中提到的,如果您谈论的是一个具有全局作用域的变量,那么您可能会很幸运。您可能知道,全局定义的变量往往会被添加到windows对象中。你可以利用这一点假设你要访问一个名为bleh的变量,只需使用双倒操作符(!!)

!!window['bleh'];

这将返回一个false,而bleh还没有被声明和赋值。

测试空值(if (value == null))或非空值(if (value != null))比测试变量的定义状态更简洁。

此外,如果使用布尔值false定义变量(或对象属性),则测试if (value)(或if( obj.property))以确保变量(或对象属性)的存在将失败。买者自负。

用正常相等性检查null也将为undefined返回true。

# EYZ0

JS equal

使用严格比较运算符可以很容易地区分这两个值。

示例代码:

function compare(){
var a = null; //variable assigned null value
var b;  // undefined
if (a === b){
document.write("a and b have same datatype.");
}
else{
document.write("a and b have different datatype.");
}
}

在ES5和ES6等较新的JavaScript标准中,你只需说

> Boolean(0) //false
> Boolean(null)  //false
> Boolean(undefined) //false

all返回false,这类似于Python检查空变量。 所以如果你想写一个变量的条件逻辑,只需写

if (Boolean(myvar)){
// Do something
}

这里“null”或“空字符串”或“undefined”将被有效地处理。

你可以检查变量是否有值。的含义,

if( myVariable ) {
//mayVariable is not :
//null
//undefined
//NaN
//empty string ("")
//0
//false


}

如果您不知道一个变量是否存在(也就是说,它是否声明过),您应该使用typeof操作符进行检查。如。

if( typeof myVariable !== 'undefined' ) {
// myVariable will get resolved and it is defined
}

不管是undefined还是null,它都会返回true

if (typeof yyy == 'undefined' || !yyy) {
console.log('yes');
} else {
console.log('no');
}

是的

if (!(typeof yyy == 'undefined' || !yyy)) {
console.log('yes');
} else {
console.log('no');
}

没有

在浏览器中打开开发人员工具,并尝试如下图所示的代码。

Img1 # EYZ0 < / p >

为了理解,让我们分析一下Javascript引擎在转换undefined、null和”(也是一个空字符串)时返回的值是什么。您可以直接在开发人员控制台检查相同的内容。

enter image description here

你可以看到所有都被转换为false,这意味着所有这三个都是通过javascript假设“缺乏存在”。因此,您不需要像下面这样显式地检查代码中的所有三个。

if (a === undefined || a === null || a==='') {
console.log("Nothing");
} else {
console.log("Something");
}

我还想指出一件事。

布尔(0)的结果是什么?

当然是假的。当0是预期结果中的有效值时,这将在代码中创建一个错误。所以在写代码的时候一定要检查这个。

下面是另一种使用array# EYZ0方法的方法:

[undefined, null].includes(value)

我用过这个方法

将id保存在某个变量中

var someVariable = document.getElementById("someId");

然后使用if条件

if(someVariable === ""){
//logic
} else if(someVariable !== ""){
//logic
}

这是唯一应该使用==!=的情况:

if (val == null) console.log('val is null or undefined')
if (val != null) console.log('val is neither null nor undefined')

对于任何其他比较,应该使用严格比较器(===!==)。

类似于你所做的,你可以这样做

if (some_variable === undefined || some_variable === null) { 做的东西 代码}< / > < / p >

在ES5或ES6中,如果你需要多次检查,你可以这样做:

const excluded = [null, undefined, ''];


if (!exluded.includes(varToCheck) {
// it will bee not null, not undefined and not void string
}

使用Ramda,你可以简单地执行R.isNil(yourValue) Lodash和其他辅助库具有相同的功能

如果If语句的目的是在为变量赋值之前检查nullundefined值,则可以使用空合并运算符。根据caniuse的数据,大约85%的浏览器应该支持它(截至2021年1月)。该运算符的示例如下所示:

const a = some_variable ?? '';

如果some_variablenullundefined,这将确保变量将被分配给一个空字符串(或任何其他默认值)。

此操作符最适合您的用例,因为它不会为其他类型的假值(如0'')返回默认值。

这是一个非常罕见的例子,建议使用==而不是===。表达式somevar == null对于undefinednull将返回true,但对于其他所有内容将返回false(如果变量未声明则会出现错误)。

如预期的那样,使用!=将翻转结果。

现代编辑器不会因为使用==!=操作符和null而发出警告,因为这几乎总是需要的行为。

最常见的比较:

undeffinedVar == null     // true
obj.undefinedProp == null // true
null == null              // true
0 == null                 // false
'0' == null               // false
'' == null                // false

自己试试吧:

let undefinedVar;
console.table([
{ test : undefinedVar,     result: undefinedVar     == null },
{ test : {}.undefinedProp, result: {}.undefinedProp == null },
{ test : null,             result: null             == null },
{ test : false,            result: false            == null },
{ test : 0,                result: 0                == null },
{ test : '',               result: ''               == null },
{ test : '0',              result: '0'              == null },
]);

与ES5和ES6标准比较undefined或null或0的最佳方法

 if ((Boolean(some_variable_1) && Boolean(some_variable_2)) === false) {
// do something
}

这也是一种很好的(但很啰嗦)方法:

if((someObject.someMember ?? null) === null) {
// bladiebla
}

正在发生的事情非常清楚,很难被误解。这是非常重要的!:-)

这使用了??操作符(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)。如果someObject.someMember的值是nullundefined,则使用??操作符,并将值变为null

TBH,我喜欢这个东西的显式,但我通常更喜欢someObject.someMember == null,它更可读,熟练的JS开发人员可能知道这里发生了什么。

let varToCheck = ""; //U have to define variable firstly ,or it throw error
const excluded = [null, undefined, ""];


if (!excluded.includes(varToCheck)) {
// it will bee not null, not undefined and not void string
console.log("pass");
} else {
console.log("fail");
}

例如,我复制vladernn的答案来测试,你可以点击按钮“复制片段来回答”。也是为了测试。