JavaScript

 javaScript是一種腳本語言，主要由下面三部分組成：

• 核心（ECMAScript)
• 檔案物件模型（DOM)  Document object model(整合js，css，html)
• 瀏覽器物件模型（BOM) Broswer object model（整合js和瀏覽器）

注意：ES6是指ECMAScript 6，

JavaScript引入方式

//第一種，在Script標簽內寫代碼
<script> 
    js代碼
</script>

//第二種，直接引入js檔案
《script src="https://www.cnblogs.com/nq31/archive/2020/09/20/myscript.js"></script>

JavaScript語言規范

//  這是單行注釋
/*
多行注釋
*/

//結束符 是以分號為結束符號 ；

JavaScript語言基礎（與python做對比）

變數宣告

1、js的變數名可以使用字母、數字、_、$組成，同樣不能用數字開頭

2、用var、let (let是ES6后才支持的）來宣告變數

3、不能用關鍵字作為變數名

4、宣告常量用const，一旦宣告，該值就不能改變（ES6新增）

var userName='json'
let id='111'
const PI=3.14

注意：變數名是區分大小寫的

　　　 js推薦使用駝峰式命名規則：如userName

　　    pyton 則推薦用_下劃線命名規則：如user_name

var、let的區別：

　　var 宣告的都是全域變數，全域變數容易受影響

　　let 宣告的是區域變數，所以let可以區分

JavaScript資料型別

js跟python一樣，都是擁有動態型別：

>var x;
>var x=1;
>var x='alex'
>x
<alex

數值型別（Number)

js不區分整形和浮點型，就只用number這一種型別

var a=11
var b=11.11
typeof b
<number
//注意NaN也是number型別
typeof NaN
<number
//NaN 表示不是一個數字

型別轉換

parseInt('111') //回傳 111
parseFloat('11.11')  //回傳11.11
parseInt('11sagljks') //回傳11，如果是小數字串則回傳整數部分，如11.11回傳11
parseInt("aljgla")  //回傳NaN
//總結：只要是數字開頭就可以轉換，否則會報錯

字串型別（String）

js 支持單引號、雙引號，但是不止三引號

python支持引號、雙引號、三引號

字串的拼接：

　　js推薦直接用+做拼接　

　　python 推薦用join做拼接

var a="json";
var a1='pytoh';
var a2='''hello'''  //不支持

//模板字串
var aa=`
    my name is ${a1} , ${a2}world
`
//回傳 my name is pytoh ,hello world
//注意：${}會自動去前面尋找大括號內變數名對應的值，如果找不到，則會報錯，

 字串常用的方法：

h="hellowold"
h.length
>9

h1=" hell "
h1.trim()
>"hell"
h1.trimLeft()
>"hell "

h1.trimRight()
>" hell"

h.charAt(2)
>"l"

h.indexOf('ol')
>6

h.substring(1,3)
>"el"

h.slice(0,-1)
>"hellowol"

h.toLowerCase()
>"hellowold"

h.toUpperCase()
>"HELLOWOLD"

h.split('o')
>(3) ["hell", "w", "ld"]

name1='hello'
name2='world'
name1.concat(name2)
>"helloworld"

注意：js使用切片的時候，用slice()方法

slice和substring的區別

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)個字符結束(不包含該位置字符)

 布林值

js中布林值都是小寫的，python中布林值首字母都是大寫

js布林值為false的情況有：空字串，NaN，0，undefined，null

null和undefined的區別

• null表示值是空，一般在需要指定或清空一個變數時才會使用
• undefined表示當宣告一個變數但是沒有初始化時，該變數默認值時undefined

注意：函式沒有設定return回傳值的時候，函式回傳的是undefined

物件（object）

js中一切皆物件，如：字串、數值、陣列、函式

js也提供了多個內建物件，如string、Data、array等

物件知識帶有屬性和方法的特殊資料型別

陣列

js的陣列類似于python中的串列

陣列常用的方法如下：

//例子：
var l=[1,2,3]
l.pop()
>3

l.push(5)
>3

l.unshift(6)
>4

l
>(4) [6, 1, 2, 5]

l.shift() #洗掉頭部元素
>6
l
>(3) [1, 2, 5]

l.slice(0,2)
>(2) [1, 2]

l.reverse()
>(3) [5, 2, 1]

l.join('a')
>"5a2a1"

var l2=["a","b","c"]
l.concat(l2)
>(6) [1, 2, 5, "a", "b", "c"]

l.sort()
>(3) [1, 2, 5]

forEach()方法實體：引數最多三個，第一個引數是必須的，第二個，可選，表示當前元素的索引值，第三個引數，可選，表示當前元素所屬的陣列物件

 splice（index,howmany,item1）方法實體：同樣也是三個引數，第一個引數是必須的，表示起始位置，第二個引數也是必需的，表示洗掉元素個數，必須是數字，也是是“0”，如果這個引數沒有設定，則會從index開始洗掉到陣列最后一個元素，第三個引數，可選，表示要添加到陣列的新元素，

 map()方法實體：引數性質跟forEach一致

 運算子

