第一周JS知识梳理

day1

1.JavaScript概述：

简称JS，是运行在客户端浏览器端的解释型（直接运行碰到错误就停止）弱类型（由数据决定了数据的类型）面向对象脚本语言

2.如何使用JS

01.使用方式：

	a.内部写法：
		<script>JS代码</script>

	b.外部引入：
		创建xx.js，在其中写入你的JS代码，在HTML进行引入：<script src="js路径"></script>

02.输出的方式：

	a.在控制台输出：console.log();
	b.在页面上输出：document.write();//支持标签，但是在某的情况下会将页面原有的内容全部替换掉
	c.在警告框输出：alert();//有时候会卡住页面，用户只能看到白板

03.变量（可变化）和常量（创建后不允许修改）

	var 变量名=值;
	const 常量名=值;
	

04.数据类型：

	a.原始/基本/值类型：Number、String、Boolean、Undefined、Null

	b.引用/对象类型：11个等待我们学习，到时候会学很多很多的属性和方法

05.运算符：

算术运算：+ - * / %

		特殊：
			a.%取余	5%2->1
			b.隐式转换：默认转为数字在运算
				true->1
				false->0
				undefined->NaN
				null->0
				"100"->100
				"10x0"->NaN
				NaN：是一个数字，但是不在有效范围内，不知道他到底是多少，带来了2个缺点：
					1、参与任何算术运算，结果仍为NaN
					2、参与任何比较运算，结果都为false
			c.+运算，碰到上一个字符串，两边都会转为字符串，变为拼接操作

比较/关系运算：>,<,>=,<=,==,!=,===,!==

		隐式转换：默认转为数字在比较
		特殊：
			a.左右两边都是字符串，则按位PK每个字符的unicode号（ascii码）
				数字<大写<小写<汉字

			b.NaN参与任何比较运算，结果都为false，为我们带来了一个问题，没有办法使用普通的比较运算来判断x是不是NaN
				!isNaN(100);->此方法也具有数字的隐式转换，只要能够被隐式转换为数字，都可以直接放进去
				true->说明是一个有效数字
				false->说明是一个NaN

			c.undefined==null;//true
				区别：undefined===null;
				不带有隐式转换的等值比较，要求不光数据类型要相同，数值也要相同

逻辑运算：综合比较，一个条件可能搞不定

		&&：全部条件都满足，最后就满足
		         只要一个条件不满足，最后就不满足

		||：全部条件都不满足，最后不满足
		         只要一个条件满足，最后就满足

		!：颠倒布尔值

赋值运算：= += -= *= /= %=，一句话完成两个操作，先运算再赋值

		i+=1;//i=i+1

自增和自减：++ --

		i++//i+=1;//i=i+1

		鄙视题：
			前++和后++的区别？
			单独使用没有区别
			但是如果参与了别的表达式，返回的结果不一样
				前++返回的是新值
				后++返回的是旧值

	位运算：
		8<<5;//8*2的5次方
		8>>5;//8/2的5次方
		底数只能是2
                    

扩展：

用户输入框： var user=prompt("提示文字")

day2

1、分支结构：

通过条件的判断，选择部分代码执行 - 3类

01.*if分支：性能差一些

	一个条件一件事，满足就做，不满足就不做
		if(条件){
			操作;
		}

	一个条件两件事，满足就做第一件，不满足就做第二件
		if(条件){
			操作;
		}else{
			默认操作;
		}

	多个条件做件事，满足谁就做谁
		if(条件1){
			操作1;
		}else if(条件2){
			操作2;
		}else{
			默认操作;
		}

02.*switch分支：一定要知道结果是什么，才可以使用

	switch(变量/表达式){
		case 值1:
		操作1;
		break;
		case 值2:
		操作2;
		break;
		default:
		默认操作;
	}

03.*三目运算：简化【简单的】分支 - 操作只能有一句话的时候才推荐使用，但是以后往往操作可能就只有一句话

             短路逻辑：条件&&(操作);	   ===	if...
	
	条件?操作:默认操作;	    ===	 if...else...

	条件1?操作1:条件2?操作2:默认操作;	===	if...else if...else...		

2、强制数据类型转换：

因为隐式转换有时候满足不了我们 - 比如："15ABd"*2=NaN 页面上一切数据默认都是一个字符串 3类：

1、转字符串：

	x.toString();//x不能是undefined和null，undefined和null不能使用.去做任何操作（因为他们俩不是对象）
	String(x);//万能的，但是绝对不要手动使用，因为完全等效于隐式转换，也是我们隐式转换底层的原理，还不如+""

2、*转数字

	parseInt(str/num);
	parseFloat(str);
	执行原理：从左向右，依次读取每个字符，碰到非数字字符则停止转换，如果一来就不认识则为NaN，Int不认识小数点，Float认识第一个小数点

	Number(x);//万能的，但是绝对不要手动使用，因为完全等效于隐式转换，也是我们隐式转换底层的原理，还不如-0 *1 /1

