深入理解JavaScript变量作用域、数据类型与null/undefined区别
本文详细解析JavaScript中的变量作用域机制,区分局部变量与全局变量的声明方式及生命周期。重点探讨null与undefined在数据类型、赋值状态及比较运算中的差异,结合typeof关键字说明数组、对象等类型的判定规则,并通过代码示例演示==与===在类型转换上的不同表现,帮助开发者避免常见陷阱。
JavaScript变量作用域详解
1、Javascript变量作用域
在JavaScript中,变量主要划分为局部变量和全局变量两类,它们分别对应局部作用域和全局作用域的概念。
1 局部变量和作用域 局部变量通常在函数体内部进行声明和使用:
function func(){
var i=12;//局部变量
......
}
局部变量的作用范围仅限于声明该变量的函数体内部。其生命周期始于函数被调用并执行初始化时,结束于函数执行完毕后被销毁。
2、全局变量和作用域
全局变量通常在函数体外部进行声明:
var i=12;//全局变量
function func(){
......
}
此外,还存在一种未显式声明而直接使用的变量,这类变量默认被视为全局变量:
function func(){
i=12;//没有被声明(使用var 关键字声明),默认为全局变量
}
全局变量可以在当前页面中的所有脚本和方法中访问,其作用域覆盖当前页面的脚本范围。全局变量的生命周期从变量被初始化时开始创建,直到当前页面关闭时才被销毁。
typeof关键字与数据类型检测
2、typeof关键字
typeof关键字主要用于检测变量的数据类型。JavaScript中的主要数据类型包括string、number、Boolean、object等。
console.log(typeof 'str');//string
console.log(typeof 23);//number
console.log(typeof false);//boolean
console.log(typeof [1,3,12]);//object
console.log(typeof {name:'jack',age:12});//object
console.log(typeof new Date());//object
需要注意的是,在JavaScript中,数组和JSON对象均属于object数据类型。
null与undefined的区别及比较
3、null和undefined
null和undefined在JavaScript中频繁出现,用于表示变量值为空或变量未被定义。虽然在表示值时两者均可代表空值,但在数据类型层面存在显著差异。
console.log(typeof null);//object
var persion = null;
console.log(persion);//null
console.log(typeof undefined);//undefined
var persion2;
console.log(persion2);//undefined
null的数据类型被判定为object,而undefined的数据类型则是undefined。当变量声明并赋值为null时,其值为null;若变量仅声明而未赋值,则其值为undefined。进一步对比如下:
console.log(null==undefined);//true 值相等
console.log(null===undefined);//false 类型不相等
通过上述对比可以看出,在表示值时,null和undefined均代表空;null的数据类型为object,undefined的数据类型为undefined。仅声明而未初始化的变量值均为undefined。
下面是补充
Situation One
<script>
var i; //全局变量
//方法名是camel命名法
//方法里面的变量是局部变量
function sayHello(){
var x=100;
alert(x);
x++;
}
sayHello(); //输出100
alert(x); //报错,因为x是局部变量,访问不到
</script>
Situation Two
<script>
function sayHello(){
var x=100;
if(x==100){
var y=x+1;
alert(y); //输出101
}
alert(y); //也输出101,在方法内部,不存在块级作用域,在C#中就不可以了!!!
for(var i=0;i<2;i++){
alert(i)
} //在for循环里面定义的变量是块级作用域
alert(i); //因为i是局部变量,所以输出2
}
sayHello();
</script>
注:变量在使用前可以不使用var声明,此类变量会被视为“全局变量”,但这种做法较少见。
关于undefined与null
在以下几种情况下,变量的值为undefined: 1、变量已定义但未赋值,则变量的值为undefined。 2、调用的方法没有返回值,返回值为undefined。 3、对象的属性值不存在,则返回值为undefined,例如:document.ddd。
Example1:
var xx;
var yy=null;
if(xx==yy){
alert('相等');
}
else{
alert('不等');
}
输出结果为相等,因为在执行if判断时,浏览器会对xx及yy进行值的判断,由于两者均无具体值,被视为false。若将if判断中的==替换为===(全等于符号),则输出不等,因为===要求xx及yy的数据类型和值都必须相同。Example2:
var xx=10
var yy='10';
if(xx==yy){
alert('相等');
}
else{
alert('不等');
}
输出相等,若替换为===,则输出不等。
Example3:
var n='10';
switch(n){
case 10:
alert('数字');
break;
case '10':
alert('字符串');
break;
}
输出字符串。switch中的判断需考虑类型。
总结:if中的判断主要关注数值,不考虑类型。
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
