JavaScript 03-10_var定义变量不赋值,输出该-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46236141/article/details/104788250

深入解析JavaScript中数据类型定义、NaN特性、变量赋值区别、类型检测、自动与强制类型转换规则，涵盖布尔、字符串、数值转换实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义未赋值和未定义的变量的区别

// 定义未赋值 只是定义了变量,但是没有给变量进行赋值操作
var int1 ;
console.log(int1);    // 未赋值 执行结果是 undefined

// 直接使用一个没有定义过的变量
console.log(int2);    // 未定义 执行结果是 报错

NaN

NaN，not a number 不是一个数值，是表示存储的数据的数据类型。

如果有非数值参与计算,结果就是 NaN

var str1 = '北京';
var str2 = '上海';
// 两个变量中存储的数据,都不是数值
// 执行结果就是NaN
var res1 = str1 - str2;
console.log(res1);

有NaN参与,结果就是NaN

var res2 = 100 - str1;
console.log(res2);

如果是 + 加号，两侧都是数值，执行加法运算。
有一个是字符串,就执行字符串拼接操作。

var res3 = 100 + str1;
console.log(res3);

总结

NaN虽然表示是一个非数字 , 但是一般是算术运算执行的结果，因此NaN 仍然是数值类型。

执行运算时，非加法运算，只要有NaN参与，执行结果都是NaN。
如果是加法运算，有 NaN 执行字符串拼接操作，都是数值执行加法运算
NaN永远不会等于NaN，NaN == NaN 执行结果是 false。
JavaScript的规定，NaN表示的是非数字，但是这个非数字也是不同的，因此 NaN 不等于 NaN，
两个NaN永远不可能相等

再比如：

console.log ( '北京' - 100 == '北京' - 100 );

这里比较的不是 ‘北京’-100 这个表达式，而是 ‘北京’-100 的结果。
左侧 ‘北京’-100 结果是 NaN，右侧 ‘北京’-100 结果是 NaN，但是 NaN 不等于 NaN 。
但是如果这里是加号而不是减号，就会执行字符串拼接，结果就是 true：

console.log ( '北京' + 100 == '北京' + 100 );//执行结果是 true

如何解决字符串不能解析变量？

在JavaScript中，单引号、双引号的字符串，都不能解析变量。你写的变量，只能显示为变量名称的字符串，不会显示为变量中存储的数值。比如：

var airPollution = 52 ;
console.log( '今天的空气污染是 : airPollution' );
//此时只能输出字符串 '今天的空气污染是 : airPollution'，而不会显示52

解决这种问题，我们有两种方法：

方法1 使用字符串拼接方式

console.log( '今天的空气污染是 : ' +  airPollution);

方法2 使用模板字符串,可以解析变量

console.log( `今天的空气污染是 : ${airPollution}` );

模板字符串使用的是反引号键盘上方 1 左侧的按钮。
在模板字符串反引号中使用 ${变量} 包裹变量，就可以解析变量数值了。
字符串拼接和字符串解析变量执行结果,没有区别,你爱用哪个用那个。

JavaScript的3种调试方式

JavaScript中，变量存储的数据，有时，我们知道是什么，有时不清楚内容，需要输出查看。
在 JavaScript中，有3种常用的查看调试方式：

// 1, window.alert('内容') --- 弹出提示框
window.alert('beijing');

// 2, document.write('内容') --- 在页面输出
document.write('北京');

// 3, console.log('内容') --- 控制台输出 --- 浏览器控制台 console 内容中
console.log('北京');

控制台输出是常用方式。

数据类型的检测

在JavaScript中，数据类型的检测，使用 typeof() 方法 / 函数。所谓的方法 / 函数 , 现在指的是JavaScript给我们定义好的功能。
typeof 操作符返回一个字符串，表示未经计算的操作数的类型。

语法

typeof 运算符后接操作数：

typeof+空格+变量/数据（这种语法形式不推荐使用,容易程序执行错误）
typeof(变量/数据)

typeof 并不能非常准确的表示每一种数据类型，一般是使用判断 布尔类型、数值类型、字符串类型、undefined类型。其他数据类型我们之后有更加准确，但是复杂的判断方式。

