JavaScript：五种基本数据类型

电玩女神 2023-02-18 08:08 127阅读 0赞

**JavaScript基本类型;五种 如果六种（symbol( )）**

**1. string** : 数据外面有 ‘’ 或者 “” 把类型归类为字符串!; 可以表达任意数据，或者说任何类型数据都可以用字符串的形式表示;

var a = "hello";
        var b = 'hello';
        console.log(a);
        console.log(b);

![在这里插入图片描述][20200616153100789.png]  
**2. number** : 数字 （没有整型和浮点型的区别：整数和小数都是number类型,）

var a = 123;
        var b = 123.123;
        console.log(typeof(a));
        console.log(typeof(b));

![在这里插入图片描述][20200616153441829.png]  
**3. boolean** :只有两个表达值： true为真 , false 为假

一般用作程序逻辑的判断，控制程序的流程。

**注**： 可以将true当作1，将false当作0来使用。（面试题喜欢考的点）

console.log(true + 3) // 打印4 true被隐式转换成了1
          console.log(false - 3) //打印-3 false被隐式转换成了0

**4. undefined (未定义)** : 变量声明未赋值的时候,计算机默认变量值为 undefined;

var a;
            console.log(typeof(a));

![在这里插入图片描述][20200616154222757.png]  
**5. null (空)** : 可以通过将变量的值设置为 null 来清空变量。

var a = null;
        console.log(a);

![在这里插入图片描述][20200616155051762.png]

**6. ES6 symbol** symbol( )函数会生成一个唯一的值可以理解为Symbol类型跟字符串是接近的 但每次生成唯一的值，也就是每次都不相等。

// 定义四种状态，分别是四个Symbol，每个Symbol的值都不一样
        const color = { 
    	      red: Symbol(),
    	      green: Symbol(),
    	      pink: Symbol(),
    	      blue: Symbol()
    	    }
    	    console.log(color.red);

![在这里插入图片描述][20200616155559934.png]  
这样示例看着有点懵：看下面这个完整的案例—点击div切换背景颜色

//样式部分
    		#box { 
    		      width: 200px;height: 200px;
    		      background: red;  }
    		      
    		//页面部分
    		 <div id="box"></div>
    		 
    		//逻辑部分
    		var oBox = document.querySelector('#box')
    		    // 定义四种状态，分别是四个Symbol，每个Symbol的值都不一样
    		    const color = { 
    		      red: Symbol(),
    		      green: Symbol(),
    		      pink: Symbol(),
    		      blue: Symbol()
    		    }
    		    var flag = color.red  //默认flag值
    		    oBox.onclick = function () { 
    		      switch(flag) { 
    		        case color.red:
    		          oBox.style.background = 'green'
    		          flag = color.green
    		        break
    		        case color.green:
    		          oBox.style.background = 'pink'
    		          flag = color.pink
    		        break
    		        case color.pink:
    		          oBox.style.background = 'blue'
    		          flag = color.blue
    		        break
    		        case color.blue:
    		          oBox.style.background = 'red'
    		          flag = color.red
    		        break
    		      }
    		    }

**分析**：Symbol 的值是唯一的，所以不会出现相同值得常量，即可以保证 switch 按照代码预想的方式执行。

[20200616153100789.png]: https://img-blog.csdnimg.cn/20200616153100789.png
[20200616153441829.png]: https://img-blog.csdnimg.cn/20200616153441829.png
[20200616154222757.png]: https://img-blog.csdnimg.cn/20200616154222757.png
[20200616155051762.png]: https://img-blog.csdnimg.cn/20200616155051762.png
[20200616155559934.png]: https://img-blog.csdnimg.cn/20200616155559934.png