前端開發之JavaScript 一、JavaScript簡介 Javascript（簡稱‘JS’）,是一門解釋型編程語言，主要用於Web、和瀏覽器中網頁中的動態渲染 是一門前端工程師的編程語言，相比於python它的邏輯並不是那麼嚴謹 二、JS基礎 語法註釋 單行註釋 //註釋內容 多行註釋 ...
目錄前端開發之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
