JavaScript初学学习笔记1：JavaScript变量，数据类型以及显式类型转换

小灰灰 2023-02-28 08:55 16阅读 0赞

## 变量 ##

JavaScript的变量是松散类型的，所谓松散类型就是可以用来保存任何类型的数据。换句话说，每个变量仅仅是一个用于保存值的占位符而已。定义变量时要使用 var 操作符（注意 var 是一个关键字），后跟变量名（即一个标识符）

var a;//定义了一个名为 a 的变量

JavaScript 也支持直接初始化变量，因此在定义变量的同时就可以设置变量的值，如下所示：

var a = "hi";

在此，变量 a 中保存了一个字符串值"hi"。像这样初始化变量并不会把它标记为字符串类型；初始化的过程就是给变量赋一个值那么简单。因此，可以在修改变量值的同时修改值的类型，如下所示：

var a = "hi"; 
    a = 100; // 有效，但不推荐

## 数据类型 ##

JavaScript 中有 5 种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number和 String。还有 1种复杂数据类型——Object，Object 本质上是由一组无序的名值对组成的。JavaScript不支持任何创建自定义类型的机制，而所有值最终都将是上述 6 种数据类型之一。  
undefined 派生于 null 因此用 “==”来比较时候 会返回true

### typeof操作符 ###

鉴于 JavaScript 是松散类型的，因此需要有一种手段来检测给定变量的数据类型——typeof 就是负责提供这方面信息的操作符

console.log(typeof("123")); 
    console.log(typeof("Hello"));
    console.log(typeof("false"));
    //均为string
    
    console.log(typeof(10));
    console.log(typeof(10.24));
    console.log(typeof(NaN));
    console.log(typeof(Infinity));
    //均为number
    
    console.log(typeof(true));
    console.log(typeof(false));
    //均为boolean
    
    console.log(typeof( [] ));
    console.log(typeof( {
        } ));
    console.log(typeof( null ));
    //均为object
    
    console.log(typeof( function(){
        } ));
    //为function
    
    console.log(typeof( ID ));
    var a;
    console.log(typeof( a ));
    //均为undefined

控制台输出  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70]  
注意：  
typeof 是一个操作符而不是函数，因此例子中的圆括号尽管可以使用，但不是必需的。  
下面两段代码是等价的

console.log(typeof("123")); 
    console.log(typeof "123" );

## 显类型转换 ##

Number(mix)
    parseInt(string,radix)
    parseFloat(string)
    toString(radix)
    String(mix)
    Boolean()

### Number ###

var a = Number("123");
    console.log(typeof(a) + " : " + a);
    
    var b = Number(true);
    console.log(typeof(b) + " : " + b);
    
    var c = Number(false);
    console.log(typeof(c) + " : " + c);
    
    var d = Number(null);
    console.log(typeof(d) + " : " + d);
    
    var e = Number(undefined);
    console.log(typeof(e) + " : " + e);
    
    var f = Number("abc");
    console.log(typeof(f) + " : " + f);
    
    var g = Number("123abc");
    console.log(typeof(g) + " : " + g);

控制台输出  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 1]  
Number()显式类型转换，必定会转换成number类型，而不能转化成数字的，就转化成NaN（Not a Number）  
这里几个转化成NaN的例子需要记忆一下

### parseInt ###

无基底  
即parseInt（string）

console.log(parseInt(123));
    console.log(parseInt(123.9));
    console.log(parseInt("123"));
    console.log(parseInt("123.5"));
    console.log(parseInt("123.5.9"));
    console.log(parseInt("abc"));
    console.log(parseInt("123.8abc"));
    console.log(parseInt(true));
    console.log(parseInt(false));
    console.log(parseInt(undefined));

输出  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 2]  
含基底  
即parseInt（string，radix）  
（radix 的 范围一般是 2~36）  
把string 按照 radix 表示的进制为基底，转化成10进制整数

console.log(parseInt(10,16));
    console.log(parseInt("A",16));
    console.log(parseInt(1000,2));

控制台输出  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 3]

### parseFloat ###

parseFloat(string) 就比较简单，就不做解释了

### String ###

String这个函数耶比较简单，也就不做解释了

console.log(String(16) + " : " + typeof(String(16)));
    console.log(String(true) + " : " + typeof(String(true)));
    console.log(String(undefined) + " : " + typeof(String(undefined)));
    console.log(String(null) + " : " + typeof(String(null)));

控制台输出  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 4]

### Boolean ###

记住下面7个，除了这 7个 其他值通过 Boolean转化都是true

console.log(Boolean(""));
    console.log(Boolean(null));
    console.log(Boolean(undefined));	
    console.log(Boolean(0));
    console.log(Boolean(-0));
    console.log(Boolean(false));
    console.log(Boolean(NaN));

控制台输出  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 5]

### toString ###

toString（radix） 也是想把变量转化成字符串

var demo = 123;
    var a = demo.toString();
    console.log(a + " : " + typeof(a));

![在这里插入图片描述][20200719105851462.png]  
这点和String 转化比较类似，但使用方法不同

这里介绍下不同之处

toString(radix) 含有radix 可以作为基底，  
将 待转化的数 转化成 radix 进制的数以string来保存  
它的使用方法如下

var demo1 = 16;
    var a = demo1.toString(2);
    console.log(a + " : " + typeof(a));
    //将16 转化成二进制数
    
    var demo2 = 17;
    var b = demo2.toString(16);
    console.log(b + " : " + typeof(b));
    //17转化成16进制数
    
    var demo3 = 15;
    var c = demo3.toString(16);
    console.log(c + " : " + typeof(c));
    //15转化成16进制数

控制台输出如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 6]  
同时，null 和 undefined 是不能使用toString的  
来一题看看

console.log(typeof(a));//输出undefined
    console.log(typeof(typeof(a)));//输出为什么？

答案是 **string**

Ps:若有错误，欢迎指出

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70]: /images/20230209/c77e01a71b2d4632b8e5d348ab84531f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200718232121995.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200719103724274.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200719104230821.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200719104911223.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200719105506683.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ==,size_16,color_FFFFFF,t_70
[20200719105851462.png]: https://img-blog.csdnimg.cn/20200719105851462.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200719110749857.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ==,size_16,color_FFFFFF,t_70