从零开始的JavaScript笔记（一）

JavaScript基本语法

一、JavaScript语句格式

1.严格区分大小写
2.JavaScript中每一条语句（;）结尾
 如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，
 而且有些时候，浏览器会加错分号，所以在开发中分号必须写。
3.JavaScript中会忽略多个空格和换行

二、字面量与变量

• 字面量
  字面量都是一些不可改变的值
  比如：1 2 3 4 5 a b c
  字面量都是可以直接使用，但是我们一般都不会直接使用字面量
• 变量
  变量可以用来保存字面量，而且变量的值是可以任意改变的
  变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量
  而很少使用字面量
  使用关键字var声明变量

	var a ;
	a = 123;
	a = 456;

三、标识符

在JavaScript中所有的可以由我们自主命名的都可以称为标识符

例如：变量名、函数名、属性名都属于标识符

命名一个标识符时需要遵守如下规则：
 1. 标识符中可以含有字母、数字、_、$
 2.标识符不能以数字开头
 3.标识符不能是ES中的关键字或保留字
 4.标识符一般都采用驼峰式命名法:
  首字母小写，每个单词的开头字母大写，其余字母小写
  例如：helloWorld xxxYyyZzz

四、数据类型

数据类型指字面量的类型

在JavaScript中一共有六种数据类型

• String 字符型
• Number 数值
• Boolean 布尔型
• Null 空值
• Undefined 未定义
• Object 对象
  其中String Number Boolean Null Undefined属于基本数据类型，而Object 属于引用数据类型

String 字符型
在JavaScript中字符串需要使用引号引起来
使用双引号或单引号都可以，但是不要混用
引号不能嵌套，双号里不能方双引号，单引号里不能放单引号
在字符串中我们可以使用\作为转义符，
当表示一些特殊字符时可以使用\进行转义

	\" 	表示"
	\'		表示'
	\n	表示换行
	\t		制表符
	\\		表示\

Number 数值

		var a = 123;
		var b = '123';
		console.log(a);	//123
		console.log(b);	//123
		console.log(typeof a);	//number
		console.log(typeof b);	//string
		console.log(Number.MAX_VALUE);	//1.7976931348623157e+308
		a = Number.MAX_VALUE * Number.MAX_VALUE;
		console.log( a);	// Infinity
		a = 'abc' * ' abc';
		console.log(a);//NaN
		console.log(Number.MIN_VALUE);		//5e-324

Number.MAX_VALUE为最大值1.7976931348623157e+308
Number.MIN_VALUE为正最小值5e-324
NaN    //NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity;   // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity,Infinity为字面量
JavaScript不能进行高精度运算
Boolean 布尔型

• 布尔值只有两个，主要用来做逻辑判断
• ture 表示真
  false 表示假
• 使用typeof检查一个布尔值时，会返回Boolean

Null 空值和Undefined 未定义

• Null类型的值只有一个，就是null
  null这个值专门用来表示一个为空的对象
  使用typeof检查一个布尔值时，会返回Object
• Undefined（未定义）类型的值也只有一个，就是undefined
  使用typeof检查一个布尔值时，会返回undefined
  当声明一个变量，但是不给变量赋值时，他的值就是undefined

五、类型转换

强制类型转换

• 指将一个数据类型强制转换为其他的数据类型
• 类型转换主要是指，将其他的数据类型，转换为
  String Number Boolean

将其他数据类型转换为String

方式一：
调用被转换数据类型的toString()方法
  该方法不会影响原变量，它会将转换的结果返回
注意 : null和undefined这两个值没有toString 如果调用他们的方法，会报错

   //调用a的toString()方法
   var a = 123;
   a = a.toString();	//ture
   
   a = ture;
   a = a.toString(); 	//ture
   
   a = null ;
   a = a.toString();	//报错
   
   a = undefined;
   a = =.toString;		//报错

方式二：
调用String()函数，并将被转换的数据作为参数传递给函数
  使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用toString()方法
  但是对于null和undefined，就不会调用toString()方法
   它会将null直接转换为“null”,将undefined直接转换为“undefined”

	var a = 123;
	a = String(a);
	a = null ;
	a = String(a);

