JavaScript（运算符、逻辑结构、循环）——笔记整理0512

一、js里边的运算符

1、算数运算符

“ + - * / % ++ – ”
加减乘除余自增1 自减1
功能：运算（数字）

var a = 10;
var b = 20;
console.log(a + b);  //30
console.log(a - b);  //-10
console.log(a * b);  //200
console.log(a / b);  //0.5
console.log(a % b);  //10

++自增 --自减分前置和后置，前置是先自增自减再运算，后置是先运算再自增自减（指当前变量）

var a=10;
var b=20;
console.log(a+--b);  //29
console.log(a+b--);  //30
console.log(b);      //19
console.log(a+++b);   //  不带括号 默认前面 a++
console.log(a);

var a=10;
var b=20;
console.log(a+++b);   //30  不带括号 默认前面 a++
console.log(a);    //11
console.log(a+(++b));   //32

2、赋值运算符

“ = += -= *= /= %= ”

var a=10;
a += 5;  
console.log(a);  //15
a -= 5;
console.log(a);  //10
a *= 5;
console.log(a);  //50
a /= 5;
console.log(a);  //10
a %= 3;
console.log(a);  //1

3、字符串之间的运算

字符串直接+，是字符串的拼接

var s1 = "10";
var s2 = "15";
console.log(s1 + s2);  //1015
console.log(s1 - s2);  //-5
console.log(s1 * s2);  //150
console.log(s1 / s2);  //0.666666
console.log(s1 % s2);  //10
var s3=6;
console.log(s1+s3);   //106

注意两个数之间运算有字符串的问题，只要有一个字符串就是字符串的拼接

4、比较运算符和逻辑运算符

满足条件返回true，不满足返回false。

比较运算符： > < >= <= !=不等于
逻辑运算符： ||或 &&与 !非

var a = 3;
var b = 4;
var c = 2;
//    比较运算符
console.log(a > b);  //false
console.log(a < b);  //true
console.log(a >= b);  //false
console.log(a <= b);  //true
console.log(a != b);  //true

//    逻辑运算符
console.log(a > b || a > c);  //只要有一个条件true返回true  否则false
console.log(a < b && a < c);  //条件全为true返回true  否则false
console.log(!(a > b));   //非 取反面

= 赋值
==两边值一样，类型可以不一样
=== 两边值和类型都一致

var s1=10;
var s2="10";
var s3=10;
console.log(s1==s2);  //true
console.log(s1===s2);  //false
console.log(s1===s3);  //true

!== 不绝对等于，只要一个值或者类型不一致，就成立

var s1=10;
var s2="10";
var s3=5;
var s4=10;
console.log(s1!=s2);  //false
console.log(s1!==s2);  //true
console.log(s1!==s4);  //false
console.log(s1!==s3);  //true
console.log(s2!==s3);   //true

二、js里边的逻辑结构

1、if语句

逻辑结构 if 或者 if else 或者 if else if else （else if 数量不限）

if(){}

if(){}else{}

if(){}else if(){} esle{}

根据条件执行，可以相互嵌套使用。

举例：

var price = 9.8;
var num = 4;
var zhe = 1;
var totle = 0;
var way = "白条";

if (num < 5) {
    zhe *= 1
}
else {
    zhe *= 0.85;
}
totle = price * num * zhe;
console.log("总价:" + totle);

if (way) {
    //如果存在支付方式，输出：
    console.log("支付方式：" + way);
    //根据支付方式选择性优惠
    if (way == "微信支付") {
        console.log("给你优惠1元")
    }
    else if (way == "支付宝") {
        console.log("给你优惠2元")
    }
    else {
        console.log("暂时没有优惠")
    }
}

注意：

如果条件语句后边只有一句话可以简写不写{}

如：

if (false)
    console.log(1);
else
    console.log(2);

2、switch语句

switch (){
case : break;
case : break;
case : break;
default: break
}

switch 条件选择
break 跳出当前结构

例如：用户选择支付方式

var way = "微信";
var zhe = 0;
switch (way) {
    case"微信":
        zhe = 0.85
        break;
    case"支付宝":
        zhe = 0.9;
        break;
    case"白条":
        zhe = 1.2;
        break;
    case"网银":
        zhe = 0.7;
        break;
    default:
        zhe = 1;
        break;
}
console.log(zhe);