实例

整数，浮点数，NaN 执行结果都是 number：

var int1 = 100;
var float1 = 100.123;
console.log( typeof(int1) );   //执行结果是 number
console.log( typeof(float1) ); //执行结果是 number
console.log( typeof(NaN) );    //执行结果是 number

布尔类型的执行结果是 boolean：

var bool1 = true;    
console.log( typeof(bool1) );  //执行结果是 boolean

字符串类型的执行结果是 string：

var str1 = '北京';
console.log( typeof(str1) );   //执行结果是  string

undefined 执行结果是 undefined：

console.log( typeof(undefined) );//执行结果是 undefined

null 执行结果是 object：

console.log( typeof(null) );   //执行结果是 object

JavaScript 类型转换

定义

什么是数据类型的转换？为什么要有数据类型的转换？
在 JavaScript 程序中，变量中存储的数据类型没有限制，也就是在变量中可以存储任何符JavaScript语法规范的数据类型，但是在 JavaScript 程序的执行过程中,往往需要变量中存储的数值是某种特定的数据类型，别的数据类型不行，此时就需要进行数据类型的转换。

所谓的数据类型转换，就是将当前数据类型转换为其他数据类型。

JavaScript中数据类型的转换，分为自动类型转换和强制类型转换：

自动类型转换（至关重要）

自动转换是计算机程序,自动完成的转换。

布尔类型的自动转换

其他数据类型，自动转换为布尔类型。
在执行 if 判断时，其他数据类型会自动转换为布尔类型。

语法

if(表达式){
    执行程序
}else{
    执行程序
}

if( false ){
    console.log('真');
}else{
    console.log('假');
}
//if 的 () 里，只接受你输入 true 和 false 两个数值
// 如果你在 if 的 ( ) 中输入了不是 true 或者 false 的内容
// if 程序会自动的将你输入的其他数据 变成 / 转换 为 true 或者 false

转换原则

转换为 false： 0 ’ ’ undefined null NaN 这五种情况转换为false
特别提醒： 0.0 0.00000 都算是0
转换为 true：其他的所有类型，都会转换为 true

实例

其他所有数据内容，都会转换为true。

// 字符串空格
if(' '){
    console.log( '转换为true' );
}else{
    console.log( '转换为false' );
}

// 字符串0
if('0'){
    console.log( '转换为true' );
}else{
    console.log( '转换为false' );
}

// 字符串0.0
if('0.0'){
    console.log( '转换为true' );
}else{
    console.log( '转换为false' );
}

字符串类型的自动转换

其他类型自动转化为字符串。
在执行字符串拼接时，会将其他数据类型转化为字符串类型。
执行字符串拼接，拼接符号 +号两侧应该都是字符串类型。 如果是其他类型，JavaScript程序会自动转化为字符串类型，再执行拼接。

转换原则

果是基本数据类型 / 简单数据类型，将数据数值直接转化为字符串 , 然后执行拼接操作。
如果是引用数据类型 / 复杂数据类型，有以下几种转换类型：

数组：不要 [] 将数组的数据内容，转化为字符串，执行拼接操作
对象：任何的对象，都转化为字符串 [object Object]，执行拼接操作
函数：将所有函数的代码，都转化为字符串，执行拼接操作

实例

如果是基本数据类型 / 简单数据类型

var str2 = '北京' + true;
var str3 = '北京' + false;
var str4 = '北京' + undefined;
var str5 = '北京' + null;
var str6 = '北京' + 100;
var str7 = '北京' + 100.123;
var str8 = '北京' + 2e3;   // 科学技术法,会解析为表示的数值,然后再拼接
console.log(str2);        //转换结果为 字符串 北京true
console.log(str3);        //转换结果为 字符串 北京false
console.log(str4);       //转换结果为 字符串 北京ndefined
console.log(str5);       //转换结果为 字符串 北京null
console.log(str6);       //转换结果为 字符串 北京100
console.log(str7);       //转换结果为 字符串 北京100.123
console.log(str8);       //转换结果为 字符串 北京2000

如果是引用数据类型 / 复杂数据类型