将其他数据类型转换为Number

方式一：
使用Number()函数

• 字符串转数字
  1.如果是纯数字的字符串，则直接将其转换为数字
  2.如果字符串中有非数字的类容，则转换为NaN
  3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
• 布尔转数字
  ture 转成1
  false 转成0
• Null 转成0
• undefined 转换为NaN

	//调用Number()函数来将a转换为Number类型
	var a = 123;
	a = Number(a);	// a = 123;
	
	a = false ;
	a = Number(a);	// a = 0;

	a = null;
	a = Number(a) ;	// a = 0;

方法二：

• 这种方式专门用来处理字符串
• parseInt() 把一个字符串转换为一个整数
• parseFloat 把一个字符串转换为一个浮点数

	a = "123px";
	//调用parseInt()函数将a转换为Number
	a = parseInt(a);	//a = 123;
	/*parseInt(a);可以将一个字符串中有效的整数类容取出来，转换为Number*/
	 a = "123a567" ; //a = 123 ;
	 /*parseFloat()作用与parseInt()作用类似，不同的是它可以获得有效的小数
	 */
	 a = "123.567abc" ;
	 a = parseFloat(a) ; //a=123.456;
	/*如果对非String使用parseInt()或parseFloat()
	它会先将其转换为String然后再操作*/
	a = ture ;
	a = parseInt(a);

其他进制数字

• 十六进制

	a = 0x10 ;	//以0x开头
	a = 0xff ;
	a = 0xcafe;

• 八进制

	a = 070 ;//以0开头

• 二进制

	a = 0b10 ；//以0b开头，但IE不支持二进制

字符串转换为Number类型时的特殊情况

	var a = "070" ;
	a = parseInt(a);		/*像"070"在不同浏览器中会分别按八进制解析或按十进制解析，为解决这样的问题，可以向parseInt()中传递第二个参数，来指定数字进制*/
	a = parseInt(a,10) ;	/*此语句的含义为将a转换为十进制Number类型数值*/
	a = parseInt(a,8) ;		/*此语句的含义为将a转换为八进制Number类型数值*/

其他数据类型转换为Boolean

使用Boolean()函数

• Number值转换为Boolean 除了0和NaN都是ture
• 字符串转换为Boolean除了空串，其余都是ture
• Null和Undefined都会转换为false
• 对象也会转换为ture

	var a = 123 ; //ture
	a = -123 ; //ture
	a = 0 ; //false
	a = Infinity ; //ture
	a = NaN ; //false

六、运算符

• 运算符也叫操作符
• 通过运算符可以对一个或多个值进行运算，并获取运算结果
  比如：typeof就是运算符，可以来获取一个值的类型
  它会将该值的类型以字符串的形式返回
  number string boolean undefined object

	var a = 123 ;
	var result = typeof a ;
	console.log(result) ; //number
	console.log(typeof result) ;//string

算术运算符

当对非number类型的值进行运算时，会将这些值转换为Number然后再运算
任何值和NaN做运算结果都是NaN
+  如果对两个字符串进行加法运算，则会做拼串
    即：会将这两个字符串拼接为一个字符串，并返回
