技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

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

但是,请注意,constlet变量,以及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 很有用。

参考文章

相关文章

标签: 变量  var  let  const  
  • IT热文
  • 站长推荐