3种方法JS判断变量是否存在或已定义

技术频道 - js技术

3种方法JS判断变量是否存在或已定义

作者:admin 时间:2022-5-11 18:21:5 浏览:

我们在使用一个变量的时候，为了流程更加严密，程序会先判断变量是否存在，以免抛出异常(throws ReferenceError)。关于变量的声明，可以参考前文：

今天，我们重点介绍一下JS如何判断变量是否已经定义，我们有三种方法达到目的。

3种方法JS判断变量是否已经定义

1、typeof

typeof运算符确定变量的类型。typeof myVar可以是以下值之一：'boolean', 'number', 'string', 'symbol', 'object','function'和'undefined'。

如果missingVar未定义，表达式typeof missingVar不会抛出 ReferenceError，这与未定义变量的简单访问相反：

// missingVar 未定义
typeof missingVar; // 不抛出 ReferenceError
missingVar;        // 抛出 ReferenceError

这样，我们就可以使用表达式typeof myVar === 'undefined'来确定变量是否未定义：

if (typeof myVar === 'undefined') {
  // myVar (未定义) 或 (已定义但未初始化)
} else {
  // myVar (已定义和已初始化)
}

请注意，访问已定义但未初始化的变量的结果为 undefined。

// missingVar 未定义
typeof missingVar === 'undefined'; // => true
// myVar 已定义但未初始化
let myVar;
typeof myVar === 'undefined';      // => true

如果变量已定义且具有值，则typeof myVar === 'undefined' 结果为false：

const myVar = 42;
typeof myVar === 'undefined'; // => false

2、使用try/catch

当访问一个未定义的变量时，JavaScript 会抛出一个引用错误：

// missingVar 未定义
missingVar; // 抛出 "ReferenceError: missingVar is not defined"

那么......如何将检查变量包装在一个try块中，并尝试捕获引用错误？如果捕获到错误，则意味着未定义变量：

// missingVar 未定义
try {
  missingVar;
  console.log('missingVar 未定义')
} catch(e) {
  e; // => ReferenceError
  console.log('missingVar 未定义');
}
// logs 'missingVar 未定义'

missingVar在上面的例子中没有定义。当尝试访问try块中的变量时，会抛出 ReferenceError 错误，并且catch块会捕获此引用错误。这是检查变量是否存在的另一种方法。

当然，如果定义了变量，就不会抛出引用错误：

// existingVar 已定义
let existingVar;
try {
  existingVar;
  console.log('existingVar 已定义')
} catch(e) {
  console.log('existingVar 未定义');
}
// logs 'existingVar 已定义'

与typeof方法相比，try/catch更精确，因为它仅确定变量是否未定义，不管已初始化或未初始化。

3、使用window.hasOwnProperty()

最后，要检查全局变量是否存在，可以采用更简单的方法。

每个全局变量都存储为全局对象的一个属性（window在浏览器环境中，global在 NodeJS 中）。可以使用这个想法来确定是否定义了全局变量myGlobalVar：只需检查全局对象是否存在相应的属性：window.hasOwnProperty('myGlobalVar')：

例如，以下是检查浏览器是否定义了IntersectionObserver变量的方法：

if (window.hasOwnProperty('IntersectionObserver')) {
  // 浏览器提供了IntersectionObserver
} else {
  // 浏览器不支持IntersectionObserver
}

var变量和function声明，当在最外层范围（也称为全局范围）中使用时，会在全局对象上创建属性：

// 外部范围
var num = 19;
function greet() {
  return 'Hello!';
}
window.hasOwnProperty('num');   // => true
window.hasOwnProperty('greet'); // => true

但是，请注意，const和let变量，以及class声明不会在全局对象上创建属性：

// 外部范围
const pi = 3.14;
let message = 'Hi!';
class MyClass {}
window.hasOwnProperty('pi');      // => false
window.hasOwnProperty('message'); // => false
window.hasOwnProperty('MyClass'); // => false

4、总结

在 JavaScript 中，变量可以定义或未定义，也可以初始化或未初始化。

如果myVar未定义，或已定义却未初始化，那么typeof myVar === 'undefined' 值为true。这是确定变量是否已定义的快速方法。

另一种方法是将变量包装在一个try { myVar }块中，然后在一个块中捕获可能的引用错误catch(e) { }。如果捕获到一个ReferenceError（引用错误），则未定义该变量。

最后，调用window.hasOwnProperty('myGlobalVar')检查是否存在全局变量myGlobalVarinvoke 。这种方法对于检查浏览器是否支持 Web API 很有用。

参考文章