前端三(san)劍客——javascript變(bian)量與數據類型
javascript： 編程語言（解釋型）
大綱：
??1.注釋方法
??2.js中斷(duan)句(ju)形式（, 和 ;）
??3.js存在形式與引入
??4.變(bian)量與常(chang)量的聲明(ming)和定(ding)義
??5.基本數據類型及方法
??6.數據類型的轉(zhuan)換??
??7.隱式轉換
??8.三元表達式
注釋方法
js中斷句形式
“ , ”: 對象(xiang)的屬性和方(fang)法用(yong) , 分割
“ ; ”: 語句的(de)借(jie)宿用 ; 分(fen)割
js存在形式與引入
??1.外部(bu)js（一般(ban)位于(yu)static目錄(lu)的js文(wen)件夾下(xia)面）
????引入：<script src="./static/my.js"> </script>
??2.內部jjs（一(yi)般位(wei)于head標簽的css樣式下面(mian) 或 body標簽結束(shu)位(wei)置）
????head標簽里
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
alert(1); //alert彈窗
</script>
</head>
????body標簽結(jie)束(shu)位置(zhi)
<body>
<h1 id="h1"><span>你好</span></h1>
<script>
alert(h1.innerHTML);
alert(h1.innerText);
</script>
</body>1->
2->
3->
原因：單線程
????3.行間js：一般寫在元素(su)的指定屬性值中
變量與常量定義和聲明
????1，變量??var let
聲明：變量首次出現用var或者(zhe)let關鍵字進行(xing)聲明，后(hou)續使用改變量無須(xu)加關鍵字????var全局變量??let局部變量
定義(yi)：var 變量名 = 值 ??let 變量名 = 值
????2.常量 ??const
聲(sheng)(sheng)明(ming)：用const聲(sheng)(sheng)明(ming)
定義：const 變(bian)量名 = 值(zhi)
????3.超全(quan)局對象(xiang)進行屬性(xing)賦值 不用var let const聲明??name = "guoahn"??即name是全(quan)局對象(xiang)Window的屬性(xing)而不是一個變(bian)量
<body>
<script>
name = 200; //本質寫法：this.name = 200 不是進行聲明變量 而是對Windou對象進行屬性賦值
console.log(this); //Window
</script>
</body>
基本數據類型及方法
通過typeof進行查看類型??console.log(typeof num);
??
??
??
??與python區別：1.python3中(zhong)bool類(lei)(lei)(lei)型(xing)是int類(lei)(lei)(lei)型(xing)的子類(lei)(lei)(lei) ??而js中(zhong)2者是完全不相干(gan)的數據類(lei)(lei)(lei)型(xing)
????????? 2.js中Array表象相當于(yu)python中的list
???????? 3.js中(zhong)Object表象相當于(yu)python中(zhong)的(de)字典
????????? 4.js中Array類型屬(shu)于Object類型
????1.String類型
聲明(ming)： var name = "guohan"；??var name = String（“guohan”）;
常見方法：??1.length??var v = name.length；
???????2.索引???var v = name[0];
???????3.切(qie)片(pian)???var v = name.substring(0，2)；
???????4.去除空白 var v = name.trim（）；
???????5.字(zi)符(fu)串重復 repeat(次數);??
var content;
for (let i = 1; i <= 4; i++) {
content = "";
content = "*".repeat(i);
console.log(content);
}
????2.Array類型（屬于Object類型）
聲明： var v =["guohan","gh"];??var v = Array["guohan","gh"];
常見方法： 1.length ??2.索引（改/查）
????? 3.增(zeng)：?????? 3.1 尾(wei)部增(zeng)加：v.push("你好")；
?????????????? 3.2 ;頭部(bu)增加：v.unshift("你好(hao)")；
?????????????? 3.3 索(suo)引增(zeng)加：v.splice（索(suo)引位置，0，元素(su)）；????v.splice(1,0,"你好"）；
????? 4.刪(shan)：??????4.1 尾部刪(shan)除：v.pop();
????????????? 4.2 頭(tou)部刪除：v.shift();
?????????????? 4.3 索引(yin)進行刪除(chu)： v.splice(索引(yin)位置，1)；
?????5.判斷(duan)是否是數組：Array.isArray(變(bian)量(liang)) 返回boolean類型??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)可以是任意(yi)數據(ju)類型的(de)數據(ju) 如 1（屬性(xing)）：2（值(zhi)）
聲明：
方式一（直接創建有屬性有方法的對象） 屬性名與屬性值之間必須用 : 連接
<body>
<script>
var Person = {
name : "guohan", //屬性和方法用,隔開 屬性和屬性值用:
age : 22,
say(){
return "你好"
}
};
console.log(Person,Person.say());
</script>
</body>
方式二（用函數創建對象）
<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>
方式(shi)三(san)（用(yong)類創建對象）
<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>
方式四(si)（創建空對象，添加屬性和方法）不常(chang)用
//創建對象(Object)方式二(創建空對象再去添加屬性和方法)
var Info = new Object();
Info.name = "guohan";
Info.age = 18;
Info.say = function(){
return "你好";
};
console.log(Info);
常見方法:??1.length??
?????? 2.增/改/查類似python
??????3.刪??delete info["屬性(xing)"]
????4.undefined類型
觸發undefined條件 1.變量未進行賦值??2.變量賦值為undefined
????
????5.null類型（本身也是對象(xiang)）
相當于(yu)python中的None??只(zhi)有給變量賦值(zhi)為null時才有null的存在(zai)??用于(yu)進(jin)行變量的初始(shi)化
數據類型的轉換
String
String轉(zhuan)Boolen
除(chu)了空字(zi)符(fu)串(chuan)轉(zhuan)(zhuan)為false 其(qi)他有類容的(de)字(zi)符(fu)串(chuan)（如“ ”（空格(ge)）“0”）均轉(zhuan)(zhuan)換為true????python中純(chun)空格(ge)的(de)str轉(zhuan)(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
除了純數(shu)字形式的字符串能(neng)通過Number進行轉換(huan)其他符合一(yi)定條件的得通過parseInt和parseFloat方法進行轉換(huan)轉換(huan)????“-.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和Number轉(zhuan)String和String轉(zhuan)Number
1.數值(zhi)之間可以進(jin)行轉換：parseInt和(he)parseFloat（Int->Float , Float->Int)??但是Int轉Float時不展示小(xiao)數位
//數值之間的轉換 parseInt和parseFloat
var num1 = 10;
var num2 = 3.14;
console.log(parseFloat(num1),parseInt(num2)); //整數轉浮點數不加小數位 10 32.所有數值類型(xing)均可以轉成字符串類型(xing)
3.字(zi)符串(chuan)類型轉數值類型：
????只要(yao)是數值(zhi)開(kai)頭的字符(fu)串(chuan)均可以通過(guo)parseInt和parseFloat進行轉換??注意：千分(fen)位表示的數值(zhi)字符(fu)串(chuan)通過(guo)這方法只能識別(bie)開(kai)頭
//字符串轉數值
//純數值形式的字符串 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????非數(shu)值開(kai)頭(tou)的字符串通過parseInt和parseFloat進(jin)行(xing)轉(zhuan)換??得(de)到NaN（特殊的數(shu)值類(lei)型）
//非數值開頭的字符串轉數字
var num5 = "共3元";
console.log(parseInt(num5)); //NaN
Boolean轉(zhuan)Number和Number轉(zhuan)Boolean
數值類型轉布爾類型
只有(you)0和NaN轉成Boolean為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)
