JavaScript基礎語法（二）-有解無憂

運算子

條件判斷

回圈

JS斷點除錯

傳送門 ——> JavaScript基礎語法（一）、JavaScript之陣列與函式（三）、JavaScript之物件（四）、JavaScript階段二之Web APIs

運算子

運算子( operator )也被稱為運算子，是用于實作賦值、比較和執行算數運算等功能的符號，

JavaScript中常用的運算子有∶

算數運算子
遞增和遞減運算子
比較運算子
邏輯運算子
賦值運算子

1. 算數運算子

就是 + - * 、 %（取余/模），比較簡單，就不說了，浮點數運算會有點小問題

浮點數值的最高精度是17位小數，但在進行算術計算時其精確度遠遠不如整數，

var result = 0.1 + 0.2; //結果不是0.3，而是：0.3000000o000000004
console.log (0.07* 100); //結果不是7，而是：7.000000000000001

所以∶不要直接判斷兩個浮點數是否相等!

2. 遞增和遞減運算子

在JavaScript中，遞增（++）和遞減(-- )既可以放在變數前面，也可以放在變數后面，放在變數前面時，我們可以稱為前置遞增（遞減）運算子，放在變數后面時，我們可以稱為后置遞增（遞減）運算子，

變數++ 先運算，再自加1
++變數 先自加1，再運算

<script>
	//前置++，先加1后賦值
	var a = 10;
	var b = ++a       //a的值先加1變成了11，再賦值給b，所以b和a的值都為11
	console.log(a);   //11
	console.log(b);  //11

	//后置++，先賦值后加1
	var a = 10;
	var b = a++       //先把a的值賦給b，再執行a加1，所以b為10，a為11
	console.log(a);   //11
	console.log(b);  //10
</script>

和php中的自增自減運算子一樣

3. 比較運算子

比較運算子（關系運算子）是兩個資料進行比較時所使用的運算子，比較運算后，會回傳一個布林值( true / false )作為比較運算的結果，

3. 邏輯運算子

邏輯運算子是用來進行布林值運算的運算子，其回傳值也是布林值，后面開發中經常用于多個條件的判斷，

&& 邏輯與 and
|| 邏輯或 or
！邏輯非非

短路運算（邏輯中斷)

短路運算的原理∶當有多個運算式(值)時，左邊的運算式值可以確定結果時，就不再繼續運算右邊的運算式的值;

1.邏輯與

語法：運算式1&&運算式2
如果第一個運算式的值為真，則回傳運算式2
如果第一個運算式的值為假，則回傳運算式1

<script>
	console.log(1 && 23);   //輸出23
	console.log(0 && 23);   //輸出0
	console.log(0 && 23+23 & 23 * 23);  //輸出0，因為第一個運算式為假，所以直接回傳運算式1
</script>

2. 邏輯或

如果第一個運算式的值為真，則回傳運算式1
如果第一個運算式的值為假，則回傳運算式2

<script>
	console.log(1 || 23);   //輸出1
	console.log(0 || 23);   //輸出23
	console.log(0 || 23+23 || 23 * 23);  //輸出46，因為第一個運算式為假，所以就回傳運算式2值，運算式2為真，所以直接回傳運算式2
	console.log(0 || 23+23 && 23 * 23); //輸出529，0||23 》 0，0 && 23*23 》529
</script>

<script>
	var num = 0;
	console.log(123 || num++);  //輸出123，因為第一個運算式為真，就中斷了，后邊num++就不執行
	console.log(num);           //輸出0
</script>

4. 賦值運算子

4. 運算子優先級

流程控制

流程控制就是來控制我們的代碼按照什么結構順序來執行

流程控制主要有三種結構，分別是順序結構、分支結構和回圈結構，這三種結構代表三種代碼執行的順序，

條件判斷

JS語言提供了兩種分支結構陳述句

if陳述句
switch陳述句

if陳述句

和php中的if陳述句一模一樣

<script>
	if(1){
		console.log('你好');  //輸出你好
	}else{
		console.log('不好');
	}
</script>

多分支陳述句，php中是elif

<script>
	if(0){             //如果第一個運算式為true，則執行陳述句1，然后后面的陳述句不再執行，退出分支陳述句
		console.log('你好');  
	}else if(1){
		console.log('不好');    //輸出不好
	}else{
		console.log('和和')
	}
</script>

案例1

根據輸入的不同分數，判斷分數等級

<script>
	var score = prompt("請輸入您的分數");
	if(score >= 90){
		alert('寶貝，你真棒')
	}else if(score >= 80){
		alert('寶貝，還很不錯呦')
	}else if(score >= 60){
		alert('繼續加油')
	}else if(score < 60){
		alert('垃圾')
	}
</script>

三元運算式

三元運算式也能做一些簡單的條件選擇，有三元運算子組成的式子稱為三元運算式

語法結構如下：

條件運算式 ？ 運算式1 ：運算式2

如果條件運算式為真，則回傳運算式1的值，否則回傳運算式2的值，和php中的三元運算式一樣

例子1：

<script>
	var num = 5;
	var result = num > 10 ? '是的' : '不是的';
	console.log(result);     //輸出不是的
</script>

三元運算式和if else的結構差不多，

switch陳述句

switch陳述句也是多分支陳述句，它用于基于不同的條件來執行不同的代碼，當要針對變數設定一系列的特定值的選項時，就可以使用switch