-   可以对两个值进行减法运算，并将结果返回
*   可以对两个值进行乘法运算
/   可以对两个值进行除法运算
%   取模运算（取余数）

			var a = 123;
			
			var result = typeof a;
			
			console.log(typeof result);			//string
			
			result = a + 1;
			
			result = 456 + 789;
			
			result = true + 1;					//2
			
			result = true + false;				//1
			
			result = 2 + null;					//2
			
			result = 2 + NaN;					//NaN
			
			result = "你好" + "大帅哥";			//你好大帅哥
			
			var str = "锄禾日当午，" +
					  "汗滴禾下土，" +
					  "谁知盘中餐，" +
					  "粒粒皆辛苦";				//锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆辛苦
					  
					  
			result = 123 + "1";					//1231
			
			result = true + "hello";			//truehello
			//任何值和字符串相加都会转换为字符串，并做拼串操作
			/*
			 * 我们可以利用这一特点，来将一个任意的数据类型转换为String
			 * 	我们只需要为任意的数据类型 + 一个 "" 即可将其转换为String
			 * 	这是一种隐式的类型转换，由浏览器自动完成，实际上它也是调用String()函数
			 */
			var c = 123;
			
			c = c + "";
						
			consloe.log(typeof	c);		//string
			
			//c = null;
			
			//c = c + "";
			
			
			//console.log(result);
			//console.log(typeof c);
			//console.log("c = "+c);
			
			result = 1 + 2 + "3"; 		//33(string)
			
			result = "1" + 2 + 3; 		//123(string)
			
			result = 100 - 5;			//95;
			
			result = 100 - true;		//99
			
			result = 100 - "1";			//99
			
			result = 2 * 2;				//4
			
			result = 2 * "8";			//16
			
			result = 2 * undefined;		//NaN
			
			result = 2 * null;			//0
			
			result = 4 / 2;				//0
			
			result = 3 / 2;				//1
			
			/*
			 * 任何值做- * /运算时都会自动转换为Number
			 * 	我们可以利用这一特点做隐式的类型转换
			 * 		可以通过为一个值 -0 *1 /1来将其转换为Number
			 * 		原理和Number()函数一样，使用起来更加简单
			 */
			
			var d = "123";
			
			//console.log("result = "+result);
			
			d = d - 0;					//将d隐式转换为Number类型
			
			/*console.log(typeof d);
			console.log(d);*/
			
			result = 9 % 3;				//3
			result = 9 % 4;				//2
			result = 9 % 5;				//1
			result = "9" / 1;			//9
			console.log("result = "+result);
			

一元运算符

一元运算符，只需要一个操作数

• 正号
   正号不会对数字产生任何影响
• 负号
   负号可以对数字进行负号的取反
• 对于非Number类型的值
   它会将先转换为Number，然后在运算
   可以对一个其他的数据类型使用+,来将其转换为number
   它的原理和Number()函数一样

	var a = 123;
	
	a = -a;							//-123
	
	a = true;						//1
	
	a = "18";						//18(String)
	
	a = +a;							//18(Number)
	
	/*console.log("a = "+a);
	console.log(typeof a);*/
	
	var result = 1 + +"2" + 3;		//6
	
	console.log("result = "+result);
	
	var a ="a = "+ 1 + +"2" + 3;	//"a=123"

	a = +"2";						//2(Number)
	
	console.log(typeof a);
	console.log(a);

自增和自减

• 自增 ++
  通过自增可以使变量在自身的基础上增加1
  对于一个变量自增以后，原变量的值会立即自增1
  自增分成两种：后++(a++) 和 前++(++a)
  无论是a++ 还是 ++a，都会立即使原变量的值自增1
  不同的是a++ 和 ++a的值不同
  a++的值等于原变量的值（自增前的值）
  ++a的值等于新值 （自增后的值）
• 自减 –
  通过自减可以使变量在自身的基础上减1
  自减分成两种：后–(a–) 和 前–(--a)
  无论是a-- 还是 --a 都会立即使原变量的值自减1
  不同的是a-- 和 --a的值不同
  a-- 是变量的原值 （自减前的值）
  –a 是变量的新值 （自减以后的值）

		
			var num = 10;
			console.log(num--);					//10
			num = 10;
			console.log(--num);					//9
			
			var a = 1;
			
			//使a自增1
			//a++;
			//++a;
			
			console.log(a++);					//1
			
			console.log("++a = " + ++a);		//++a=2
			
			var c = 10;
			
			//第一次c++，是在10的基础上自增
			//console.log(c++);
			
			//第二次c++，是在11的基础上自增
			c++;
			
			var d = 20;
			
			//console.log(++d);//21
			//console.log(++d);//22
			
			//20 + 22 + 22
			//var result = d++ + ++d + d ;
			console.log(result);					//64
			

逻辑运算符

JS中为我们提供了三种逻辑运算符

