前端之JavaScript
1. JavaScript 發展歷史
JavaScript（通常縮寫為JS）是一種高階的、解釋型的程式語言。JavaScript是一門基於原型、頭等函式的語言，是一門多正規化的語言，它支援物件導向程式設計，指令式程式設計，以及函數語言程式設計。
它提供語法來操控文字、陣列、日期以及正規表示式等，不支援I/O，比如網路、儲存和圖形等，但這些都可以由它的宿主環境提供支援。
它已經由ECMA（歐洲電腦製造商協會）通過ECMAScript實現語言的標準化。
它被世界上的絕大多數網站所使用，也被世界主流瀏覽器（Chrome、IE、Firefox、Safari、Opera）支援。
2. JavaScript基礎語法
2.1 註釋
在JavaScript中單行註釋使用//，多行註釋/**/
// 這是單行註釋
/*
這是多行註釋的第一行，
這是第二行。
*/
2.2 變數和常量
在JavaScript中使用var和let定義變數:
- 變數必須以字母開頭
- 變數也能以 $ 和 _ 符號開頭（不過我們不推薦這麼做）
- 變數名稱對大小寫敏感（y 和 Y 是不同的變數）
var定義的都為全域性變數
let可以宣告區域性變數
宣告變數:
// 定義單個變數
> var name
> name = 'Hans'
//定義並賦值
> var name = 'Hans'
> name
'Hans'
// 定義多個變數
> var name = "Hans", age = 18
> name
'Hans'
> age
18
//多行使用反引號`` 型別python中的三引號
> var text = `A young idler，
an old beggar`
> text
'A young idler，\nan old beggar'
宣告常量:
在JavaScript中使用const定義常量
> const pi = 3.14
> pi
3.14
> pi = 3.01
Uncaught TypeError: Assignment to constant variable.
at <anonymous>:1:4
2.3 基本資料型別
值型別(基本型別)：字串（String）、數字(Number)、布林(Boolean)、對空（Null）、未定義（Undefined）、Symbol(表示獨一無二的值,ES6引入)。
引用資料型別：物件(Object)、陣列(Array)、函式(Function)。
2.3.1 Number型別
> var a = 5
> typeof a //檢視變數的型別
number
> var b = 1.3
> typeof b
number
// 不管整型還是浮點型開啟出來的結果都是number型別
/*
NaN:Not A Number
NaN屬於數值型別 表示的意思是 不是一個數字
*/
parseInt('2345') // 轉整型
2345
parseInt('2345.5')
2345
parseFloat('2345.5') // 轉浮點型
2345.5
parseFloat('ABC')
NaN
parseInt('abc')
NaN
2.3.2 String型別
> var name = 'Hans'
> typeof name
'string'
//常用方法
// 變數值長度
> name.length
4
// trim() 移除空白
> var a = ' ABC '
> a
' ABC '
> a.trim()
'ABC'
//移除左邊的空白
> a.trimLeft()
'ABC '
//移除右邊的空白
> a.trimRight()
' ABC'
//返回第n個字元,從0開始
> name
'Hans'
> name.charAt(3)
's'
> name.charAt()
'H'
> name.charAt(1)
'a'
// 在javascript中推薦使用加號(+)拼接
> name
'Hans'
> a
' ABC '
> name + a
'Hans ABC '
// 使用concat拼接
> name.concat(a)
'Hans ABC '
//indexOf(substring, start)子序列位置
> text
'A young idler，\nan old beggar'
> text.indexOf('young',0)
2
//.substring(from, to) 根據索引獲取子序列
> text.substring(0,)
'A young idler，\nan old beggar'
> text.substring(0,10)
'A young id'
// .slice(start, end) 切片, 從0開始顧頭不顧尾
> name.slice(0,3)
'Han'
// 轉小寫
> name
'Hans'
> name.toLowerCase()
'hans'
// 轉大寫
> name.toUpperCase()
'HANS'
// 分隔
> name
'Hans'
> name.split('a')
(2) ['H', 'ns']
2.3.3 Boolean布林值
在JavaScript中布林值true和false 都是小寫
""(空字串)、0、null、undefined、NaN都是false。
null和undefined
- null表示值是空，一般在需要指定或清空一個變數時才會使用，如 name=null;
- undefined表示當宣告一個變數但未初始化時，該變數的預設值是undefined。還有就是函式無明確的返回值時，返回的也是undefined。
2.3.4 Array陣列
使用單獨的變數名來儲存一系列的值。類似python中的列表。
> var array1 = [1, 2, 3, 'a','b','c']
> array1
(6) [1, 2, 3, 'a', 'b', 'c']
> console.log(array1[2]) //console.log列印類似python中的print
3
// length元素個數
> array1.length
6
// 在尾部增加元素，型別append
> array1.push('D')
7
> array1
(7) [1, 2, 3, 'a', 'b', 'c', 'D']
// 在頭部增加元素
> array1.unshift(0)
8
> array1
(8) [0, 1, 2, 3, 'a', 'b', 'c', 'D']
//取最後一個元素
> array1.pop()
'D'
> array1
(7) [0, 1, 2, 3, 'a', 'b', 'c']
//取頭部元素
> array1.shift()
0
> array1
(6) [1, 2, 3, 'a', 'b', 'c']
//切片， 從0開始顧頭不顧尾
> array1.slice(3,6)
(3) ['a', 'b', 'c']
// 反轉
> array1.reverse()
(6) ['c', 'b', 'a', 3, 2, 1]
// 將陣列元素連線成字串
> array1.join() // 什麼不都寫預設使用逗號分隔
'c,b,a,3,2,1'
> array1.join('')
'cba321'
> array1.join('|')
'c|b|a|3|2|1'
// 連線陣列
> var array2 = ['A','B','C']
> array1.concat(array2)
(9) ['c', 'b', 'a', 3, 2, 1, 'A', 'B', 'C']
// 排序
> array1.sort()
(6) [1, 2, 3, 'a', 'b', 'c']
// 刪除元素，並可以向資料組中新增新元素(可選)
> array1.splice(3,3) // 刪除元素
(3) ['a', 'b', 'c']
> array1
(3) [1, 2, 3]
> array1.splice(3,3,'A','B','C') // 刪除元素從新增新元素
[]
> array1
(6) [1, 2, 3, 'A', 'B', 'C']
/*
splice(index,howmany,item1,.....,itemX)
index:必需,必須是數字。規定從何處新增/刪除元素。
howmany: 必需。規定應該刪除多少元素。必須是數字，但可以是 "0"。如果未規定此引數，則刪除從 index 開始到原陣列結尾的所有元素。
item1, ..., itemX 可選。要新增到陣列的新元素
*/
// forEach() 將陣列的每個元素傳遞給回撥函式
> array1.forEach(function test(n){console.log(n)})
1
2
3
A
B
C
// 返回一個陣列元素呼叫函式處理後的值的新陣列
> array1.map(function(value){return value +1})
(6) [2, 3, 4, 'A1', 'B1', 'C1']
2.4 運算子
2.4.1 數學運算子
+ - * / % ++ --
> var a = 6
> var b = 3
// 加
> a + b
9
// 減
> a - b
3
// 乘
> a * b
18
// 除
> a / b
2
// 取模(取餘)
> a % b
0
// 自增1(先賦值再增1)
> a++
6
> a
7
// 自減1(先賦值再減1)
> a--
7
> a
6
// 自增1(先增1再賦值)
> ++a
7
// 自減1(先減1再賦值)
> --a
6
> a
6
//a++會先賦值再進行自增1運算，而++a會先進行自增運算再賦值,--同理
2.4.2 比較運算子
> >= < <= != == === !==
// 大於
> a > b
true
// 大於等於
> a >= b
true
// 小於
> a < b
false
// 小於等於
> a <= b
false
// 弱不等於
> a != b
true
// 弱等於
> 1 == '1'
true
// 強等於
> 1 === '1'
false
// 強不等於
> 1 !== '1'
true
/*
JS是一門弱型別語言(會自動轉換資料型別)，所以用兩個等號進行比較時，JS內部會自動先將數值型別的1轉換成字串型別的1再進行比較，所以以後寫JS涉及到比較時儘量用三等號來強制限制型別，防止判斷錯誤
*/
2.4.3 邏輯運算子
&& || !
&& 與
|| or
! 非
2.4.4 賦值運算子
= += -= *= /=
// 賦值
> var x = 3
// 加等於
> x += 2
5
// 減等於
> x -= 1
4
// 乘等於
> x *= 2
8
// 除等於
> x /= 2
4
2.5 流程控制
2.5.1 if
1， if(條件){條件成立執行程式碼}
> var x = 3
> if (x > 2){console.log("OK")}
OK
2, if(條件){條件成立執行程式碼}
else{條件不成立執行程式碼}
> if (x > 4){console.log("OK")}else{"NO"}
'NO'
3, if(條件1){條件1成立執行程式碼}
else if(條件2){條件2成立執行程式碼}
else{上面條件都不成立執行程式碼}
> if (x > 4){console.log("OK")}else if(x > 5){console.log("OK2")}else{console.log('Ha')}
Ha
2.5.2 switch
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("不在範圍")
}
不在範圍
注意:switch中的case子句通常都會加break語句，否則程式會繼續執行後續case中的語句。
2.5.3 for
// for 迴圈
for(起始值;迴圈條件;每次迴圈後執行的操作){
for迴圈體程式碼
}
for (var i = 0; i<10; i++){
console.log(i)
}
0
1
2
3
4
5
6
7
8
9
2.5.4 while
// while 迴圈
while(迴圈條件){
迴圈體程式碼
}
> var i = 0
> while(i<10){
console.log(i)
i++
}
0
1
2
3
4
5
6
7
8
9
2.5.5 break和continue
// break
for (var i = 0; i<10; i++){
if (i == 5){break}
console.log(i)
}
0
1
2
3
4
// continue
for (var i = 0; i<10; i++){
if (i == 5){continue}
console.log(i)
}
0
1
2
3
4
6
7
8
9
2.6 三元運算
> a
6
> b
3
//條件成立c為a的值，不成立c為b的值
> var c = a > b ? a : b
> c
6
// 三元運算可以巢狀
2.7 函式
1. 普通函式
> function foo1(){
console.log("Hi")
}
> foo1()
Hi
2. 帶引數函式
> function foo1(name){
console.log("Hi",name)
}
> foo1("Hans")
Hi Hans
> var name = "Hello"
> foo1(name)
Hi Hello
3. 帶返回值函式
> function foo1(a,b){
return a + b
}
> foo1(1,2)
3
> var a = foo1(10,20) //接受函式返回值
> a
30
4. 匿名函式
> var sum = function(a, b){
return a + b;
}
> sum(1,2)
3
// 立即執行函式 書寫立即執行的函式，首先先寫兩個括號()()這樣防止書寫混亂
> (function(a, b){
return a + b
})(10, 20)
30
5. 閉包函式
// 內部函式可以使用外部函式的引數，這個內部函式就是個閉包函式
var city = "BJ"
function f(){
var city = "SH"
function inner(){
console.log(city)
}
return inner
}
var ret = f()
ret()
執行結果:
SH
ES6中允許使用“箭頭”（=>）定義函式。
var f = v => v;
// 等同於
var f = function(v){
return v;
}
arguments引數 可以獲取傳入的所有資料
function foo1(a,b){
console.log(arguments.length) //引數的個數
console.log(arguments[0]) // 第一個引數的值
return a + b
}
foo1(10,20)
結果:
2 //引數的個數
10 // 第一個引數的值
30 // 返回相加的結果
注意:函式只能返回一個值，如果要返回多個值，只能將其放在陣列或物件中返回
2.8 內建物件和方法
JavaScript中的所有事物都是物件：字串、數字、陣列、日期等。在JavaScript中，物件是擁有屬性和方法的資料。
2.8.1 Date物件
> var data_test = new Date()
> data_test
Fri Feb 11 2022 21:44:43 GMT+0800 (中國標準時間)
> data_test.toLocaleString()
'2022/2/11 下午9:44:43'
> data_test.toLocaleDateString()
'2022/2/11'
> var data_test2 = new Date("2022/2/11 9:44:43")
> data_test2.toLocaleString()
'2022/2/11 上午9:44:43'
// 獲取當前幾號
> data_test.getDate()
11
// 獲取星期幾，數字表示
> data_test.getDay()
5
// 獲取月份(0-11)
> data_test.getMonth()
1
// 獲取完整年份
> data_test.getFullYear()
2022
// 獲取時
> data_test.getHours()
21
// 獲取分
> data_test.getMinutes()
44
// 獲取秒
> data_test.getSeconds()
43
// 獲取毫秒
> data_test.getMilliseconds()
290
// 獲取時間戳
> data_test.getTime()
1644587083290
2.8.2 Json物件
JSON.stringify() // 序列化, 把物件轉換成JSON字串
JSON.parse() // 反序列化，把JSON字串轉換成物件
// 序列化
> var jstojson = JSON.stringify(person)
> jstojson
'{"Name":"Hans","Age":18}'
// 反序列化
> var x = JSON.parse(jstojson)
> x
{Name: 'Hans', Age: 18}
> x.Age
18
2.8.3 RegExp物件
正則
> var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{4,7}");
> reg1
/^[a-zA-Z][a-zA-Z0-9]{4,7}/
> reg1.test("Hans666")
true
> var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/ // 推薦這種寫法使用 /正則/
> reg2
/^[a-zA-Z][a-zA-Z0-9]{4,7}/
> reg2.test('Hasdfa')
true
全域性匹配：
> name
'Hello'
> name.match(/l/)
['l', index: 2, input: 'Hello', groups: undefined]
> name.match(/l/g)
(2) ['l', 'l']
// 正規表示式的最後不加g則表示匹配成功就結束 加g表示全域性匹配
全域性匹配注意事項:
> var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/g
> reg2.test('Hasdfa')
true
>reg2.lastIndex;
6
> reg2.test('Hasdfa')
false
> reg2.lastIndex;
0
> reg2.test('Hasdfa')
true
> reg2.lastIndex;
6
> reg2.test('Hasdfa')
false
> reg2.lastIndex;
0
// 全域性匹配會有一個lastindex屬性
> reg2.test()
false
> reg2.test()
true
// 校驗時不傳引數預設傳的是undefined
2.8.4 自定義物件
就相當於是python中的字典
> var person = {'Name':"Hans", "Age":18}
> person
{Name: 'Hans', Age: 18}
> person.Name
'Hans'
> person["Name"]
'Hans'
// 也可以使用new Object建立
> var person2 = new Object()
> person2.name = "Hello"
'Hello'
> person2.age = 20
20
3. JavaScript BOM和DOM操作
BOM（Browser Object Model）是指瀏覽器物件模型，使用js操作瀏覽器。
DOM （Document Object Model）是指文件物件模型，通過它，可以訪問HTML文件的所有元素。使用js操作前端頁面。
3.1 window 物件
所有瀏覽器都支援 window 物件。它表示瀏覽器視窗。
//覽器視窗的內部高度
window.innerHeight
706
//瀏覽器視窗的內部寬度
window.innerWidth
1522
// 開啟新視窗
window.open('https://www.baidu.com')
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
// 關閉當前視窗
window.close()
// 後退一頁
window.history.back()
// 前進一頁
window.history.forward()
//Web瀏覽器全稱
window.navigator.appName
'Netscape'
// Web瀏覽器廠商和版本的詳細字串
window.navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'
// 客戶端絕大部分資訊
window.navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'
// 瀏覽器執行所在的作業系統
window.navigator.platform
'Win32'
// 獲取URL
window.location.href
// 跳轉到指定頁面
window.location.href='https://www.baidu.com'
// 重新載入頁面
window.location.reload()
3.2 彈出框
三種訊息框：警告框、確認框、提示框。
3.2.1 警告框
alert("Hello")
3.2.2 確認框
> confirm("你確定嗎?") // 點確認返回true
true
> confirm("你確定嗎?") // 點取消返回false
false
3.2.3 提示框
prompt("請輸入","提示")
如果直接點確定後端得收到提示兩個字，也可以刪除輸入自己想輸入的內容、
如果直接點取消後端收到null
3.3 計時相關
在一定時間間隔之後來執行程式碼，而不是在函式被呼叫後立即執行。我們稱之為計時事件。
// 等於3秒鐘彈窗
setTimeout(function(){alert("Hello")}, 3000)
var t = setTimeout(function(){alert("Hello")}, 3000)
// 取消setTimeout設定
clearTimeout(t)
setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 t 的變數中。假如你希望取消這個 setTimeout()，你可以使用這個變數名來指定它。
3.3.1 setInterval() 間隔指定的毫秒數不停地執行指定的程式碼
每三秒彈出 "hello" ：
setInterval(function(){alert("Hello")},3000);
取消使用clearInterval() 方法.它用於停止 setInterval() 方法執行的函式程式碼。
var t = setInterval(function(){alert("Hello")},3000);
//取消：
clearInterval(t)