JavaScript学习笔记整理/第一阶段概述/基本语法/流程控制

//欢迎加我VX进群交流
vx账号：-Sep07

---

前言

这是作为前端开发学习JavaScript的基础知识部分的以一部分学习笔记，此记录为方便以后查阅，以及加深印象

---

一、JavaScript语言是什么

JavaScript 是一门面向对象的语言，是前端开发必须要掌握的。一个完整的JavaScript由以下三个部分构成。一、ECMAScript 二、Dom 三、Bom

JavaScript是一门解释型的语言，是由解释器（浏览器）逐行翻译并执行的。

二、使用步骤

1.JS代码的引入

JS依然分为嵌入式和链入式，一般我们我们在html文档中使用嵌入式编写JavaScript代码时需要将JavaScript代码编写在<script type="text/javascript"></script>标签中
示例：

<script type="text/javascript">
		/*
		JavaScript代码
		*/
</scripy>

但一般情况下JavaScript的代码都写在外部的JavaScript文件中，再通过<script>标签引入，但如果script标签中引入了外部的JavaScript文件，则不可以在<script>标签中在编写JavaScript代码。

---

三、JS的基本语法

1.JS中严格的区分大小写：
JavaScript是大小写敏感的语言
2.JS中的每条语句都以;结尾

1.变量

变量：可以用来保存字面量，变量的命名规则和JAVA语言相同，同样变量的命名也不能是JavaScript的保留字。
定义变量： var x; 、 var a,b,c
定义变量并赋值：var x1 = true 、var y1 = 100

• 定义变量时不需要给出变量的数据类型
• JavaScript中的变量可以重复定义
• 不使用var也可以定义变量，但会被默认为是为window对象添加了属性，如：
  name = "a"等价于window.name = "a"
• 如果定义的变量未被赋值，则系统会自动为其赋值undefind
• 一般我们以;分号为代码的结尾，也可以不添加分化，但多条代码在同一行时必须以分号分隔开。

2.数据类型

JavaScript有五种基本数据类型和一种引用数据类型；

基本数据类型
number :数值型： 十进制/八进制/十六进制
string : 字符型： ‘ ’ / " " 单引号或双引号括起来的
boolean : 布尔型： true/flase
null：空
undefind：未定义
引用数据类型
object：对象型
var a = new Number(10)

我们通常可以使用type of来检查数据类型，用法如下：

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

引用数据类型的用法：

var a = new Number(100);
//变量a储存了一个对象
var obj = {
	age:24,
	name:"zhaoxin",
};//名值对的方式声明一个对象obj

var obj1 = new  Object();
	obj1.name = "赵欣";
	obj1.age = "24";
	obj1.sex = "男";

console.log(obj.name);
console.log(obj1.sex);//控制台输出

3.算数运算符

JavaScript中的算术运算符有如下几种：

算术运算符	含义
+	两个数值相加
-	两个数值相减
*	两个数值相乘
/	两个数值相除，如果除数为0，返回Infinity无限（number型）
%	取模运算 ，取模运算时可以带小数
=	赋值运算，将右边的数值赋值到左边的变量

4.字符串运算符

运算符	含义
+	用于拼接字符串，但如果是数值与字符串拼接，则数字会被自动转换成字符型

reult = 1 + 2 + "3"
//输出结果为字符串类型的 “33”

reult = 100 -  "1"
// 99
/*输出结果为数值型的 “99”。
除了+会转换为字符串，其它的运算符“-，*，/”都会转换为数值类型。
*/

var d = "123";
d = d - 0;
//可以使用该方法将字符串转化为数值。等价于 d = Number(d),

5.关系运算符

关系运算符返回的结果是true 和 false：

运算符	含义
>	大于
<	小于
>=	大于等于
<=	小于等于
!=	不等于
!==	不等等于

关系运算符使用中遵循如下的几个原则：
1、数值之间比较大小
2、汉字之间比较Unicode编码值大小
3、字符之间比较ascii码值
4、汉字的ascii码是位数字

6.关系运算符中的== 和 ===

由于这两个比较容易混淆故分开描述：
“==” 的比较规则
先检查两个操作数的数据类型是否相同
如果相同，则比较两个数是否相等
如果不同，则先将两个数转换为相同数据类型，再进行比较

“===”的比较规则

先检查两个操作数的数据类型是否相同
若不同，直接返回false
若相同，则比较二者是否相等

7. 逻辑运算符

javascript中的逻辑运算两边的操作数，可以是任意类型的任意值

运算符	含义
!	与运算，只有当两边都是true时，结果才为true
&&	或运算，只有两边都为false时，结果才为false
||	非运算，将操作数的结果取反