• ! 非
   !可以用来对一个值进行非运算
   所谓非运算就是值对一个布尔值进行取反操作，
   true变false，false变true
   如果对一个值进行两次取反，它不会变化
   如果对非布尔值进行元素，则会将其转换为布尔值，然后再取反
   所以我们可以利用该特点，来将一个其他的数据类型转换为布尔值
   可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean()函数一样

• && 与
   &&可以对符号两侧的值进行与运算并返回结果

• || 或
   ||可以对符号两侧的值进行或运算并返回结果

&&与	|| 或
两个值中只要有一个值为false就返回false，只有两个值都为true时，才会返回true	两个值中只要有一个true，就返回true如果两个值都为false，才返回false
JS中的“与”属于短路的与，如果第一个值为false，则不会看第二个值	JS中的“或”属于短路的或如果第一个值为true，则不会检查第二个值

			//如果两个值都是true则返回true
			var result = true && true;
			
			//只要有一个false，就返回false
			result = true && false;
			result = false && true;
			result = false && false;
			
			//console.log("result = "+result);
			
			//第一个值为true，会检查第二个值
			//true && alert("看我出不出来！！");
			
			//第一个值为false，不会检查第二个值
			//false && alert("看我出不出来！！");
			
			//两个都是false，则返回false
			result = false || false;
			
			//只有有一个true，就返回true
			result = true || false;
			result = false || true ;
			result = true || true ;
			
			//console.log("result = "+result);
			
			//第一个值为false，则会检查第二个值
			//false || alert("123");
			
			//第一个值为true，则不再检查第二个值
			//true || alert("123");
			
			
			
			var a = false;
			
			//对a进行非运算
			a = !a;
			
			//console.log("a = "+a);
			
			var b = 10;
			b = !!b;
			
			//console.log("b = "+b);
			//console.log(typeof b);
			

&& || 非布尔值的情况
对于非布尔值进行与或运算时，会先将其转换为布尔值，然后再运算，并且返回原值

与运算	或运算
如果第一个值为true，则必然返回第二个值	如果第一个值为true，则直接返回第一个值
如果第一个值为false，则直接返回第一个值	如果第一个值为false，则返回第二个值

			//true && true
			//与运算：如果两个值都为true，则返回后边的
			var result = 5 && 6;					//6	
			
			
			//与运算：如果两个值中有false，则返回靠前的false
			//false && true
			result = 0 && 2;						//0
			result = 2 && 0;						//0
			//false &&　false
			result = NaN && 0;						//NaN
			result = 0 && NaN;						//0
			
			
			//true || true
			//如果第一个值为true，则直接返回第一个值
			result = 2 || 1;						//2
			result = 2 || NaN;						//2
			result = 2 || 0;						//2
			
			//如果第一个值为false，则直接返回第二个值
			result = NaN || 1;						//1
			result = NaN || 0;						//0
			
			result = "" || "hello";					//"hello"
			
			result = -1 || "你好";					//-1
			
			
			console.log("result = "+result);		//result = -1
			

赋值运算符

			 	可以将符号右侧的值赋值给符号左侧的变量
			  += 
			 	a += 5 等价于 a = a + 5
			  -=
			 	a -= 5 等价于 a = a - 5
			  =
				a *= 5 等价于 a = a * 5
			  /=
			  	a /= 5 等价于 a = a / 5
			  %=
			 	a %= 5 等价于 a = a % 5
			 
			var a = 10;
			
			//a = a + 5;
			//a += 5;
			
			//a -= 5;
			
			//a *= 5;
			
			// a = a%3;
			a %= 3;
			

关系运算符

通过关系运算符可以比较两个值之间的大小关系，如果关系成立它会返回true，如果关系不成立则返回false
 > 大于号
判断符号左侧的值是否大于右侧的值
如果关系成立，返回true，如果关系不成立则返回false
 >= 大于等于
判断符号左侧的值是否大于或等于右侧的值
 < 小于号
 <= 小于等于