3、转布尔

	Boolean(x);//万能的，但是绝对不要手动使用，因为完全等效于隐式转换，也是我们隐式转换底层的原理，还不如!!x
	***只有6个人会为false：0,"",undefined,null,NaN,false - 其余都是true
	不管以后再循环和分支的条件里写什么，你只需要判断为不为true

day3

1、*****循环结构：

循环结构：反复执行 相同 或 相似的操作
	循环三要素：
		1、循环条件：开始 - 结束，循环的次数
		2、循环体：你要做的操作
		3、循环变量：记录着我们当前在哪一次，而且他会不断的变化，变化往往都是向着不满足循环条件前进的

2、3种循环：

1、while循环：

	语法：
		var 循环变量=几;
		while(循环条件){
			循环体;
			循环变量变化;
		}
	执行原理：首先创建出循环变量，判断循环条件，如果条件满足，则执行【一次】循环体操作，并不会退出循环，而会回过头再次判断循环条件满不满足，如果满足，则执行【一次】循环体操作.........直到循环条件不满足，才会退出循环
	宏观上感觉循环好像是一瞬间就结束了（其实因为浏览器的执行速度快），但是微观上循环其实是【一次一次】执行的！
	
	特殊：
		1、有的时候可能真的需要使用死循环：默认永远不会停止的循环
			何时使用：【不确定循环次数的时候】
			while(1){操作}

		2、死循环其实也有一天会停下来，如果停不下来，那么我们后续全部都要卵了：
			break - 退出整个循环 - 多半都是用于配合死循环使用的
			continue - 退出本次循环 - 还会执行下一次操作

2、*for循环：

    和while的原理是一样的，但是他比while看上去更加的简洁，更加的舒服，那while能做的事，for也可以去完成
	语法：
		for(var 循环变量=几;循环条件;循环变量变化){
			循环体;
		}

	特殊：
		死循环：for(;;){操作}

	面试题：while 和 for 的区别？
		while 和 for在原理上来说几乎没有区别
		一般我们不确定循环次数的时候会使用while循环 - 死循环
		一般我们确定循环次数的时候推荐for循环 - 大部分情况都是他

3、do...while循环：

    垃圾：while我们都不想使用，更不要说更复杂的do...while了 - 今日一见，此生无缘
	语法：
		var 循环变量=几;
		do{
			循环体;
			循环变量变化;
		}while(循环条件)

	面试题：while 和 do...while 的区别？
		区别只看第一次，如果第一次条件都满足，那么两者没有区别
		如果第一次条件都不满足，while一次都不会执行，而do...while至少会执行一次

以后我们可能还会遇到别的循环：for in、for of、forEach、map，，他们是专门为数组准备的，并不能自己设置从哪里开始，到哪里结束，纯自动化的

---

2、*****Function的基础：

超级重要，我们起码要学3次才能把他学完整

1、概念：Function - 函数，也称之为方法，先【预定义】好，以后可以【反复使用】的【代码段】

2、如何使用函数：2步
    
	1、定义/创建/声明：
		function 函数名(){
			函数体/代码段;
		}

	2、调用函数：2种
		1、在JS内部写：函数名() - 程序员写几次就会调用几次

		2、在HTML页面上绑定事件：
			<elem onclick="函数名()"></elem> - 任何元素都可以绑定点击事件

	3、我们以后何时使用函数呢？
		1、不希望打开页面立刻执行
		2、希望由用户来触发 - 提升用户的体验感
		3、以后每一个独立的功能（作业）都要封装为一个函数
		4、函数的地位很高，是第一等公民地位

	4、但是我们发现我们目前学过的函数好像和前辈们提供的不太一样
		一阶段我们就已经见过函数了
			rotate(360deg);
			url(2.jpg);
			这种写法叫做带参数的函数：2步
				1、创建出带有形参的函数：其实就是一个变量，只不过不需要写var，而且不需要赋值，所以称之为叫做形式参数，简称形参
					function 函数名(形参,...){
						函数体/代码段;
					}
				
				2、使用带参数的函数时，记得要必须传入实参 - 实际参数，就是你传递过去的值！	
					函数名(实参,...)		
				
				注意：传参的时候顺序是不能乱的，必须和形参的顺序一一对应上，数量也不要多也不要少

	总结：没有谁好谁坏这种说法
		1、不带参数的函数，用于执行一些固定操作
		2、带参数的函数，可以根据我们传入的实参的不同，执行的操作略微不同

总结：循环也可以反复执行，函数也可以反复执行，他们的区别在哪里？时机不同 1、循环：几乎是一瞬间就执行完毕了 2、函数：需要调用后才会执行