// 特殊1 数组 
var str9 = '北京' + [1,2,3,4,5] ; 
console.log(str9);
//转换结果为 字符串 北京1,2,3,4,5

// 特殊2 对象
var str10 = '北京' + {name:'张三' , age:18 , sex:'男'} ;
console.log(str10);
//转换结果为 字符串 北京[object Object]

// 特殊3 函数
var str11 = '北京' + function fun(){console.log(123)};
console.log(str11);
//转换结果为 字符串 北京function fun(){console.log(123)}

数值类型的自动转换

其他类型自动转换为数值。
在执行数学运算时，会触发数据类型的自动转换。

转换原则

布尔类型：true —> 1
false —> 0
undefined：转换为 NaN
null：转换为 0
字符串：

如果整个字符串是纯数字字符串，或者符合科学计数法 —> 转换为对应的数值
如果字符串内有不符合数字规范的内容 —> 转换为 NaN

数组，对象，函数：

如果是 + 加号，执行的是字符串拼接效果，按照这些数据类型转换为字符串的原则来转换
如果是其他形式的运算，执行结果都是 NaN

实例

var int1 = 100 - true;
var int2 = 100 - false;
var int3 = 100 - undefined;
var int4 = 100 - null;
console.log(int1);        //转换结果 数字 99
console.log(int2);        //转换结果 数字 100
console.log(int3);        //转换结果 NaN
console.log(int4);        //转换结果 数字 100

如果是字符串

var int5 = 100 - '100';     // 整数字符串
var int6 = 100 - '90.123';  // 浮点数字符串
var int7 = 100 - '2e3';     // 科学计数法字符串
// 转换为对应的数值,参与运算

var int8 = 100 - '123abc';  // 包含不符合数字规范内容的字符串
// 转换为 NaN , 参与运算
// 任何有 NaN , 参与的运算,结果都是NaN
console.log(int5);         //转换结果 数字 0
console.log(int6);        //转换结果 数字 9.876999999999995
console.log(int7);        //转换结果 数字 -1900
console.log(int8);        //转换结果 NaN

如果是数组,对象,函数

console.log( 100 + [1,2,3,4,5] );//字符串拼接 转换结果 字符串 1001,2,3,4,5
console.log( 100 + {name:'张三' , age:18} );//字符串拼接 转换结果 字符串 100[object Object]
console.log( 100 + function fun(){console.log(123)} );//字符串拼接 转换结果 字符串 100function fun(){console.log(123)}

console.log( 100 - [1,2,3,4,5] );//转换结果 NaN
console.log( 100 - {name:'张三' , age:18} );//转换结果 NaN
console.log( 100 - function fun(){console.log(123)} );//转换结果 NaN

强制类型转换

强制转换是程序员,强行完成的转换。就是使用JavaScript中定义好的方法/函数。

布尔类型的强制转换

其他数据类型,强制转换为布尔类型。

语法

Boolean( 数据/变量 )

转换原则

转换原则与自动转换原则相同。
转换为 false： 0 ’ ’ undefined null NaN 这五种情况转换为false
特别提醒： 0.0 0.00000 都算是0
转换为 true：其他的所有类型，都会转换为 true

实例

var int = 100;
//将 int 中存储的数值100 ,转换为布尔值输出,转换结果是 true
console.log( Boolean(int) );
//使用 Boolean() 方法 转换 变量中存储的数值,但是不会改变变量中存储的数值
//只是将变量中的数值,解析获取,再转换输出,不会改变变量中存储的内容
console.log( int );

字符串类型的强制转换

其他类型强制转换为字符串类型。

语法及转换原则

方法1 变量.toString(进制类型)
将数值强制转换为字符串,并且可以设定转换的进制。

.toString() 之前,不能直接写数值,必须是写成变量的形式。
进制常用的数值是 2 8 16 ，可以设定的范围是 2 - 36
进制（10个数值+26个英文字母）。最少是2进制,最多是36进制

实例

