JS学习笔记——入门基础知识总结（数据类型与简单运算）

前言

鉴于本人正在学习前端知识中，以下内容可能会有一定错误，如果能指出错误之处感激不尽，希望能与大家共同进步

一、数据类型的分类

JavaScript中数据可以按照数据类型分为数值型、字符型、布尔型、数组、对象等等类型，还可以根据数据复杂程度分为基本数据类型与复杂数据类型。
（目前我所学到的JS知识并无常量的概念，但ES6新引入了const来定义常量，通过const定义的常量值不能被更改，目前只做了解）

1、变量的概念

定义一个变量：var 变量名 = 值；
需要注意的是：
1、在JavaScript中变量只是存储这些数据的容器，
2、一个变量只能存储一个值，后来值会替换原值
3、变量命名时只能使用数字、字母、_、$，且不能以数字开头
4、变量命名时不能使用保留字与关键字
5、变量名区分字母大小写
6、建议使用语义化单词命名变量
7、建议遵守小驼峰命名规则

2、基本数据类型

1）number 数值型数据

数值型数据就是数字与NaN，NaN为特殊的数值型数据，其含义为非数字

2）string 字符串型数据

凡是被引号包裹的数据都是字符串型数据

3）boolean 布尔型数据

boolean型数据只有两个值，true（真）与false（假）

4）null 空数据类型

特殊数据类型，只有一个值null表示空

5）undefined 未定义数据类型

特殊数据类型，由null衍生而来，只有一个值undefined表示未定义

二、数据类型的判断

想要知道当前变量内所存储的数据类型可以用typeof（）函数进行判断，对于带有数字的数据有一个特别的函数 isNaN（）：
该函数输出true表示该数据不是纯数字，输出false表示该数据是一个纯数字，该函数一般用来判断字符串数据是否能转换成数字
注意：布尔值数据输出的都是false，null型数据输出也为false

<script>
		var a = 123                //Number型数据
		var b = "12s3";            //String型数据
		var c = "123";             //String型数据
		var d = true;              //Boolean型数据
		var e = false;             //Boolean型数据
		var f = null;              //Null型数据
		var g = undefined;         //Undefined型数据
	
		console.log(typeof(a));      //number
		console.log(typeof(b));      //string
		console.log(typeof(c));      //string
		console.log(typeof(d));      //boolean
		console.log(typeof(e));      //boolean
		//关于null有一个有趣的小bug如果使用typeof判断其数据类型返回的值为object，这是一个历史遗留问题有兴趣的可以自行百度了解
		console.log(Object.prototype.toString.call(f));  //[object Null]
		console.log(typeof(g));		 //undefind
	    
	    console.log(isNaN(a));     //false
	    console.log(isNaN(b));     //true
	    console.log(isNaN(c));     //false
	    console.log(isNaN(d));     //false
	    console.log(isNaN(e));     //false
	    console.log(isNaN(f));     //false
		console.log(isNaN(g));     //true
</script>

三、数据类型的转换

1、其他类型转数字

• 1）Number（）可以强制转换数据为数值型数据
  • 如果遇到不能转换的会输出NaN
  • true转换为1
  • false转换为0
  • null转换为0

<script>
   	var a = 123                //Number型数据
   		var b = "12s3";            //String型数据
   		var c = "123";             //String型数据
   		var d = true;              //Boolean型数据
   		var e = false;             //Boolean型数据
   		var f = null;              //Null型数据
   		var g = undefined;         //Undefined型数据

   		b = Number(b)        //NaN
   		c = Number(c)        //123
   		d = Number(d)        //1
   		e = Number(e)        //0
   		f = Number(f)        //0
   		g = Number(g)        //NaN
   		
   		console.log(b);      //NaN
   		console.log(c);      //123
   		console.log(d);      //1
   		console.log(e);      //0
   		console.log(f);      //0
   		console.log(g);      //NaN
</string>			

• 2）parseInt（）从第一位开始逐位转换，直到遇到非数字字符停止，第一位为非数字则输出NaN，一般用于取整

	var a = 123.45              //Number型数据
	var b = "98s7";             //String型数据
	var c = "654";              //String型数据
	var d = true;               //Boolean型数据
	var e = false;              //Boolean型数据
	var f = null;               //Null型数据
	var g = undefined;          //Undefined型数据
	var h = "32.1.2"		    //String型数据
	
	a = parseInt(a)			//123
	b = parseInt(b)         //98
	c = parseInt(c)         //654
	d = parseInt(d)         //NaN
	e = parseInt(e)         //NaN
	f = parseInt(f)         //NaN
	g = parseInt(g)         //NaN
	h = parseInt(h)			//32
	
	console.log(a);			//123 		
	console.log(b);			//98      
	console.log(c);			//654      
	console.log(d);			//NaN      
	console.log(e);			//NaN      
	console.log(f);			//NaN      
	console.log(g);			//NaN      
	console.log(h);			//32

