前端--js基礎
阿新 • • 發佈：2021-01-20
一.js的引入
<!-- js的第一種引入方式 內嵌 (推薦) <script> // alert("js的第一種引入方式") // 瀏覽器彈出 // console.log("js的第一種引入方式") // 控制檯列印 // document.write("js的第一種引入方式") // 頁面顯示 </script> --> <!-- js的第二種引入方式 匯入 <script src="./ceshi.js"></script> --> <!-- js的第三種引入方式 事件<div onclick="alert('hello world')"> 點我 </div> --> <!-- js的第四種引入方式 行內 (不推薦) <a href="javascript:alert('hello world2')">點我</a> -->
二. 註釋變數
一.註釋
1.單行註釋
// 兩個 '//' 代表單行註釋
2.多行註釋
/**/ 把內容寫到 /*內容*/
二. 變數
var關鍵字指定當前變數的作用域,全域性或者區域性不寫var可以,預設指定全域性變數,沒有區域性的概念 var一定寫上
var a = 100 var a=1,b=2,c=3 console.log(a) console.log(b,c)
變數的命名:
var $ = "特殊的變數名" console.log($) var $a = 123 console.log($a)
三. 資料型別
/* 資料型別:分為兩大類 基本資料型別(原始型別) + 引用資料型別(複雜型別) 基本資料型別: Boolean , Number , String , null , undefined 引用資料型別: Object [Array , function , Date , RegExp] 本質上一切皆是物件*/
1.Boolean 布林型別
var a = true var a = false console.log(a,typeof(a))
2.Number數字型別
// NaN Number型別中特殊的關鍵字 => not a number /* NaN注意點: 1.NaN 和 數字不能參與運算 2.除了NaN!=任何值為真,剩下的比較都是假的 */
var a = 0b10 var a = 0o10 var a = 0x10 var a = 100 var a = 3.15 var a = 3.15e3 // Infinity 無限大 var a = 3.9e99999999999999999999999999999999999999999999999999 // -Infinity 負無限大 var a = -3.9e99999999999999999999999999999999999999999999999999 console.log(a,typeof(a))
var a = 100 - "abc" var a = NaN + 1 var a = NaN == NaN var a = NaN != NaN var a = NaN != 1 console.log(a,typeof(a))
3.字串型別
var a = 'hello js' console.log(a , typeof(a))單引號
var a = "hello \\n js" console.log(a , typeof(a))雙引號
var name = "安妮寶貝" var str = `你在麼${name} 你在幹什麼 想我了沒有` console.log(str, typeof(str))反引號+解析變數語法
四.Object 物件型別
1.字典
var obj = {} // (2)js物件(字典) var obj = {"a":1,"b":2,"c":3} // (3)新增/修改物件 obj["a"] = 100 obj["d"] = 300 console.log(obj,typeof(obj)) console.log(obj instanceof Object)
2.陣列
// (1)定義空物件(陣列) var arr = [] // (2)js物件(陣列) var arr = [1,2,3,4] // (3)新增/修改物件 arr[0] = 100 arr[4] = 3000 console.log(arr,typeof(arr)) console.log(arr[6]) console.log(arr instanceof Array , 333)
3.function函式
function func(){ console.log("func ... ") } func() console.log(func instanceof (Array,Number,Function) , 333444)
5.特別的關鍵字
// null 空(等價python中的None) var a = null; console.log(a ,typeof(a)); // undefined 未定義的 var b; var b = undefined ; console.log(b, typeof(b)) ;
五. 強制轉換Number
1.強制轉換整型:parseInt 數字開頭即可轉換,布林型轉換不了
var n = 1234 var n = "ppppp" // NaN var n = "9999" // 9999 var n = "99pppp" // 99 var n = "pp12" // NaN var n = "109.34" // 109 var n = "109.123asdfasd2" // 109 var n = "asdfasd2109.123" // NaN var n = [] // NaN var n = {} // NaN var n = true // NaN var res = parseInt(n) console.log(res,typeof(res))強轉整型
2.強轉浮點型
parseFloat 數字開頭即可轉換 , 布林型轉換不了,可保留小數 var n = 1234 // 1234 var n = "ppppp" // NaN var n = "9999" // 9999 var n = "99pppp" // 99 var n = "pp12" // NaN var n = "109.34" // 109.34 var n = "109.123asdfasd2" // 109.123 var n = "asdfasd2109.123" // NaN var n = [] // NaN var n = {} // NaN var n = true // NaN var res = parseFloat(n) console.log(res,typeof(res))強轉浮點型
3.Number
可以轉換布林型別,也可以轉換純數字字串 var n = false // 0 var n = true // 1 var n = "123" // 123 var n = "123.123" // 123.123 var n = "123sdf" // NaN var res = Number(n) console.log(res,typeof(res))型別轉換
六.強制轉換String
""" 單純的在資料兩邊套引號,表達字串 """
var str = 1000; var str = 3.434 var str = [] var str = {} var str = undefined var str = null var str = NaN var res = String(str) console.log(res , typeof(res))
七.強制轉換Boolean
// 布林值為假的7中情況 var a = 0 var a = 0.0 var a ='' var a = false var a = null var a = NaN var a = undefined /注意點 var a = [] # 真的 var a = {} # 真的 var res = Boolean(a) console.log(res , typeof(res))
八.自動型別轉換
1.Bnuber + Boolean
var res = 10 + true var res = 19.76 + true var res = 10 + 3.4 console.log(res , typeof(res))
2.Number + Boolean + String
// 對於字串的自動轉換,+號的作用是拼接 var res = true + "122" var res = 100 + "199" var res = 33 + 44 + "10" var res = 33+ "11" + 88 console.log(res , typeof(res))
3.除了+號 其他的符號都可以參與運算
var res = 100 - "199" var res = 100 / false var res = 3 * "5" var res = 3 * "abc" // NaN console.log(res ,typeof(res))
九.js的運算
1. ++ -- 遞增 遞減
// num++ 先賦值在自增 var num = 10 var res = num++; console.log(res,num) // ++num 先自增在賦值 var num = 10 var res = ++num console.log(res,num) // num-- 先賦值在自減 var num = 10 var res = num-- console.log(res,num) // ++num 先自減在賦值 var num = 10 var res = --num console.log(res,num)遞增 遞減
2. === !== && or not
// (2) === !== (全等於,不全等於) 嚴格比較兩樣東西: (1) 比較值的大小 (2)比較值的型別 var res = "1" === 1 var res = "1" !== 1 console.log(res) // (3) && => and || => or ! => not var num = 10 if(3<num && num < 5){ console.log("ok1") } if(num < 3 || num >= 10){ console.log("ok2") } var num = 0 if(!num){ console.log("ok3") }===
3.三元(目)運算子
// var res = 表示式?真值:假值 var age = 18; var res = age >= 18?"成年人":"青少年" console.log(res,typeof(res))三元運算子
十.資料型別的建立時的注意事項
var x1 = new Object(); // 一個新的 Object 物件 var x2 = new String("abcd"); // 一個新的 String 物件 var x3 = new Number(); // 一個新的 Number 物件 var x4 = new Boolean(); // 一個新的 Boolean 物件 var x5 = new Array(); // 一個新的 Array 物件 var x6 = new RegExp(); // 一個新的 RegExp 物件 var x7 = new Function(); // 一個新的 Function 物件 var x8 = new Date(); // 一個新的 Date 物件 console.log(x1,typeof(x1)) console.log(x2,typeof(x2)) // object var ceshi = "abcd" // string // 比較值的大小 var res = ceshi == x2 // 嚴格比較 : 1.大小 2.型別 var res = ceshi === x2 console.log(res)
推薦使用後者,速度更快,不會出現邏輯錯亂 (推薦)
var x1 = {}; // 新物件
var x2 = "abcd"; // 新的原始字串
var x3 = 0; // 新的原始數值
var x4 = false; // 新的原始邏輯值
var x5 = []; // 新的陣列物件
var x6 = /()/ // 新的正則表示式物件
var x7 = function(){}; // 新的函式物件
var ceshi = "abcd"
var res = ceshi == x2
var res = ceshi === x2
console.log(res)
十一. 流程控制_分支結構
var wangyongjuan = "富婆";
1.單項分支
if(wangyongjuan == "富婆"){ console.log("意味著捐很多錢") }
2.雙項分支
var wangyongjuan = '青春的小女生' if(wangyongjuan=='富婆'){ console.log('意味著娟很多錢') }else{ console.log('被娟很很多錢') }
3.多項分支
var age = 1
if(0 < age && age < 10){
console.log("兒童時代")
}else if(10 <= age && age < 18){
console.log("青少年時代")
}else if(18<=age && age < 40){
console.log("壯年時代")
}else if(40 <= age && age < 90){
console.log("廣場舞時代")
}else{
console.log("入土時代")
}
4.巢狀分支
var youfang = true; var youche = true; if(youfang){ if(youche){ console.log("富婆,老子要嫁給你~") } }
十二. switch_case
// 獲取星期幾 var date = new Date() console.log(date) var res = date.getDay() console.log(res , typeof(res)) res = "1" // switch 屬於嚴格型別比較: (1)大小 (2) 型別 switch(res){ case 1 : console.log("星期一") case 2: console.log("星期二") break; case 3: console.log("星期三") break; case 4: console.log("星期四") break; case 5: console.log("星期五") break; case 6: console.log("星期六") break; default: console.log("星期日") break; }分支結構: switch ... case ...
十三 流程控制_迴圈結構
1. for 迴圈
/* 1 2 3
for(初始值;判斷條件;自增自減的值){
code ...
}
先執行1,2,滿足條件進入到迴圈體中執行程式碼
執行一遍之後,回到3號進行自增自減
在回到2號判斷條件是否滿足
如果滿足,執行
如果不滿足,不執行,依次類推...
最後不滿足 迴圈終止;
*/
for(var i = 1;i<=100;i++){ console.log(i) } // 跳過55 for(var i = 1;i<=100;i++){ if(i == 55){ continue; } console.log(i) }
2 while 迴圈
var i = 10
while(i <=20){
if(i == 18){
break;
}
console.log(i)
i++
}
3.for(var i in Iterable){} 作用: 遍歷資料
var arr = ["耿擇時","家營和","孫翔宇","張銀","王生父"] for(var i in arr){ console.log(i) console.log(arr[i]) } console.log("<===========3===========>") // obj : 預設獲取是鍵 var obj = {"gzs":"耿擇時","jyh":"家營和","sxy":"孫翔宇"} for(var i in obj){ console.log(i) console.log(obj[i]) }
4.for(var i of Iterable){} 作用: 遍歷資料
// arr : 預設獲取的是陣列中的值 var arr = ["耿擇時","家營和","孫翔宇","張銀","王生父"] for(var i of arr){ console.log(i) } // var i of/in Iterable 都可以處理陣列和字串 for(var i of "abcdefg"){ console.log(i) }
十四.函式_引數
一 函式
1. 普通函式
//方式一 存在預載入機制,提前把函式載入到記憶體中,在執行程式碼 func1() function func1(){ console.log("我是func1") }
2.匿名函式
//匿名函式沒有預載入機制,必須先定義在呼叫 var func2 = function(){ console.log('我是func2') } func2()
3. 不推薦 (必須先定義在呼叫)
// var func3 = new Function("alert(1213);document.write(1234);console.log(55667)"); // console.log(func3,typeof(func3)); // func3()
4.箭頭函式(ES6新增瞭解)
function ceshi(x,y){ return x+y } var res = ceshi(1,2) console.log(res) var ceshi = (x,y) => {return x+y;} console.log(ceshi(3,9))
5. 閉包函式
function outer(){ var father = '王健林' function inner(){ console.log(`你的爸爸${father}`) } return inner } var func = outer() func()
二 函式的引數
1.不會報錯,區分與python
function func_new1(a,b,c){ console.log(a,b,c) } // func_new(1,2,3) func_new1() console.log(111)
2.不會報錯,區分與python
function func_new2(){
}
func_new2(1,2,3,4)
3.arguments 計算累加和
function func_new3(){ // js中arguments 相當於 python的*args收集引數 ,打包成可迭代物件 console.log(arguments) var total = 0 for(var i of arguments){ console.log(i) total += i } return total } var res = func_new3(1,2,3,5,6,7) console.log(res)
十五.函式_呼叫
function func(){ console.log("函式在執行1...") } // 1.正常呼叫 func(); // 2.函式立即執行 (普通函式) (function func(){ console.log("函式在執行2...") })(); // 3.函式立即執行 (匿名函式) (function(){ console.log("函式在執行3...") })(); // 4.函式立即執行 !function(){ console.log("函式在執行4...") }(); ~function(){ console.log("函式在執行5...") }(); +function(){ console.log("函式在執行6...") }(); -function(){ console.log("函式在執行7...") }();函式_呼叫