前端開發之JavaScript

前端開發之JavaScript
一、JavaScript簡介
二、JS基礎
三、變數與常量
四、基本資料型別
- 1、數值型別
- 2、字符型別
- 3、布爾型別
五、特殊資料型別
- 1、null
- 2、undefined
六、參考資料型別
- 1、物件（Object）
- 2、陣列(Array)
- 3、字典（Dictionary）
七、運算子
- 1、算數運算子
- 2、比較運算子
- 3、邏輯運算子
八、流程控制
九、回圈結構
- 1、for回圈
- 2、while回圈
十、函式
- 1、普通函式
- 2、匿名函式
- 3、箭頭函式
十一、內置物件
- 1、時間相關
- 2、json序列化
- 3、正則

一、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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/539269.html

標籤：其他

上一篇：資料庫(js部分講解)

下一篇：day32-JQuery05

前端開發：4、JavaScript簡介、變數與常量、資料型別及內置方法、運算子、流程控制、回圈結構、內置方法