• 3）parseFloat（）作用类似parseInt，区别在于其可识别一次小数点

		var a = 123.45                 //Number型数据
		var b = "98s7";             //String型数据
		var c = "654";              //String型数据
		var d = true;               //Boolean型数据
		var e = false;              //Boolean型数据
		var f = null;               //Null型数据
		var g = undefined;          //Undefined型数据
		var h = "32.1.2"		    //String型数据
		
		a = parseFloat(a)			//123.45
		b = parseFloat(b)         //98
		c = parseFloat(c)         //654
		d = parseFloat(d)         //NaN
		e = parseFloat(e)         //NaN
		f = parseFloat(f)         //NaN
		g = parseFloat(g)         //NaN
		h = parseFloat(h)		  //32.1
		
		console.log(a);			//123.45 		
		console.log(b);			//98      
		console.log(c);			//654      
		console.log(d);			//NaN      
		console.log(e);			//NaN      
		console.log(f);			//NaN      
		console.log(g);			//NaN      
		console.log(h);			//32.1

• 4）使用加法以外的数学运算，使用时需要注意一下几点
  • 运算符两侧必须为可运算的数字
  • 若运算式出现非数字则返回NaN
  • 不能使用加法（加法为字符串转换）

2、其他类型转字符串

• 1）变量名.toString（）将数据转换成字符串，undefined与null不可转换
• 2）Strint（）适用任何数据，强制转换为字符串
• 3）使用加法运算，且参与运算的数据需要有一个为字符串型

3、其他类型转布尔

Boolean（）输出结果一定为布尔值，需要注意：
1）Boolean（”“） 输出false
2）Boolean（0） 输出false
3）Boolean（null） 输出false
4）Boolean（undefined） 输出false
5）Boolean（NaN） 输出false

四、运算符

在JavaScript中运算符也分为数学运算符、赋值运算符、逻辑运算符、比较运算符这几类

1、数学运算符

最基本的运算符，数学上的加减乘除
+：加法运算符，只有两边都为数字时才能进行加法计算，若有字符串则进行的是字符串拼接
-：减法运算符
*：乘法运算符
/：除法运算符
%：取余符
PS.
Javascript的小数计算较弱，极其容易出现误差，本人目前还未学到其他的解决方法

2、赋值运算符

=：将等号右边的值赋值给左边的变量
+=：将自身的值加上等号右边的值再赋值给自身；即a += b 等价于 a = a + b
-=：将自身的值减去等号右边的值再赋值给自身；即a -= b 等价于 a = a - b
*=：将自身的值乘以等号右边的值再赋值给自身；即a *= b 等价于 a = a * b
/=：将自身的值除以等号右边的值再赋值给自身；即a /= b 等价于 a = a / b
%=：将自身的值对等号右边的值取余再赋值给自身；即a %= b 等价于 a = a % b

3、比较运算符（运算结果为布尔值）

= =：等于，数值相等为true，否则为false
= = =：全等于，数值与数据类型相等为true，否则为false
！=：不等于，数值不同为true，否则为false
！= =：全不等，数值与数据类型都不同为true，否则为false
>：大于，左边值大于右边值为true，否则为false
>=：大于等于，左边值大于或等于右边值为true，否则为false
<：小于，左边值小于右边值为true，否则为false
<=：小于等于，左边值小于或等于右边值为true，否则为false

4、逻辑运算符

逻辑运算符是对逻辑进行判断的运算符，一共包括或、与、非三种运算符
&&：与逻辑运算符，其一为假结果为假
||：或逻辑运算符，其一为真结果为真
！：非逻辑运算符，原先为真结果为假，原先为假结果为真

PS.
在JavaScript中若有 a&&b == false
若a为false，输出a；若a为true，b为false，输出b

5、自增自减符

++：自增符，有两种运算模式
1）++变量名；变量先在原值上加一，然后参与运算
2）变量名++：变量先用原值参与运算后，再在原值上加一
–：自增符，有两种运算模式
1）- -变量名；变量先在原值上减一，然后参与运算
2）变量名- -：变量先用原值参与运算后，再在原值上减一

五、运算符优先级

最高级：（）
一级：++，- -，！一元运算符与非逻辑符
二级：*，%，+，- 算术运算符，先乘除后加减
三级：>，>=，<，<= 关系运算符
四级：= =，！=，===，！= = 相等符
五级：&&，||逻辑运算符，先与后或
六级：=，+=，…… 赋值符