前端知識之JS(javascirpt)
阿新 • • 發佈：2022-12-05
目錄
JS簡介
全稱JavaScript 是一種具有函式優先的輕量級、解釋型或即時編譯的程式語言 它是一門前端工程師的程式語言
JS基礎
1.註釋語法
1. 註釋語法
// 單行註釋
/*多行註釋*/
2.引入JS的做種方式
- head內script標籤內編寫
- head內script標籤src屬性引入外部js資源
- body內最底部通過script標籤src標籤屬性引入外部就是資源(最常用)
PS：注意頁面的載入是從上往下的 所以操作標籤js程式碼一定要等待標籤載入完畢在執行才可以正產執行
3.結束符號
分號(很多時候不寫也沒問題)
變數與常量
- pycharm建立檔案或者html檔案(適合編寫較為複雜的js程式碼)
- 瀏覽器提供編寫js程式碼的環境
JavaScript的變數可以使用_、數字、字母、$組成 不能以數字開頭
在js中宣告變數需要使用關鍵字
var
var name = 'jason';
let
let name = 'tony';
ps:let是ECMA6新語法 可以在區域性定義變數不影響全域性
在js中宣告常量也需要使用關鍵字
const
const pi = 3.14;
基本資料型別
在js中檢視資料型別的方式 typeof
1.數字型別(Number)
在js中整型與浮點型不分家 都叫Number
NaN也屬於數值型別 意思是：不是一個數字(Not A Number)
2.字元型別(string)
單引號 'jason' 雙引號 "jason" 模板字串 `jason` let name1 = 'jason' let age1 = 18 underfined let desc = `my name is ${name1} my age is ${age1}` console.log(desc); // 得到my name is jason my age is 18
1.字串拼接推薦使用加號
var a = 'hello';
var b = 'world';
var c = a + b;
consle.log(c); // 得到hellworld
2.常見內建方法
| 方法 | 說明 |
|---|---|
| .toLowerCase() | 小寫 |
| .toUpperCase() | 大寫 |
| .split(delimiter,limit) | 分割 |
| .length | 返回長度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左邊的空白 |
| .trimRight() | 移除右邊的空白 |
| .charAt(n) | 返回第n個字元 |
| .concat(value,...) | 拼接 |
| .indexOf(substring,start) | 子序列位置 |
| .substring(from,to) | 根據索引獲取子序列 |
| .slice(start,end) | 切片 |
3.布林型別(Boolean)
js裡面的布林值與Python不同
js是純小寫 而python中是首字母大寫
4.null和underfined
null表示值是空的 一般在需要指定或清空一個變數是才會使用 如 name = null;
underfined表示當宣告一個變數但未初始化 該變數的預設值是underfined 且函式無明確的返回值時 返回的也是undefined
5.物件(object)
物件之陣列(Array)>>>: 類似於python中的列表
let l1 = []
物件之自定義物件(object)>>>: 類似於python的字典
let d1 = {'name':'jason',}
let d2 = new.object();
運算子
1. 算術運算子
+ - * / ++(自增1) --(自減1)
var x=10;
var res1=x++; 加號在後面 先賦值後自增
var res2=++x; 加號在前面 先自增後賦值
2. 比較運算子
!=(值不等 弱) ==(值相等 弱) ===(值相等 強) !==(值不等 強)
如：
A 1 == "1" // true 弱相等
B 1 === "1" // false 強等於
A 上面這張情況出現的原因在於JS是一門弱型別語言(會自動轉換資料型別)，所以當你用兩個等號進行比較時，JS內部會自動先將
B 數值型別的1轉換成字串型別的1再進行比較，所以我們以後寫JS涉及到比較時儘量用三等號來強制限制類型，防止判斷錯誤
3. 邏輯運算子
&&(與) ||(或) !(非)
流程控制
if判斷
- 單if分支
if (條件){
條件成立的子程式碼
}
- if...else分支
if(條件){
條件成立執行的程式碼
}else{
條件不成立執行的程式碼
}
如：
var a = 10;
if (a > 5){
console.log("yes");
}else {
console.log("no");
}
- if...else if...else分支
if(條件1){
條件1成立執行的程式碼
}else if(條件2){
條件1不成立條件2執行的程式碼
}
else{
條件1和條件2都不成立執行的程式碼
}
如：
var a = 10;
if (a > 5){
console.log("a > 5");
}else if (a < 5) {
console.log("a < 5");
}else {
console.log("a = 5");
}
- 如果分支結構中else if很多還可以考慮使用switch語法
switch(條件){
case 條件1:
條件1成立執行的程式碼;
break; //如果沒有break會基於某個case一直執行下去
case 條件2:
條件2成立執行的程式碼;
break;
case 條件3:
條件3成立執行的程式碼;
break;
case 條件4:
條件4成立執行的程式碼;
break;
default:
條件都不滿足執行的程式碼
}
如:
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
for迴圈
for(起始條件;迴圈條件;條件處理){
迴圈體程式碼
}
for(let i=0;i<10;i++){
consle.log(i)
}
let res = {'name':'jason','age':18}
for(let k in dd){
conlse.log(k)
}
while迴圈
while(迴圈條件){
迴圈體程式碼
}
var i = 0;
while (i<10) {
console.log(i)
}
三元運算
var a = 1;
var b = 2;
var c = a > b ? a : b
//這裡的三元運算順序是先寫判斷條件a>b再寫條件成立返回的值為a,條件不成立返回的值為b;三元運算可以巢狀使用；
var a = 10,b = 20;
var x = a > b ?a : (b=="20")?a:b;
函式
- JS中函式的形參與實個數可以不對應 傳少了就是underfined 傳多了不用
- 函式體點中有一個關鍵字arguments用來接收所有的實參
- 函式的返回值如果有多個需要自己處理成一個整體
function 函式名(形參){
//註釋
函式體程式碼
return 返回值
}
匿名函式
var s1 = function(a,b){
return a + b;
}
箭頭函式
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;
}
內建物件
Date日期物件
var d = new Date();
//getDate() 獲取日
//getDay() 獲取星期
//getMonth() 獲取月(0~11)
//getFulYear() 獲取完整月份
//getYear() 獲取年
//getHours() 獲取小時
//getminutes() 獲取分鐘
//getSeconds() 獲取秒
//getMillseconds() 獲取毫秒
//getTime() 返回累計毫秒數(從1970/1/1午夜)
JSON物件
let dd = {name: 'jason',age: 18}
JSON.stringify(dd) //序列化
JSON.parse //反序列化
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字串轉換成物件
var obj = JSON.parse(str1);
// 物件轉換成JSON字串
var str = JSON.stringify(obj1);
定義正則的兩種方法
RegExp正則表示式物件
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.全域性模式的規律
lasrtIndex
2.test匹配資料不傳 預設傳underfined