運算式會有一個回傳值，將回傳值依次與value值進行匹配，匹配到哪個就執行對應的case中的陳述句，然后break退出整個switch陳述句，如果都沒有匹配上則執行defalut中的陳述句

switch(運算式){    //switch是轉換 開關的意思，case選項的意思
    case value1:
        執行陳述句1;
        break;
    case value2:
        執行陳述句2;
        break;
    ...
    default:
        執行最后的陳述句;
}

例子：輸入數字為1或者2則彈出輸入的數字為1或2，否則彈出啥也不是

<script>
	var num = prompt('請輸入一個數字: ');
	switch(Number(num)){
		case 1:
			alert('你輸入的數字為1');
			break;
		case 2:
			alert('你輸入的數字為2');
			break;
		default:
			alert('啥也不是');
			break;
	}
</script>

如果陳述句中沒有break了？則繼續會執行下一個case陳述句中的陳述句（不管有沒有匹配上），直到碰到break

<script>
	var num = prompt('請輸入一個數字: ');
	switch(Number(num)){
		case 1:
			console.log('你輸入的數字為1');
			//break;
		case 2:
			console.log('你輸入的數字為2');
			//break;
		default:
			console.log('啥也不是');
			break;
	}
</script>

我輸入一個1

switch陳述句和if else if 陳述句的區別

一般情況下，它們兩個陳述句可以相互替換

switch...case陳述句通常處理case為比較確定的值的情況，而if..else...陳述句更加靈活，常用于范圍判斷(大于、等于某個范圍)
switch陳述句進行條件判斷后直接執行到程式的條件陳述句，效率更高，而if..else陳述句有幾種條件，就得判斷多少次，
當分支比較少時，if...else陳述句的執行效率比switch陳述句高，
當分支比較多時，switch陳述句的執行效率比較高，而且結構更清晰，

回圈

和php中的回圈陳述句一樣，在Js中，主要有三種型別的回圈陳述句:

for回圈
while回圈
do...while回圈

for回圈

<script>
	for(var i =1; i<10; i++){    //當i小于10的時候執行回圈體里的陳述句，然后i再加1,接著再判斷i是否小于10
		console.log('媳婦，我錯了')   //輸出9個
	}
</script>

while回圈

while(運算式){      //當運算式值為真，則執行回圈體，否則退出回圈
  回圈體;
}

例子1：

<script>
	var i =1;
	while(i<10){
		console.log('你好啊');  //輸出9個你好啊
		i++;
	}
</script>

例子2：

彈出一個輸入框，問你愛我嗎？如果輸入的不是我愛你則一直彈窗詢問你愛我嗎

<script>
	var word = prompt('你愛我嗎？')
	while(word!="我愛你"){
		var word = prompt('你愛我嗎？');
	}
	alert('我也愛你啊')  //如果輸入我愛你，則彈窗我也愛你
</script>

do while回圈

<script>
	do{
		//回圈體
	}while(條件運算式)
</script>

while與do while的區別是：

while先判斷再執行回圈體
do while先執回圈體行再判斷，do while至少會執行一次回圈體

<script>
	var i = 1;
	do{
		console.log('美女')   //輸出9次
		i++;
	}while(i<10)
</script>

beak和continue區別（和python、php中的一樣）：

break：直接跳出整個回圈
contine：只是跳出當次回圈，然后回傳開頭繼續接著下次回圈

continue例子

<script>
	for(var i = 1; i <= 5; i++){
		if(i == 3){     //當i=3時，退出當前回圈，執行i++
			continue;
		}
		console.log('我正在吃第'+i+'個包子');
	}
</script>

JS斷點除錯

斷點除錯是指自己在程式的某一行設定一個斷點，除錯時，程式運行到這一行就會停住，然后你可以一步一步往下除錯，除錯程序中可以看各個變數當前的值，出錯的話，除錯到出錯的代碼行即顯示錯誤，停下，

斷點除錯可以幫我們觀察程式的運行程序

如何除錯？瀏覽器中按F12--> sources -->找到需要除錯的檔案-->在程式的某一行設定斷點

Watch:監視，通過watch可以監視變數的值的變化，非常的常用，
F11:程式單步執行，讓程式一行一行的執行，這個時候，觀察watch中變數的值的變化，

代碼除錯的能力非常重要，只有學會了代碼除錯，才能學會自己解決bug的能力，初學者不要覺得除錯代碼麻煩就不去除錯，知識點花點功夫肯定學的會，但是代碼除錯這個東西，自己不去練，永遠都學不會，

如，我們對如下代碼進行除錯

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>js練習</title>
</head>
<body>
<script>
	for(var i =1; i<10; i++){    //當i小于10的時候執行這里面的陳述句，然后i再加1,接著再判斷i是否小于10
		console.log('媳婦，我錯了')   //輸出9個
	}
</script>
</body>
</html>

1. 添加斷點

如下在瀏覽器中點擊除錯器，在想要除錯的代碼左側行號單擊，然后再重繪瀏覽器

2. 單步執行

如下，還能看到變數的變化程序

3. 關閉除錯

怎么添加的斷點就怎么關閉，

感謝黑馬程式員分享的web前端視頻：https://www.bilibili.com/video/BV1ux411d75J?p=14

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/293369.html

標籤：其他

上一篇：手把手搞懂JavaScript陣列的常用API

下一篇：vue模擬資料，資料互動