值類型之間的相互轉化
轉字符串：String() | .toString() | "" + // 123..toString() | 重點是 "" +
轉數字：Number(a) | parseFloat() | parseInt() | + // +'123'
// parseFloat('3.14.15') => 3.14 | parseInt('3.14.15') => 3
轉布爾：Boolean(a)
非數字：NaN // 當一個其他類型轉化為數字類型的產物
// 任何判斷一個結果是否是NaN, isNaN(運算)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>類型轉化</title> </head> <body> 值類型之間的相互轉化 </body> <script> // number | string | boolean // 轉化為boolean var num = 10; var s = "123"; num = 0; s = ""; var b1 = Boolean(num); var b2 = Boolean(s); console.log(b1, b2); // 后期我們會在if分支結構中的判斷以及循環中的判斷中使用boolean類型, // 以上兩種情況下, 系統都會把非boolean的數據自動轉換為boolean // 0 | "" | null | undefined | NaN => false, 其他都會轉化為true // 轉化為數字類型 console.log(Number(false), Number(true), true + true); var s1 = "123"; var s2 = "3.14"; var s3 = "123abc"; var s4 = "3.14.15"; var s5 = "abc123"; // 123 3.14 NaN NaN NaN console.log(Number(s1), Number(s2), Number(s3), Number(s4), Number(s5)); var n3 = parseInt(s3); console.log(n3); var n4 = parseFloat(s4); console.log(n4); // 常用轉化的字符串一定是一個合法的數字字符串形式(s1, s2) var n1 = +s1; console.log(n1, typeof n1); console.log(+s2); // 轉化為字符串類型 var nn1 = 123; var ss1 = String(nn1); var ss2 = nn1.toString(); var ss3 = "" + nn1; console.log(ss1, ss2, ss3); // 了解 var ss4 = 123..toString(); console.log(ss4); // 弱語言類型 console.log(3 + "5"); // "35" console.log(3 - "5"); // -2 // 總結: // 1.最快轉化為數字類型 +"123" | +true // 2.最快轉化為字符串形式 "" + 123 | "" + true </script> </html>
運算符
/* 算數運算符：+ - * / % ++ -- 賦值運算符：+= -= *= /= %= 比較運算符：> < >= <= == === != !== 邏輯運算符：&& || ！ 三目運算符：結果 = 條件表達式 ? 結果1 : 結果2; */ // 1.算法運算符 // js中不區分整形和浮點型, 結果為什么就是什么 var res = 5 / 2; // 2.5 console.log(res); // 任何正整數對n取余 結果為: [0, n-1] // [1, 正無窮] % n // [1, 正無窮] % 10 => [0, 9] console.log(5 % 2); // 1 // num++ | ++num => num = num + 1; => 自增1 // ++在后先賦值再自增 | ++在前先自增再賦值 var num = 10; var r1 = ++num; console.log(r1); // ++num => re=11 | num++ => re=10 console.log(num); // 11 var a = 10; var b = a++; // a:11 b:10 var c = ++a; // a:12 c:12 console.log(a, b, c); // 12 10 12 // 2.賦值運算符 var x = 20; x += 10; // => x = x + 10 console.log(x); // 3.比較運算符 var y = 10; var z = '10'; console.log(y == z); // 只做值比較 => true console.log(y === z); // 全等: 值與類型都必須相等 => false console.log(y != z); // => false console.log(y !== z); // => ture // 4.邏輯運算符: js的邏輯運算符結果不一定為boolean類型的結果 var a1 = 10; var a2 = 20; var a3 = '10'; // 邏輯與: 條件1 && 條件2 => 全為真則真,否則為假 // 邏輯或: 條件1 || 條件2 => 全為假則假,否則為真 // 邏輯非: 非真即假,非假即真 // 邏輯運算符的短路效果 // var res1 = a1 == a3 && a2++; // => res1結果 即 a2的結果 // console.log(res1, a2); // 20, 21 // 邏輯與的短路效果, 條件1為假, 條件2就不會被執行 // var res1 = a1 === a3 && ++a2; // => res1結果 即 a2的結果 // console.log(res1, a2); // false 20 // 邏輯或的短路效果, 條件為真, 條件2就不會被執行 var res2 = a1 == a3 || a2++; console.log(res2, a2); // true 20 // 5.三目運算符：結果 = 條件表達式 ? 結果1 : 結果2; var xx = 10; var yy = '10'; // 條件滿足, 執行:前的結果1, 否則執行:后的結果2 var res = xx == yy ? "xx與yy的值相等" : "xx與yy的值不相等"; console.log(res) console.log(NaN == NaN, isNaN(NaN))
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>運算符</title> </head> <body> 運算符 <!--需求: box的內容是123,則將文字顏色修改為red,負責不做操作--> <div id="box">1234</div> <script> var box_ctx = box.innerText; // 前者滿足,則做后者操作;前者不滿足,后者被短路,不做操作 box_ctx == '123' && (box.style.color = 'red'); </script> </body> <script> // 1.算法運算符 // js中不區分整形和浮點型, 結果為什么就是什么 var res = 5 / 2; // 2.5 console.log(res); // 任何正整數對n取余 結果為: [0, n-1] // [1, 正無窮] % n // [1, 正無窮] % 10 => [0, 9] console.log(5 % 2); // 1 // num++ | ++num => num = num + 1; => 自增1 // ++在后先賦值再自增 | ++在前先自增再賦值 var num = 10; var r1 = ++num; console.log(r1); // ++num => re=11 | num++ => re=10 console.log(num); // 11 var a = 10; var b = a++; // a:11 b:10 var c = ++a; // a:12 c:12 console.log(a, b, c); // 12 10 12 // 2.賦值運算符 var x = 20; x += 10; // => x = x + 10 console.log(x); // 3.比較運算符 var y = 10; var z = '10'; console.log(y == z); // 只做值比較 => true console.log(y === z); // 全等: 值與類型都必須相等 => false console.log(y != z); // => false console.log(y !== z); // => ture // 4.邏輯運算符: js的邏輯運算符結果不一定為boolean類型的結果 var a1 = 10; var a2 = 20; var a3 = '10'; // 邏輯與: 條件1 && 條件2 => 全為真則真,否則為假 // 邏輯或: 條件1 || 條件2 => 全為假則假,否則為真 // 邏輯非: 非真即假,非假即真 // 邏輯運算符的短路效果 // var res1 = a1 == a3 && a2++; // => res1結果 即 a2的結果 // console.log(res1, a2); // 20, 21 // 邏輯與的短路效果, 條件1為假, 條件2就不會被執行 // var res1 = a1 === a3 && ++a2; // => res1結果 即 a2的結果 // console.log(res1, a2); // false 20 // 邏輯或的短路效果, 條件為真, 條件2就不會被執行 var res2 = a1 == a3 || a2++; console.log(res2, a2); // true 20 // 5.三目運算符：結果 = 條件表達式 ? 結果1 : 結果2; var xx = 10; var yy = '10'; // 條件滿足, 執行:前的結果1, 否則執行:后的結果2 var res = xx == yy ? "xx與yy的值相等" : "xx與yy的值不相等"; console.log(res) console.log(NaN == NaN, isNaN(NaN)) </script> </html>
if條件判斷
if (表達式1) {
} else if (表達式2) {
}
...
else if (表達式2) {
} else {
}
// 三種彈出框:
// alert(123); // 普通彈出框
// var res = prompt("請輸入:"); // 輸入框, 得到輸入的字符串內容
// var res = confirm("請選擇"); // 確認框, 得到true | false
// +做類型轉換
var salary = +prompt("請輸入工資:");
if (salary > 88888) {
console.log("開始還賬!");
salary -= 50000;
console.log("開始購物 30000!");
salary -= 30000; // 最少剩8888
if (salary > 10000) {
console.log("旅游!");
} else if (salary > 9000) {
console.log("花200學習!");
salary -= 200;
} else {
console.log("吃土!")
}
} else {
console.log("要求提薪");
}
// if可以省略else if, 也可以省略else
// if可以嵌套
// if(條件){ 邏輯體 } else if(條件){ 邏輯體 } else{ 邏輯體 }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>if分支結構</title> </head> <body> if分支結構 </body> <script> // 三種彈出框 // alert(123); // 普通彈出框 // var res = prompt("請輸入:"); // 輸入框, 得到輸入的字符串內容 // var res = confirm("請選擇"); // 確認框, 得到true | false var salary = +prompt("請輸入工資:"); if (salary > 88888) { console.log("開始還賬!"); salary -= 50000; console.log("開始購物 30000!"); salary -= 30000; // 最少剩8888 if (salary > 10000) { console.log("旅游!"); } else if (salary > 9000) { console.log("花200學習!"); salary -= 200; } else { console.log("吃土!") } } else { console.log("要求提薪"); } </script> </html>
循環
// 循環比較：
// 1.for: 解決已知循環次數的
// 2.while: 可以解決所有for循環可以解決的問題,也可以解決不知道循環次數但知道結束條件
// 3.do...while: 無論條件是否滿足,循環體都會被執行一次
// 語法：
for (循環變量①; 條件表達式②; 循環變量增量③) {
代碼塊④;
}
=
while (條件表達式) {
代碼塊;
}
do {
代碼塊;
} while (條件表達式);
// break：結束本層循環
// continue：結束本次循環進入下一次循環
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> </body> <script> /** * for (循環變量①; 條件表達式②; 循環變量增量③) { 代碼塊④; } */ for (var i = 0; i < 5; i++) { console.log("打氣"); } // ① ②④③ ... ②④③ ② /*while (條件表達式) { 代碼塊; } * */ var j = 0; while (j < 5) { console.log("打氣"); j++; } /* do { 代碼塊; } while (條件表達式); * */ var k = 0; do { console.log("打氣"); k++; } while (k < 5); // 循環比較 // 1.for: 解決已知循環次數的 // 2.while: 可以解決所有for循環可以解決的問題,也可以解決不知道循環次數但知道結束條件 // 3.do...while: 無論條件是否滿足,循環體都會被執行一次 var x = 0; while (x < 5) { // 0, 1, 3, 4 if (x == 2) { x++; continue; } console.log(x); x++; } // while (x < 5) { // 0, 1, 3, 4 // x++; // if (x == 3) { // continue; // } // var res = x - 1; // console.log(res); // } console.log(x); // 5 x = 0; while (x < 5) { // 0, 1, 2 if (x >= 3) { break; } console.log(x); x++; } </script> </html>
函數
// js函數的重點: 如何給事件提供功能
// 1.函數的定義
// function 函數名(形參列表) {
// 函數體;
// }
// 2.函數的調用
// var res = 函數名(實參列表);
// 3.函數的參數
// i.個數不需要統一
// ii.可以任意位置具有默認值
// iii.通過...語法接收多個值
// 4.返回值講解
// i.可以空return操作，用來結束函數
// ii.返回值可以為任意js類型數據
// iii.函數最多只能擁有一個返回值
// 5.匿名函數: 沒有名字的函數, 函數只能在定義的時候自己來調用一次, 之后在也無法被調用
// 匿名函數 自定義
(function () { // 產生具備名稱空間(局部作用域), 並且可以隨着匿名函數調用完畢, 被回收
var aaa = 1000;
console.log("匿名函數的自調用")
})()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函數</title> </head> <body> 函數 </body> <script> // 1.函數的定義 // function 函數名(形參列表) { // 函數體; // } // 2.函數的調用 // var res = 函數名(實參列表); // 3.函數的參數 // i.個數不需要統一 // ii.可以任意位置具有默認值 // iii.通過...語法接收多個值 // 4.返回值講解 // i.可以空return操作，用來結束函數 // ii.返回值可以為任意js類型數據 // iii.函數最多只能擁有一個返回值 // js函數的重點: 如何給事件提供功能 // 注: 匿名函數 // 函數定義與調用(調用可以寫在定義前) function fn1() { console.log("函數fn1"); } var res = fn1(); console.log(res); // 參數 // i.個數不需要統一 function fn2(a, b) { console.log(a, b); } fn2(10, 20, 30); fn3("abc"); function fn3() { // 不需要參數就不接收, 需要就接收 console.log("自己玩") } // ii.可以任意位置具有默認值 function fn4(a, b=10, c, d=20) { console.log(a, b, c, d); } fn4(); // undefined 10 undefined 20 fn4(100) // 100 10 undefined 20 fn4(100, 200) // 100 200 undefined 20 fn4(100, null, 200) // 100 null 200 20 // iii.通過...語法接收多個值 function fn5(...arr) { // 以數組形式接受多個值 console.log(arr) } fn5(1, 2, 3, 4, 5); // i.可以空return操作，用來結束函數 function fn6(a) { if (a == 10) { return; } console.log("參數不為10"); } fn6(10); // ii.返回值可以為任意js類型數據 function fn7() { return { name: 'egon', age: 79 } } var res = fn7(); console.log(res.age) // iii.函數最多只能擁有一個返回值 function fn8() { // return 10, true; // 了解: 將最后一個值返回 // 解決方案 return [10, true]; } res = fn8(); console.log(res); // 匿名函數 自定義 (function () { // 產生具備名稱空間(局部作用域), 並且可以隨着匿名函數調用完畢, 被回收 var aaa = 1000; console.log("匿名函數的自調用") })() </script> <script> console.log(aaa) </script> </html>