! 非运算：会对布尔值进行取反操作，!!则为两次取反。如果对非布尔值进行取反操作则会将其先转换为布尔值，然后再取反。我们可以利用该特点把其它类型的值转换为布尔值。
&&与运算：JavaScript中的与运算是 短路与* 。
|| 或运算：符号两端为false则返回false，只要有一个为true则返回ture。

8.一元运算符

只需要一个操作符：
正号+ ：对数字无影响
负号- ：取反数字，对于非Number类型的值，会先转换为Number再运算，我们也可以使用一个+转换为数值：var a = '18'; a = +a;

9. 自增和自减

var a = 1;
a ++;

自增可以使变量在自身的基础上面加1或者减1，自增又分为前++和后++；
前++和后++都会使原变量自增1，但区别在于自身的值的不同。

前++：值等于原变量的值<自增前的值>
后++：值等于原变量的新值<自增后的值>

示例：

var a = 1;
	a++; 
	console.log("a = "+ a);//a的值是2
	console.log("a++ = "+ a++);//a++的值，等于自增前的值2			
var b = 1;
	++b;
	console.log("b = "+ b);//b的值是2
	console.log("++b = "+ ++b);//++b的值，等于自增后的值3

前--和 后-- 的规则与前++和后++规则一样，略。

10.三元运算符以及其它注意事项

三元运算符的语法：
<条件表达书> ?<语句1> : <语句2> ;
示例：

var max = a > b ? a : b;
//判断a是否大于b，如果成立则将a赋给变量max，否则将b赋给变量max

• 任何值和NaN做任何比较结果都是false
• 如果符号的两边都是字符串，则比较的是字符串的Unicode编码，返回的值是True/False
• 中文字符的比较没有意义
• 比较两个数字类型的字符串时一定要注意转变类型。
  console.log("123" < +"5");
  ——> true

流程控制

1.条件判断

语法：if(条件表达式)

if(a > 10){
}

如果if后面没有加{}来表示代码块，则只能控制if后面紧随其后的一条语句。

if(a > 10){
	//执行；
}else{
	//执行；
}

若条件成立执行if若条件不成立则执行else;

2.条件分支

语法：

switch(条件表达式){
case1 ://执行表达式1的内容
   	console.log("执行");
   	break;
case2://执行表达式1的内容
   	console.log("执行");
   	break;
}

switch语句执行时会依次将case：后面的表达式的值和条件表达式的值进行全等比较。
比较结果为true则执行，比较结果为false则继续进行下一个case的比较。

• 使用break可以退出switch语句。
• 如果所有执行结果都为false的情况下可以更具需要使用defult定义默认执行的语句。

3. 循环

循环执行的三要素
1、初始化表达式
2、条件表达式
3、更新表达式

while循环
循环语句会反复执行一段代码多次，语法为：

/*
while(条件表达式){
   	执行的语句;
}
*/
var  i = 1;    //初始化变量
while(i <10){    //设置循环条件
   console.log(i);
   i++;    //定义更新表达式
   }

do…while循环
与while循环的区别在于程序会首先执行一次循环体(do后面的内容），而后仔判断

for循环
for循环是编程的重点，所以掌握好for循环尤为重要
语法：

for(初始化表达式; 条件表达式; 更新表达式){
		//语句；
}

for循环的执行逻辑和java相同，先初始，再判断，仔执行，再更新，再判断，在执行，再更新。直到判断为false则跳出循环。
如果for循环中不谢表达式，只写；，此时程序会是死循环，在编程过程中我们要避免死循环的出现。
练习1：

//打印1000以内的水仙花数
for(var i = 100 ; i < 1000 ; i ++){
	var bai = ParseInt(i/100);
	var shi = ParseInt((i-bai * 100) / 10);
	var ge = i % 10
		//判断；
		if(bai * bai * bai + shi * shi + shi + ge * ge * ge = i){
			document.write(i + ' ');
			}
}

循环的嵌套 练习2：

//打印1~100之间的所有质数
for(var i = 2; i <= 100 ; i ++){
	var falg = true;
		for(var j = 2 ; j < i ; j ++){
			if( i % j == 0){
				flag = false;
				}
				console.log(i);
		}
}

4. 其它

break：退出switch/循环语句。
continue：如果条件成立，跳过当次循环。
1、不能在if语句中使用bresk和continue语句。
2、break和continue会like终止离他最近的循环语句。
程序性能测试方法
console.time()开启计时器；
console.timeEnd()停止计时器；

//欢迎加我VX进群交流
vx账号：-Sep07