前端開發之JavaScript
目錄
一、JavaScript簡介
Javascript（簡稱‘JS’）,是一門解釋型程式語言，主要用於Web、和瀏覽器中網頁中的動態渲染
是一門前端工程師的程式語言，相比於python它的邏輯並不是那麼嚴謹
二、JS基礎
語法註釋
單行註釋
//註釋內容
多行註釋（與css註釋相同）
/*註釋內容*/
引入JS的多種方式
1、<head>標籤內<script>標籤內編寫
2、<haed>標籤內<script>標籤src屬性引入外部JS資源
3、<body>標籤內最底部透過<script>標籤src屬性引入外部JS資源（最常用）
網頁的載入順序是由上至下，所以操作標籤的JS程式碼一定要等待標籤載入結束後執行
結束符
分號 ;
JavaScript中的語句要以分號（;）為結束符。
編寫JS程式碼的方式
1、瀏覽器 （零時使用）
開啟瀏覽器，右鍵檢查，在console內部編寫
2、pycharm建立JS檔案或者HTML檔案
適合編寫較為複雜的JS程式碼（便於長久儲存）
三、變數與常量
變數
-
變數的宣告：
- 在JS中宣告變數需要用到關鍵字var或let（let 是ECMA6新語法）
- JavaScript的變數名可以使用_，數字，字母，$組成，不能以數字開頭。
-
變數名的命名規範：
- 推薦使用小駝峰
-
var 與 let 區別：
- var：定義在全域性，可在區域性名稱空間種被修改
- let： 定義在區域性名稱空間種不會影響到全域性名稱空間的變數名
var
var 變數名 = '值';
let
let 變數名 = '值';
常量
JS中支援定義常量（定義後無法被修改）
關鍵字：const
const 常量名 = '值';
四、基本資料型別
檢視資料型別的方法:
- 關鍵字：typeof
typeof(繫結資料的變數名);
1、數值型別
Number（數值型別）
區別於Python，JS中整型和浮點型都叫做：Number
NaN也屬於數值型別：不是一個數字（Not A Number）
2、字元型別
String（字元型別）
定義字元型別可使用單、雙引號
模板字串使用：``
var 變數名 = '值';
var 變數名 = "值";
var 變數名 = `我是第一列
我是第二列
我是第三列`
內建方法
| 序號 | 關鍵字 | 說明 |
|---|---|---|
| 1 | .length | 返回長度 |
| 2 | .trim() | 移除空白 |
| 3 | .trimLeft() | 移除左邊的空白 |
| 4 | .trimRight() | 移除右邊的空白 |
| 5 | .charAt(n) | 返回第n個字元 |
| 6 | .concat(value, ...) | 拼接 |
| 7 | .indexOf(substring, start) | 子序列位置 |
| 8 | .substring(from, to) | 根據索引獲取子序列 |
| 9 | .slice(start, end) | 切片 |
| 10 | .toLowerCase() | 小寫 |
| 11 | .toUpperCase() | 大寫 |
| 12 | .split(delimiter, limit) | 分割 |
var name = ' kang kang '
var gender = 'male'
1.name.length // 13 返回字元長度
2.name.trim() // 'kang kang' 去除字串左右兩邊空格（區別於Python，JS只能去除空格）
3、name.trimLeft() // 'kang kang ' 去除字串左邊空格
4、name.trimRight() // ' kang kang' 去除字串右邊空格
5、name.charAt(5) // 'g' 類似於Python的索引取值
6、name.concat(gender) // ' kang kang male' 拼接，針對字元的拼接還可以用‘+’號
7、name.indexOf('ng') // 4 根據輸入的字元獲取字元對應索引的位置
8、name.substring(1,5) //' kan' 類似於Pyhon的切片操作
9、name.slice(1,5) // ' kan' 類似於Pyhon的切片操作
10、name.toUpperCase() // ' KANG KANG ' 將字串所有英文字母轉大寫
11、name.toUpperCase() // ' kang kang ' 將字串所有英文字母轉小寫
13、name.split(' ') //(6) ['', '', 'kang', 'kang', '', ''] 按指定字元·分割字串， 第二個引數可控制獲取分割後的字串的個數
/*
string.slice(start, stop)和string.substring(start, stop)：
兩者的相同點：
如果start等於end，返回空字串
如果stop引數省略，則取到字串末
如果某個引數超過string的長度，這個引數會被替換為string的長度
substirng()的特點：
如果 start > stop ，start和stop將被交換
如果引數是負數或者不是數字，將會被0替換
silce()的特點：
如果 start > stop 不會交換兩者
如果start小於0，則切割從字串末尾往前數的第abs(start)個的字元開始(包括該位置的字元)
如果stop小於0，則切割在從字串末尾往前數的第abs(stop)個字元結束(不包含該位置字元)
*/
3、布林型別
boolean（布林值）
區別於Python，JS的布林值首字母不用大寫
JS布林值純小寫
var a = true;
var b = false;
（空字串）、0、null、undefined、NaN都是False
五、特殊資料型別
null和undefined
1、null
-
表示值是空，一般在需要指定或清空一個變數時才會使用
-
表示曾經有過，但是現在沒有了
-
eg：name= null
2、undefined
- 表示當宣告一個變數但未初始化時，該變數的預設值是undefined
- 表示一直就沒有擁有過
- 函式無明確的返回值時，返回的值也是undefined
null表示變數的值是空(null可以手動清空一個變數的值，使得該變數變為object型別，值為null)，undefined則表示只宣告瞭變數，但還沒有賦值。
六、引用資料型別
1、物件（Object）
JaveScript中所有的事務都是物件：字串、數值、陣列、函式...此外JavaScript允許使用者自定義物件
JaveScript提供多個內建物件，比如String、Date、Array等
物件是帶有屬性和方法的特殊資料型別
2、陣列(Array)
陣列類似於Python中的列表
使用單獨的變數名來儲存一系列的值
建立陣列的方法
let a = [1,2,3,4,5];
常用方法
| 序號 | 方法 | 說明 |
|---|---|---|
| 1 | .length | 陣列的大小 |
| 2 | .push(ele) | 尾部追加元素 |
| 3 | .pop() | 獲取尾部的元素 |
| 4 | .unshift(ele) | 頭部插入元素 |
| 5 | .shift() | 頭部移除元素 |
| 6 | .slice(start, end) | 切片 |
| 7 | .reverse() | 反轉 |
| 8 | .join(seq) | 將陣列元素連線成字串 |
| 9 | .concat(val, ...) | 連線陣列 |
| 10 | .sort() | 排序 |
| 11 | .forEach() | 將陣列的每個元素傳遞給回撥函式 |
| 12 | .splice() | 刪除元素，並向陣列新增新元素。 |
| 13 | .map() | 返回一個陣列元素呼叫函式處理後的值的新陣列 |
let a = [1,2,3]
let b = ['ABC','DEF']
1、a.length // 3 返回陣列內部資料的數量
2、a.push(4) // 在陣列尾部新增值
3、a.pop() // 彈出數值尾部的值
4、a.unshift(1) // 在數值頭部插入數值，可一次插入多個
5、a.shift // 移出陣列頭部資料，一次只能移除一個
6、a.slice(1,3) // 陣列切片取值，設定起始和結束位置的索引
7、a.reverse() // 反轉元組內資料
8、a.join() // '3,2,1,1,5' 將陣列內資料轉成字元型別
9、a.concat(b) //(7) [3, 2, 1, 1, 5, 'ABC', 'DEF'] 拼接陣列
10、a.sort() // 將陣列內數值由小到大排序
11、 var obj = {
'1' : 'abc',
'3' : 100,
'5' : 'hello'
}
var arr = [1, 3, 5];
arr.forEach(function(item){
// console.log(item);
},obj);//返回值： 1 3 5
12、a.splice('a','b','c') //刪除陣列內現有資料，新增新的資料
13、et array = [1, 2, 3, 4, 5];
let newArray = array.map((item) => {
return item * item;
})
console.log(newArray) // [1, 4, 9, 16, 25]
3、字典（Dictionary）
字典同於Python中的字典
字典是一種以鍵-值對形式儲存資料的資料結構，比如：名字-電話號碼，透過名字就能找到對應的電話號碼，名字就是鍵(key)，電話號就是值(value)；
建立字典的方法
1、方式一: 建立字典的同時直接新增鍵值對
let 字典名 = {鍵1：值1，
鍵2：值2
}
2、方式二： 建立一個空字典，然後再新增鍵值對
let 字典名 = new Object();
字典的基本用法
let d1 = {name: 'kangkang', age: 18, hobby: 'read'}
1、索引取值
d1.name // 'kangkang'
d1[name] // 'kangkang'
2、新增鍵值對
d1.鍵名 = 值
d1[鍵名] = 值
七、運算子
1、算數運算子
| 符號 | 描述 |
|---|---|
| + | 加 |
| - | 減 |
| * | 乘 |
| / | 除 |
| % | 取餘 |
| ++ | 自增1 |
| -- | 自減1 |
var x=10;
var res1 = x ++; 加號在後面 先賦值後自增
var res2 = ++ x; 加號在前面 先自增後賦值
2、比較運算子
- 弱：
- 不同型別的型別直譯器會自動轉換為相同型別的資料進行比較
- ‘1’== 1；// true
- 強：
- 不同型別資料不會自動轉換型別
- ‘1’== 1；// false
| 符號 | 描述 |
|---|---|
| ！= | 不等於（弱） |
| == | 等於（弱） |
| === | 等於（強） |
| ！=== | 不等於（強） |
3、邏輯運算子
| 符號 | 描述 |
|---|---|
| && | 與 |
| || | 或 |
| ！ | 非 |
八、流程控制
1.單if分支
if (條件){
條件成立執行的程式碼
}
2.if...else分支
if(條件){
條件成立執行的程式碼
}else{
條件不成立執行的程式碼
}
3.if...else if...else分支
if(條件1){
條件1成立執行的程式碼
}else if(條件2){
條件1不成立條件2執行的程式碼
}
else{
條件1和2都不成立執行的程式碼
}
4.如果分支結構中else if很多還可以考慮使用switch語法
switch(條件){
case 條件1:
條件1成立執行的程式碼;
break; 如果沒有break會基於某個case一直執行下去
case 條件2:
條件2成立執行的程式碼;
break;
case 條件3:
條件3成立執行的程式碼;
break;
case 條件4:
條件4成立執行的程式碼;
break;
default:
條件都不滿足執行的程式碼
}
"""
三元運算
python中: 值1 if 條件 else 值2
JS中: 條件?值1:值2
"""
九、迴圈結構
1、for迴圈
for迴圈
for(起始條件;迴圈條件;條件處理){
迴圈體程式碼
}
for(let i=0;i<10;i++){
console.log(i)
}
let dd = {'name':'jason','age':18}
for(let k in dd){
console.log(k)
}
2、while迴圈
while迴圈
while(迴圈條件){
迴圈體程式碼
}
十、函式
1.JS中函式的形參與實參個數可以不對應
傳少了就是undefined 傳多了不用
2.函式體程式碼中有一個關鍵字arguments用來接收所有的實參
3.函式的返回值如果有多個需要自己處理成一個整體
1、普通函式
function 函式名(形參){
// 函式註釋
函式體程式碼
return 返回值
}
2、匿名函式
# 匿名函式
var s1 = function(a, b){
return a + b;
}
3、箭頭函式
# 箭頭函式
var f = v => v;
var f = function(v){
return v;
}
var f = () => 5;
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
var sum = function(num1, num2){
return num1 + num2;
}
十一、內建物件
1、時間相關
var d = new Date();
//getDate() 獲取日
//getDay () 獲取星期
//getMonth () 獲取月（0-11）
//getFullYear () 獲取完整年份
//getYear () 獲取年
//getHours () 獲取小時
//getMinutes () 獲取分鐘
//getSeconds () 獲取秒
//getMilliseconds () 獲取毫秒
//getTime () 返回累計毫秒數(從1970/1/1午夜)
2、json序列化
let dd = {name: 'jason', age: 18}
JSON.stringify(dd) 序列化
JSON.parse(ss) 反序列化
3、正則
定義正則兩種方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
1.全域性模式的規律
lastIndex
2.test匹配資料不傳預設傳undefined