前端三劍客——javascript變量與數(shu)據類(lei)型
javascript： 編程語言（解釋型）
大綱：
??1.注釋方法
??2.js中(zhong)斷句形式(shi)（, 和 ;）
??3.js存在形式與引(yin)入
??4.變量與常量的聲明和定義
??5.基本數據類型及(ji)方(fang)法
??6.數據類型的轉換??
??7.隱式轉換
??8.三元表達式
注釋方法
js中斷句形式
“ , ”: 對(dui)象的屬(shu)性和方法用 , 分(fen)割(ge)
“ ; ”: 語句(ju)的(de)借(jie)宿用 ; 分(fen)割(ge)
js存在形式與引入
??1.外部js（一(yi)般位(wei)于static目錄的js文(wen)件夾(jia)下(xia)面）
????引入：<script src="./static/my.js"> </script>
??2.內部jjs（一般位于(yu)head標簽(qian)的(de)css樣式下(xia)面 或 body標簽(qian)結束位置）
????head標(biao)簽里
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
alert(1); //alert彈窗
</script>
</head>
????body標簽結束(shu)位置
<body>
<h1 id="h1"><span>你好</span></h1>
<script>
alert(h1.innerHTML);
alert(h1.innerText);
</script>
</body>1->
2->
3->
原因：單線程
????3.行間(jian)js：一般寫在元素的指定屬性值(zhi)中
變量與常量定義和聲明
????1，變(bian)量??var let
聲(sheng)明(ming)(ming)：變量(liang)首(shou)次(ci)出(chu)現(xian)用(yong)var或(huo)者(zhe)let關(guan)鍵字進行聲(sheng)明(ming)(ming)，后續使用(yong)改變量(liang)無須加關(guan)鍵字????var全局(ju)變量(liang)??let局(ju)部變量(liang)
定(ding)義(yi)：var 變(bian)量(liang)名 = 值 ??let 變(bian)量(liang)名 = 值
????2.常量 ??const
聲明(ming)：用const聲明(ming)
定義：const 變(bian)量名 = 值
????3.超(chao)全(quan)局對象進行(xing)屬(shu)(shu)性賦值 不用var let const聲明??name = "guoahn"??即name是全(quan)局對象Window的(de)屬(shu)(shu)性而不是一(yi)個變(bian)量(liang)
<body>
<script>
name = 200; //本質寫法：this.name = 200 不是進行聲明變量 而是對Windou對象進行屬性賦值
console.log(this); //Window
</script>
</body>
基本數據類型及方法
通過typeof進行查看類型??console.log(typeof num);
??
??
??
??與python區別：1.python3中bool類型(xing)是(shi)int類型(xing)的子類 ??而js中2者(zhe)是(shi)完全不相干(gan)的數(shu)據類型(xing)
????????? 2.js中(zhong)Array表象相當于python中(zhong)的list
???????? 3.js中Object表象相當于python中的(de)字典
????????? 4.js中Array類(lei)型屬于(yu)Object類(lei)型
????1.String類型
聲(sheng)明： var name = "guohan"；??var name = String（“guohan”）;
常見方法：??1.length??var v = name.length；
???????2.索引???var v = name[0];
???????3.切片???var v = name.substring(0，2)；
???????4.去除空白 var v = name.trim（）；
???????5.字符串重復 repeat(次數);??
var content;
for (let i = 1; i <= 4; i++) {
content = "";
content = "*".repeat(i);
console.log(content);
}
????2.Array類型（屬于Object類型）
聲明(ming)： var v =["guohan","gh"];??var v = Array["guohan","gh"];
常(chang)見方法： 1.length ??2.索引（改(gai)/查(cha)）
????? 3.增：?????? 3.1 尾部(bu)增加：v.push("你好")；
?????????????? 3.2 頭部增加：v.unshift("你好")；
?????????????? 3.3 索(suo)引增加：v.splice（索(suo)引位置(zhi)，0，元(yuan)素）；????v.splice(1,0,"你好(hao)"）；
??????????????3.4 下標增加：
var data = ["guohan","gh","gg"];
data[4]=1 //索引為4的值為1
console.log(data,data.length); //['guohan', 'gh', 'gg', 空, 1] 5var data = ["guohan","gh","gg"];
data["xx"]=1
console.log(data,data.length); //['guohan', 'gh', 'gg', xx: 1] 3????? 4.刪：??????4.1 尾部刪除：v.pop();
????????????? 4.2 頭部刪除：v.shift();
?????????????? 4.3 索(suo)引(yin)進行刪除(chu)： v.splice(索(suo)引(yin)位置，1)；
?????5.判斷是否是數組：Array.isArray(變量) 返回boolean類(lei)型??console.log( v , Array.isArray(v))；
補充：forEach(數組的內置方法）: 遍歷數組的每個元素并對每個元素進行一次指定的函數（回調函數）
//數組.forEach((當前元素，當前下標，原數組)=>{函數代碼語句;});var obj = ["guohan","gh","gg","hh"];
obj.forEach((item,key)=>{console.log(item)}) //數組.forEach((當前元素，當前下標，原數組)=>{函數代碼語句;});//里面是匿名函數新寫法
//obj.forEach(item=>{console.log(item)});
????3.Object類型????例：const obj = { name: "張三", age: 18 }; ??對(dui)象的(de)屬性(xing)可以是任意數據(ju)類型的(de)數據(ju) 如 1（屬性(xing)）：2（值）
聲明：
方式一（直接創建有屬性有方法的對象） 屬性名與屬性值之間必須用 : 連接
<body>
<script>
var Person = {
name : "guohan", //屬性和方法用,隔開 屬性和屬性值用:
age : 22,
say(){
return "你好"
}
};
console.log(Person,Person.say());
</script>
</body>
方式二(er)（用函數創建對象）
<body>
<script>
function Info(name,age){
this.name = name;
this.age = age;
this.say = function(){
return "你好"
}
};
var obj = new Info("guohan",22)
console.log(obj,obj.say());
</script>
</body>
方式三（用類創建對象）
<body>
<script>
class Person{
constructor(name,age){ //初始化 constructor相當于python中__init__方法
this.name = name;
this.age = age;
}
say(){
return "你好"
}
};
var info = new Person("guohan",22);
console.log(info,info.say());
</script>
</body>
方(fang)式四(si)（創建空對象，添加屬(shu)性和方(fang)法）不常用
//創建對象(Object)方式二(創建空對象再去添加屬性和方法)
var Info = new Object();
Info.name = "guohan";
Info.age = 18;
Info.say = function(){
return "你好";
};
console.log(Info);
常見方(fang)法(fa):??1.length??
?????? 2.增/改/查(cha)類似python
??????3.刪??delete info["屬性"]
????4.undefined類型(xing)
觸(chu)發undefined條件(jian) 1.變量未進行賦(fu)(fu)值(zhi)??2.變量賦(fu)(fu)值(zhi)為undefined
????
????5.null類型（本身(shen)也是對(dui)象(xiang)）
相當于python中的(de)None??只(zhi)有(you)給變(bian)量(liang)賦值為null時才有(you)null的(de)存在??用于進行變(bian)量(liang)的(de)初始化
數據類型的轉換
String
String轉(zhuan)Boolen
除了(le)空字符(fu)串(chuan)轉(zhuan)為false 其(qi)他有類容的(de)字符(fu)串(chuan)（如(ru)“ ”（空格(ge)）“0”）均轉(zhuan)換(huan)為true????python中純空格(ge)的(de)str轉(zhuan)bool是False
//String轉Boolean
var name = "guohan";
var name1 = Boolean(name);
console.log(name1,typeof name1); //true 'boolean'
var age = "";
var age1 = Boolean(age);
console.log(age1,typeof age1); //false 'boolean'
String轉Number
除了純數字(zi)形式的字(zi)符串(chuan)能通過(guo)Number進(jin)行轉換其(qi)他符合(he)一定(ding)條件的得(de)通過(guo)parseInt和(he)parseFloat方法進(jin)行轉換轉換????“-.5”表示－0.5可轉
//String轉Number
var age = "10";
var new_age = Number(age);
console.log(new_age,typeof new_age);
var num = "12歲";
var new_num = Number(num); //10 'number'
console.log(new_num,typeof new_num); //NaN 'number' NaN是特殊的數值類型 當轉換對象不符合條件時才轉換成NaN
console.log(typeof NaN); //number
String和Array
//String轉Array
var age = "18";
console.log(Array(age),typeof Array(age)); //['18'] 'object'
Number（較常見）
Number轉(zhuan)Number和(he)Number轉(zhuan)String和(he)String轉(zhuan)Number
1.數值之間可以進行轉(zhuan)換：parseInt和parseFloat（Int->Float , Float->Int)??但(dan)是Int轉(zhuan)Float時不(bu)展示小(xiao)數位
//數值之間的轉換 parseInt和parseFloat
var num1 = 10;
var num2 = 3.14;
console.log(parseFloat(num1),parseInt(num2)); //整數轉浮點數不加小數位 10 32.所有數值類(lei)型均(jun)可以轉成字(zi)符(fu)串類(lei)型
3.字符串(chuan)類型轉(zhuan)數值(zhi)類型：
????只要(yao)是(shi)數值開頭(tou)的(de)字(zi)符(fu)串(chuan)均可(ke)以通(tong)過(guo)parseInt和parseFloat進行轉換??注(zhu)意：千(qian)分位表示的(de)數值字(zi)符(fu)串(chuan)通(tong)過(guo)這方法只能(neng)識別開頭(tou)
//字符串轉數值
//純數值形式的字符串 Number
var num3 = "12.3";
console.log(Number(num3)); //12.3
console.log(parseInt(num3)); //12
//以數字開頭的字符串轉數值 parseInt和parseFloat
var num4 = "3.3公斤"
console.log(parseInt(num4)); //3
console.log(parseFloat(num4)); //3.3
//數值開頭的千分位表示法的字符串 parseInt只能識別開頭的數值并轉換
var num6 = "100_200_300"
console.log(parseInt(num6)); //100????非數值開(kai)頭的字符串通過parseInt和parseFloat進行轉換??得到(dao)NaN（特殊的數值類(lei)型）
//非數值開頭的字符串轉數字
var num5 = "共3元";
console.log(parseInt(num5)); //NaN
Boolean轉Number和Number轉Boolean
數值類型轉布爾類型
只有0和NaN轉成Boolean為(wei)false
//數值類型轉布爾類型
console.log(Boolean(99)); //true
console.log(Boolean(0)); //false布爾類型轉數值類型
//布爾類型轉數值類型
console.log(Number(true)); //1
console.log(Number(false)); //0
隱式轉換
/*
隱式轉換: 存在于弱類型語言如js php要求不像py那樣苛刻
+規則：倆個數值相加或者兩個字符串拼接
-規則：兩個數值相減
與python不同：python中隱式轉換主要集中于數值運算和布爾判斷print(1-True)>>>0 print(1 + 1.1)>>>2.1 if 1:
不能print("2"-"1") 即python隱式轉換要求苛刻
*/
//數值類型和布爾類型
console.log(1+true); //2
console.log(1-true); //0
//字符串類型和布爾類型
console.log("guohan"+true); //guohantrue
console.log("1"-false); //1
console.log("2"-"1"); //1
三元表達式
//三元表達式
/*
js:條件？真時返回的結果:假時返回的結果
py:真時的返回結果 if 條件 else 假時返回的結果
*/
//js
age = 18;
var ret = age>=20?"成年人":"未成年人";
console.log(ret);
//py
age = 18
ret = "成年人" if age>=18 else "未成年人"
print(ret)