var int = 100;
// 将int 中存储的 100 数值,按照二进制转换,并且以字符串的形式来输出
// 二进制如果输出时，第一个数值 1 之前的 0 ，会不输出，对数值大小没有影响
console.log(int.toString(2));
// 八进制
console.log(int.toString(8));
// 十六进制
console.log(int.toString(16));
// ()中没有输入,默认执行十进制
console.log(int.toString());
// 进制范围是2-36
console.log(int.toString(9));

方法2 String( 变量 / 数据 )
将变量或者数据,转换为字符串。原则按照自动转换的原则来执行，不会改变变量中存储的原始数值。

实例

var int = 2e5;
console.log( String(int) );//输出结果是字符串 200000
console.log( int );        //输出结果是数值  200000

数值类型的强制转换

将其他数据类型强制转化为数值类型。

语法及转换原则

方法1 Number(变量/数值)
将其他类型强制转化为数值类型,转化原则与自动转化选择相同。

实例

console.log( Number(true) );   // 1
console.log( Number(false) );  // 0
console.log( Number(null) );   // 0

console.log( Number(undefined) );   // NaN

console.log( Number('100') );       // 对应的数值
console.log( Number('100.123') );   // 对应的数值
console.log( Number('2e4') );       // 对应的数值

console.log( Number('123abc') );    // NaN

console.log( Number( [1,2,3,4,5] ) );                       // NaN
console.log( Number( {name:'zhangsan'} ) );                 // NaN
console.log( Number( function fun(){console.log('abc')} ) );// NaN

方法2 parseInt(变量 / 数据)
是获取变量或者数据的整数部分，从数据的左侧起，解析获取整数内容。

实例

console.log( parseInt(true) );                        // 都是 NaN
console.log( parseInt(false) );                                   
console.log( parseInt(null) );                                    
console.log( parseInt(undefined) );                               
console.log( parseInt( {name:'zhangsan'} ) );                     
console.log( parseInt( function fun(){console.log('abc')} ) );

数组执行，是获取数值部分，也就是没有 [ ] 的部分。
1,2,3,4,5 整数部分是 1，1之后是逗号，逗号不是整数，之后的部分也就不算整数。
获取第一个数值的整数部分，如果有就获取，如果没有，结果是NaN。

console.log( parseInt( [1,2,3,4,5] ) );        // 结果是 1 
console.log( parseInt( [null,2,3,4,5] ) );     // 结果是 NaN

如果是整数就直接获取，如果是浮点数，或者科学计数法，就获取整数部分。

console.log( parseInt( 100 ) );       // 整数是直接获取
console.log( parseInt( 0.0123 ) );    // 浮点数是获取整数部分
console.log( parseInt( 3.123456e3 ) );// 科学计数法是解析之后,获取整数部分

字符串不同了：
如果是纯数字的字符串：

console.log( parseInt( '100' ) );         // 与数字的结果相同 
console.log( parseInt( '0.0123' ) );      // 与数字的结果相同

如果不是纯数字的字符串：

console.log( parseInt( '3.123456e3' ) ); 
console.log( parseInt( '3abc' ) );  
console.log( parseInt( '3.123' ) );  
// 现在是一个字符串,从左侧开始,找整数部分,第一个是3,第二个是点,点不是整数,因此整数部分就是3

方法3 parseFloat( 变量 / 数值 )
获取浮点数部分。

实例

console.log( parseFloat(true) );                     // 都是 NaN
console.log( parseFloat(false) );     
console.log( parseFloat(null) );      
console.log( parseFloat(undefined) ); 
console.log( parseFloat( {name:'zhangsan'} ) ); 
console.log( parseFloat( function fun(){console.log('abc')} ) );

如果是数值，整数，浮点数，都会完整获取。

console.log( parseFloat(100) );
console.log( parseFloat(100.1234) );
console.log( parseFloat(1.234567e3) );

如果是字符串，从字符串的左侧起，解析符合浮点数的部分。

console.log( parseFloat( '100' ) );         // 与数字的结果相同 
console.log( parseFloat( '0.0123' ) );      // 与数字的结果相同 
console.log( parseFloat( '3.123456e3' ) );  // 科学技术法会解析
console.log( parseFloat( '3.1223abc' ) );   // 只取左侧数字3.1223
console.log( parseFloat( '3.123' ) );       // 结果是数字3.123