小汤学编程之JavaScript学习day02——运算符、流程控制与循环、函数

一、运算符

1.算术运算符     2.一元运算符     3.关系运算符     4.逻辑运算符     5.赋值运算符     6.运算符的优先级

二、流程控制与循环

1.顺序结构     2.分支结构     3.循环结构

三、函数

1.JS中函数的特点     2.函数的定义     3.函数的调用     4.函数的参数

---

一、运算符

1.算术运算符

算术运算符	说明
+	加
-	减
*	乘
/	除
%	取余数（取模）

2.一元运算符

一元运算符	说明
++num/–num	前置运算：先自加，后返回值
num++/num–	后置运算：先返回值，后自加

3.关系运算符

又叫比较运算符， 两个数据 进行比较的运算符，会返回 一个 布尔值（true / false），作为比较运算的结果。

关系运算符	说明
< / >	小于、大于号
<= / >=	小于等于、大于等于号
==	判等号（会自动转型）
!=	不等号
===	全等号
!==	不全等号

== 判等号和 ===全等号的区别在于前者只判断值是否相等，而后者需要值与类型都相等。

4.逻辑运算符

逻辑运算符	说明
&&	逻辑与：两边都true才是true
||	逻辑或：只要有一个是true就是true
！	逻辑非：也叫做取反符

5.赋值运算符

赋值运算符	说明
=	直接赋值
+=、-=	加、减一个数后再赋值
*=、/=、%=	乘、除、取模后再赋值

6.运算符的优先级

优先级	运算符
1	()优先级最高
2	一元运算符：++、–、！
3	算术运算符：先*、/、%，后+、-
4	关系运算符：>、>=、<、<=
5	相等运算符：==、！=、===、！==
6	逻辑运算符：先&&，后||
7	赋值运算符：=、+=等

速记规律：
先一元 后二元
先算术 后关系

二、流程控制与循环

1.顺序结构

由上而下的执行代码就是顺序结构。

2.分支结构

if语法

if （条件表达式） {
	要执行的内容
}

if-else语法

if (条件表达式) {
	成立要执行的代码
}
else {
	否则要执行的代码
}

ifif-else if语法

if (条件表达式) {
	成立要执行的代码
}
else if (条件表达式2) {
	否则要执行的代码
}
else {
	否则要执行的代码
}

三元表达式

表达式1 ? 表达式2 : 表达式3

switch case结构

switch( 变量 ){ 
    case value1:
        //表达式结果 等于 value1 时 要执行的代码
        break;
    case value2:
        //表达式结果 等于 value2 时 要执行的代码
        break;
    default:
        //表达式结果 不等于任何一个 value 时 要执行的代码
}

switch与if对比

• switch…case通常处理case为比较确定值（常量）的情况，而if…else…更加灵活范围判断
• switch 进行一次条件判断后直接执行到程序的条件语句。而if…else 有几种条件，就得判断多少次
• 当只有分支比较少的时候，if效率比 switch高
• 分支比较多，是switch的效率比较高，而且结构更清晰

3.循环结构

for循环

//for 循环一般 用来 根据次数 循环 
for(初始化; 条件表达式; 自增表达式 ){
    //循环体
}

for 循环 是 循环条件和数字 直接相关的循环

双层for循环：

for (外循环的初始; 外循环的条件; 外循环的增量) {
    for (内循环的初始; 内循环的条件; 内循环的增量) {
       需执行的代码;
   	}
}

while循环

//条件表达式为 true 时重复执行循环体代码
//条件表达式为 false 退出循环
while (条件表达式) {
    // 循环体代码 
}

do…while循环

do{
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

先执行一次循环体代码，再进行条件表达式判断

跳出循环

• break —— 跳出整个循环
• continue —— 跳出本次循环

三、函数

JS中通过函数来把一段逻辑封装用来重复使用。函数式通过关键字 function 来定义的。

1.JS中函数的特点

• JS中的函数不需要定义返回类型，直接返回结果即可。
• JS中的函数参数列表不需要定义类型以及var，只需定义变量名。
• 函数需要调用才会执行，不调用是不会执行的。
• 如果定义了多个方法名相同的函数，后面会覆盖前面的。
• 函数没有重载，只要方法名相同就会去执行，不管参数列表是否匹配。

2.函数的定义

• 方式一：function 函数名（参数列表）{函数体}

function study（）{
    console.log("好好学习，天天向上。");
}

• 方式二：var 函数名 = function（参数列表）{函数体}

var study = function(){
    console.log("好好学习，天天向上。");
}

• 方式三（不推荐）：var Function(“参数名一”,“参数名儿”,…,“函数体”)

var study = new Function("name", "time","console.log(name+'每天学习'+time+'分钟');console.log('继续保持')");

3.函数的调用

• 方式一：函数名（参数值）：study("张三",180);
• 方式二：函数名.call(调用对象，参数值)：study.call(this,"张三",180 );
• 方式三：函数名.apply(调用对象，参数值数组)：方式三：函数名.apply(调用对象，参数值数组);
• 方式四：函数名.bind(调用对象，参数值)():study.bind(this,"张三",180 )();

bind会返回新的函数，需要调用才会执行，所以后面需要(),其它跟call用法一样。

4.函数的参数

JS中的参数都会封装到 arguments 中，当传入的参数多于函数定义的参数时，在函数体中可以通过这个参数拿到定义参数以外的参数值。
如：

var study = function(name , time){
    // 传统方式只能拿到定义的参数
    console.log(name);
    console.log(time);
    // 通过arguments可以定义参数以外的参数
    console.log(arguments.length);
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
    console.log(arguments[3]);
    
    console.log(name+'每天学习'+time+'分钟');
}

study("zhangsan",180,1,"a");

另外，ES6也支持类似Java中的可变长度参数：

var study = function(name , time ,  ... args){
    console.log(args);
}