//算數運算子 + - * / % ++ --
var x=1;
var res1=x++;    //結果是1 ，先賦值再運算
var res2=++x;    //結果是3，先運算再賦值

//比較運算子 > >= < <= != == === !==
//注意：
1=="1"      //結果是true ，弱等于，會自動轉換資料型別
1===“1”   //結果是false ，強等于，不會自動轉換資料型別

//邏輯運算子 
/*
注意：python是   and   or   not
         js 是 &&  ||  ！
         邏輯運算的時候，回傳的是資料，而不是布林值
*/    
!5&&'5'
>5
5&&'5'
>5
0 || 1
>1

//賦值運算子 =  += -= *= /+

流程控制

//if-else結構
if(條件){代碼塊}else{代碼塊｝

//if-else if - esle結構
if(條件){
代碼塊
}else if{
代碼塊
}else{
代碼塊
}

//switch結構：
switch(num){
    case 0:
    代碼塊
    barek;
    .....
    default:
    console.log("...")
}
//注意：case子句通常要加break陳述句，否則程式會繼續執行后續case中陳述句

//for結構：
for(條件）｛
  代碼塊
｝

//while結構：
while(條件）｛代碼塊}

//三元運算
/*
python 三元運算子是 var  res=1 if 1>2 else 3
js  三元運算子是   var res=1>3?1:3
*/

函式

函式定義(可以帶引數，也可以不帶）

//python 是def  js是function
function f(引數1,..){
　　代碼塊
}
//匿名函式
var sum=function(a,b){
    return a+b;
}
sum(1,2);

//立即執行函式
（function(a,b){
    return a+b;
})(1,2);

//箭頭函式(ES6才運許使用）
var f=v =>v;   //箭頭左邊是形參，右邊是回傳值
//等價于
var f=function(v){
    return v
}

var f=(arg1,arg2) => arg1+arg2;
var f=function(arg1,arg2){
    return arg1+arg2;
}

注意：函式中arguments引數，是存放存入的引數，

　　　函式只能回傳一個值，如果要回傳多個值，只能將其放在陣列或物件中回傳

函式的全域變數和區域變數

區域變數：在函式內部宣告的變數就是區域變數，只能在函式內部訪問，函式執行完畢，該變數也會被洗掉

全域變數：在函式外部宣告的變數，該變數會在頁面關閉后被洗掉

作用域：跟python作用域關系查找一模一樣，

首先在函式內部查找變數，找不到再到外層函式查找，逐步找到最外層，

自定義物件

本質就鍵對集合，類似于python中中的字典，

#第一種創建自定義物件的方式
var d={'user':'hell','passwd':123}
#第二種創建自定義物件的方式
var d1=new Object()
d1.id='alex';         
d1.password=123;
//等價于
d1={'id':'alex','password':123}
//遍歷物件內容
for （var i in d1){
　　console.log(i,d1[i]);
}

Data物件

var d1=new Date();
var d2=new Date("2020/9/20 21:03") //引數是日期字串
var d3=new Date(1000)         //引數是毫秒
var d4=new Date(2020,9,20,21,3,1,100)  //引數是年月日時分秒毫秒
//Date物件方法
var d=new Date()
getDate()                 // 獲取日
getDay ()                 //獲取星期
getMonth ()              // 獲取月（0-11）
getFullYear ()            // 獲取完整年份
getYear ()                 //獲取年
getHours ()               //獲取小時
getMinutes ()             //獲取分鐘
getSeconds ()             //獲取秒
getMilliseconds ()        //獲取毫秒
getTime ()                  //回傳累計毫秒數(從1970/1/1午夜)

JSON物件

在python中序列化、反序列化

• dumps  序列化
• loads    反序列化

在js中序列化反、序列化

• JSON.stringify()     等價于dumps   序列化
• JSON.parse()         等價于loads     反序列化

RegExp物件

在python中，使用正則，需要借助于re模塊，

在js中，則需要創建正則物件

//第一種創建正則物件方法
let reg1= new RegExp("正則陳述句“)
//eg:
let reg1 =new RegExp(^[a-zA-Z][a-zA-Z0-9]{5,11})
//第二種
let reg2 = /正則陳述句/
//eg:
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/   //匹配以字母開頭，長度在5~11

//匹配內容，呼叫test方法
reg1.test('helloworld)

//全域匹配缺陷
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/ g
/*
全域模式有一個lastIndex屬性，匹配結果為true是，lastIndex是字串的長度，下次匹配會從字串尾部開始匹配，匹配結果為false時，lastIndex會重新置0，從頭開始匹配，
*/
reg2.test('helloworld')  
>true
reg2.test('helloworld')  //此時lastIndex是10，從字母d后面開始匹配，所以結果為false
>false

//第二個缺陷，當test()，不傳引數的時候，默認傳undefined

標籤：其他

上一篇：JavaScript流程控制

下一篇：JS——簡介