三、js里边的循环

1、for循环

语法：

for(声明变量;条件;自增或自减){

 }

最简单的for是一个死循环。

for(;;){
}

for循环举例：

以下示例中的 i 控制 for 循环的次数

for (var i = 0; i < 10; i++) {
    console.log(i);    //0 1 2 3 4 5 6 7 8 9
}

for (var i = 10; i > 0; i--) {
    console.log(i);   //10 9 8 7 6 5 4 3 2 1
}

for (var i = 0, b = 10; i < b - i; i++) {
    console.log(i);   //0 1 2 3 4
}

2、while循环

先判断，后执行


var n = 0;
while (n < 10) {
    n++;
    console.log(n);   //1 2 3 4 5 6 7 8 9 10
}

3、do while循环

先执行，后判断，至少执行一次

var m = 0;
do {
    m++;
    console.log(m);    //1 2 3 4 5 6 7 8 9 10
} while (m < 10)

var m = 10;
do {
    m++;
    console.log(m);    //11
} while (m < 10)

4、使用代码调试，看for循环的执行过程

1.到浏览器的控制台
2.点击sources栏
3.在当前栏位左边项目文件点击当前页面
4.想要看哪一行代码执行，在当前行之前单击，出现蓝色的锚标，再刷新页面
右边的调试按钮：第一个为F8 为直接运行终止；第二个按钮 F10 运行下一行（遇到方法直接执行完成，不会进方法）；第三个按钮为F11，和F10功能一样（遇到方法会进方法）
5.调试完成把定的锚标去掉

5、js里边的 break，continue

break 是用于终止循环的
continue 是用于跳过当前循环执行下次循环

break 应用示例：

for (var i = 0; i < 20; i++) {
    if (i > 10) {
        break;  //根据条件直接终止循环
    }
    console.log(i);  //0 1 2 3 4 5 6 7 8 9 10
}

continue 应用示例：

for (var i = 0; i < 100; i++) {
    if (i % 2 == 0) {
        continue;  //根据条件 跳过当前循环执行下次循环
    }
    console.log(i);  //奇数
}

四、js里边逻辑结构和循环的应用

1、打印乘法表

外循环控制行，内循环控制列

在控制台打印乘法表：

\n 换行、 \t 制表符

for (i = 1; i < 10; i++) {
    var str = "";
    for (k = 1; k <= i; k++) {
        str += i + "*" + k + "=" + i * k + "\t";
    }
    console.log(str);
}

在web页面打印乘法表：

在表达式里面使用的三元运算符
条件?true:false

for (i = 1; i < 10; i++) {
    for (k = 1; k <= i; k++) {
        document.write(i + "*" + k + "=" + i * k + (i * k < 10 ? "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" : "&nbsp;&nbsp;&nbsp;"))
    }
    document.write("<br/>")
}

2、在控制台输出菱形

固定高的菱形：
注意：

k 控制内层 for 循环的次数，str+= 是字符串的拼接，所以 k 可以控制字符串拼接的数量，即每一行中“ ”和“*”的数量。

for(var i=0;i<7;i++){
    var str="";
    if(i<=3){
        for(var k=0;k<3-i;k++){
            str+=" ";
        }
        for(var k=0;k<2*i+1;k++){
            str+="*";
        }
    }
    else{
        for(var k=0;k<i-3;k++){
            str+=" ";
        }
        for(var k=2*(7-i)-1;k>0;k--){
            str+="*";
        }
    }
    console.log(str);
}

将菱形的高定义为变量：

var h=21;
var ch=(h-1)/2;
for(var i=0;i<h;i++){
    var str="";
    if(i<=ch){
        for(var k=0;k<ch-i;k++){
            str+=" ";
        }
        for(var k=0;k<2*i+1;k++){
            str+="*";
        }
    }
    else{
        for(var k=0;k<i-ch;k++){
            str+=" ";
        }
        for(var k=2*(h-i)-1;k>0;k--){
            str+="*";
        }
    }
    console.log(str);
}