非数值的情况
对于非数值进行比较时，会将其转换为数字然后在比较
如果符号两侧的值都是字符串时，不会将其转换为数字进行比较
而会分别比较字符串中字符的Unicode编码

			var result = 5 > 10;//false
			
			result = 5 > 4; //true
			
			result = 5 > 5; //false
			
			result = 5 >= 5; //true
			
			result = 5 >= 4; //true
			
			result = 5 < 4; //false
			
			result = 4 <= 4; //true
			
			//console.log("result = "+result);
			
			//console.log(1 > true); //false
			//console.log(1 >= true); //true
			//console.log(1 > "0"); //true
			//console.log(10 > null); //true
			//任何值和NaN做任何比较都是false
			//console.log(10 <= "hello"); //false
			//console.log(true > false); //true
			
			//console.log("1" < "5"); //true
			//console.log("11" < "5"); //true
			
			//比较两个字符串时，比较的是字符串的字符编码
			//console.log("a" < "b");//true
			//比较字符编码时是一位一位进行比较
			//如果两位一样，则比较下一位，所以借用它来对英文进行排序
			//console.log("abc" < "bcd");//true
			//比较中文时没有意义
			//console.log("戒" > "我"); //true
			
			//如果比较的两个字符串型的数字，可能会得到不可预期的结果
			//注意：在比较两个字符串型的数字时，一定一定一定要转型
			console.log("11123123123123123123" < +"5"); //true
			

Unicode编码
在字符串中使用转义字符输入Unicode编码
\u四位编码

	console.log("\u2620");
	//在网页中使用Unicode编码&#编码; 这里的编码需要的是10进制
	<h1 style="font-size: 200px;">&#9760;</h1>
	<h1 style="font-size: 200px;">&#7811;</h1>
	

相等运算符

相等运算符用来比较两个值是否相等，如果相等会返回true，否则返回false

• 使用 == 来做相等运算
  当使用==来比则会自动进行类型转换，将其转换为相同的类型较两个值时，如果值的类型不同，然后在比较
• 使用 != 来做不相等运算
  不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false
  不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
• === 全等
  用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换
  如果两个值的类型不同，直接返回false
• !== 不全等
  用来判断两个值是否不全等，和不等类似，不同的是它不会做自动的类型转换
  如果两个值的类型不同，直接返回true

	
		false == 0; // true
		false === 0; // false
		//console.log(1 == 1); //true
		
		var a = 10;
		
		//console.log(a == 4); //false
		
		//console.log("1" == 1); //true
		
		//console.log(true == "1"); //true
		
		//console.log(null == 0); //false
		
		/*
		 * undefined 衍生自 null
		 * 	所以这两个值做相等判断时，会返回true
		 */
		//console.log(undefined == null);
		
		/*
		 * NaN不和任何值相等，包括他本身
		 */
		//console.log(NaN == NaN); //false
		
		var b = NaN;
		
		//判断b的值是否是NaN
		//console.log(b == NaN);
		/*
		 * 可以通过isNaN()函数来判断一个值是否是NaN
		 * 	如果该值是NaN则返回true，否则返回false
		 */
		//console.log(isNaN(b));
		
		//console.log(10 != 5); //true
		//console.log(10 != 10); //false
		//console.log("abcd" != "abcd"); //false
		//console.log("1" != 1);//false
		
		//console.log("123" === 123);//false
		//console.log(null === undefined);//false
		
		console.log(1 !== "1"); //true
		

条件运算符（三元运算符）

语法：条件表达式?语句1:语句2;
执行的流程：
 条件运算符在执行时，首先对条件表达式进行求值。
 如果该值为true，则执行语句1，并返回执行结果；
 如果该值为false，则执行语句2，并返回执行结果
如果条件的表达式的求值结果是一个非布尔值，会将其转换为布尔值然后在运算

			//false?alert("语句1"):alert("语句2");
			
			var a = 300;
			var b = 143;
			var c = 50;
			
			//a > b ? alert("a大"):alert("b大");
			
			//获取a和b中的最大值
			//var max = a > b ? a : b;
			//获取a b c 中的大值
			//max = max > c ? max : c;
			
			//这种写法不推荐使用，不方便阅读
			var max = a > b ? (a > c ? a :c) : (b > c ? b : c);
			
			//console.log("max = "+max);
			
			//"hello"?alert("语句1"):alert("语句2");
			

