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);
}