运算符的优先级
建议使用()         ps:省心且省事

七、流程控制语句

代码块
我们的程序是由一条一条语句构成的
语句是按照自上向下的顺序一条一条执行的

• 在JS中可以使用{}来为语句进行分组,
  同一个{}中的语句我们称为是一组语句，
  它们要么都执行，要么都不执行，
  一个{}中的语句我们也称为叫一个代码块
  在代码块的后边就不用再编写了
  JS中的代码块，只具有分组的的作用，没有其他的用途
  代码块内容的内容，在外部是完全可见的

流程控制语句
JS中的程序是从上到下一行一行执行的
通过流程控制语句可以控制程序执行流程，
使程序可以根据一定的条件来选择执行
语句的分类：

1. 条件判断语句
条件判断语句（if语句）：
使用条件判断语句可以在执行某个语句之前进行判断，如果条件成立才会执行语句，条件不成立则语句不执行。
语法一：
if(条件表达式){
  语句…
}
if语句在执行时，会先对条件表达式进行求值判断，

• 如果条件表达式的值为true，则执行if后的语句，
  如果条件表达式的值为false，则不会执行if后的语句。
• if语句只能控制紧随其后的那个语句,
  如果希望if语句可以控制多条语句，可以将这些语句统一放到代码块中
• f语句后的代码块不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句

			var a = 25;
			if(a > 10 && a <= 20){
				alert("a大于10，并且 a小于等于20");
			}
			

语法二：
if(条件表达式){
  语句…
 }
else{
 语句…
 }

执行流程：
 if…else语句执行时，会对条件表达式进行求值判断，
 如果值为true，则执行if后的语句
 如果值为false，则执行else后的语句

语法三：
if(条件表达式){
  语句…
 }
else if(条件表达式){
  语句…
 }
else if(条件表达式){
  语句…
 }
else if(条件表达式){
  语句…
  }
else{
 语句…
 }

执行流程:
 if…else if…else语句执行时，会自上至下依次对条件表达式进行求值判断，
 如果判断结果为true，则执行当前if后的语句，执行完成后语句结束。
 如果判断结果为false，则继续向下判断，直到找到为true的为止。
 如果所有的条件表达式都是false，则执行else后的语句

2. 条件分支语句
switch语句
语法:
switch(条件表达式){
 case 表达式:
  语句…
  break;
 case 表达式:
  语句…
  break;
 case 表达式:
  语句…
  break;
 default:
  语句…
  break;
}

执行流程：
 switch…case…语句在执行时，会依次将case后的表达式的值和switch后的表达式的值进行全等比较，
 如果比较结果为false，则继续向下比较。如果比较结果为true，则从当前case处开始向下执行代码。
 如果所有的case判断结果都为false，则从default处开始执行代码。

2.循环语句
通过循环语句可以反复执行某些语句多次
while循环
语法：
while(条件表达式){
 语句…
}

执行流程：
while语句在执行时，会先对条件表达式进行求值判断，
如果判断结果为false，则终止循环
如果判断结果为true，则执行循环体
循环体执行完毕，继续对条件表达式进行求值判断，依此类推

do…while循环
语法:
do{
 语句…
}while(条件表达式)

执行流程：
 do…while在执行时，会先执行do后的循环体，然后在对条件表达式进行判断，
 如果判断判断结果为false，则终止循环。
 如果判断结果为true，则继续执行循环体，依此类推

和while的区别：
 while：先判断后执行
 do…while: 先执行后判断
 do…while可以确保循环体至少执行一次。

for循环
语法：
for(①初始化表达式 ; ②条件表达式 ; ④更新表达式){
③语句…
}
执行流程：
 首先执行①初始化表达式，初始化一个变量
 然后对②条件表达式进行求值判断，如果为false则终止循环
 如果判断结果为true，则执行③循环体
 循环体执行完毕，执行④更新表达式，对变量进行更新。
 更新表达式执行完毕重复②

死循环

while(true){

}

for(;;){

}