前端三劍客——javascript變量與數(shù)據(jù)類型
javascript： 編程語言（解釋型）
大綱：
??1.注釋方法
??2.js中斷句形式（, 和 ;）
??3.js存在形式與引入
??4.變量與常量的聲明和定義
??5.基本數(shù)據(jù)類型及方法
??6.數(shù)據(jù)類型的轉(zhuǎn)換??
??7.隱式轉(zhuǎn)換
??8.三元表達式
注釋方法
js中斷句形式
“ , ”: 對象的屬性和方法用 , 分割
“ ; ”: 語句的借宿用 ; 分割
js存在形式與引入
??1.外部js（一般位于static目錄的js文件夾下面）
????引入：<script src="./static/my.js"> </script>
??2.內(nèi)部jjs（一般位于head標簽的css樣式下面 或 body標簽結(jié)束位置）
????head標簽里
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
alert(1); //alert彈窗
</script>
</head>
????body標簽結(jié)束位置
<body>
<h1 id="h1"><span>你好</span></h1>
<script>
alert(h1.innerHTML);
alert(h1.innerText);
</script>
</body>1->
2->
3->
原因：單線程
????3.行間js：一般寫在元素的指定屬性值中
變量與常量定義和聲明
????1，變量??var let
聲明：變量首次出現(xiàn)用var或者let關鍵字進行聲明，后續(xù)使用改變量無須加關鍵字????var全局變量??let局部變量
定義：var 變量名 = 值 ??let 變量名 = 值
????2.常量 ??const
聲明：用const聲明
定義：const 變量名 = 值
????3.超全局對象進行屬性賦值 不用var let const聲明??name = "guoahn"??即name是全局對象Window的屬性而不是一個變量
<body>
<script>
name = 200; //本質(zhì)寫法：this.name = 200 不是進行聲明變量 而是對Windou對象進行屬性賦值
console.log(this); //Window
</script>
</body>
基本數(shù)據(jù)類型及方法
通過typeof進行查看類型??console.log(typeof num);
??
??
??
??與python區(qū)別：1.python3中bool類型是int類型的子類 ??而js中2者是完全不相干的數(shù)據(jù)類型
????????? 2.js中Array表象相當于python中的list
???????? 3.js中Object表象相當于python中的字典
????????? 4.js中Array類型屬于Object類型
????1.String類型
聲明： 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(次數(shù));??
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.增：?????? 3.1 尾部增加：v.push("你好")；
?????????????? 3.2 頭部增加：v.unshift("你好")；
?????????????? 3.3 索引增加：v.splice（索引位置，0，元素）；????v.splice(1,0,"你好"）；
??????????????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 索引進行刪除： v.splice(索引位置，1)；
?????5.判斷是否是數(shù)組：Array.isArray(變量) 返回boolean類型??console.log( v , Array.isArray(v))；
補充：forEach(數(shù)組的內(nèi)置方法）: 遍歷數(shù)組的每個元素并對每個元素進行一次指定的函數(shù)（回調(diào)函數(shù)）
//數(shù)組.forEach((當前元素，當前下標，原數(shù)組)=>{函數(shù)代碼語句;});var obj = ["guohan","gh","gg","hh"];
obj.forEach((item,key)=>{console.log(item)}) //數(shù)組.forEach((當前元素，當前下標，原數(shù)組)=>{函數(shù)代碼語句;});//里面是匿名函數(shù)新寫法
//obj.forEach(item=>{console.log(item)});
????3.Object類型????例：const obj = { name: "張三", age: 18 }; ??對象的屬性可以是任意數(shù)據(jù)類型的數(shù)據(jù) 如 1（屬性）：2（值）
聲明：
方式一（直接創(chuàng)建有屬性有方法的對象） 屬性名與屬性值之間必須用 : 連接
<body>
<script>
var Person = {
name : "guohan", //屬性和方法用,隔開 屬性和屬性值用:
age : 22,
say(){
return "你好"
}
};
console.log(Person,Person.say());
</script>
</body>
方式二（用函數(shù)創(chuàng)建對象）
<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>
方式三（用類創(chuàng)建對象）
<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>
方式四（創(chuàng)建空對象，添加屬性和方法）不常用
//創(chuàng)建對象(Object)方式二(創(chuàng)建空對象再去添加屬性和方法)
var Info = new Object();
Info.name = "guohan";
Info.age = 18;
Info.say = function(){
return "你好";
};
console.log(Info);
常見方法:??1.length??
?????? 2.增/改/查類似python
??????3.刪??delete info["屬性"]
????4.undefined類型
觸發(fā)undefined條件 1.變量未進行賦值??2.變量賦值為undefined
????
????5.null類型（本身也是對象）
相當于python中的None??只有給變量賦值為null時才有null的存在??用于進行變量的初始化
數(shù)據(jù)類型的轉(zhuǎn)換
String
String轉(zhuǎn)Boolen
除了空字符串轉(zhuǎn)為false 其他有類容的字符串（如“ ”（空格）“0”）均轉(zhuǎn)換為true????python中純空格的str轉(zhuǎn)bool是False
//String轉(zhuǎn)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轉(zhuǎn)Number
除了純數(shù)字形式的字符串能通過Number進行轉(zhuǎn)換其他符合一定條件的得通過parseInt和parseFloat方法進行轉(zhuǎn)換轉(zhuǎn)換????“-.5”表示－0.5可轉(zhuǎn)
//String轉(zhuǎn)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是特殊的數(shù)值類型 當轉(zhuǎn)換對象不符合條件時才轉(zhuǎn)換成NaN
console.log(typeof NaN); //number
String和Array
//String轉(zhuǎn)Array
var age = "18";
console.log(Array(age),typeof Array(age)); //['18'] 'object'
Number（較常見）
Number轉(zhuǎn)Number和Number轉(zhuǎn)String和String轉(zhuǎn)Number
1.數(shù)值之間可以進行轉(zhuǎn)換：parseInt和parseFloat（Int->Float , Float->Int)??但是Int轉(zhuǎn)Float時不展示小數(shù)位
//數(shù)值之間的轉(zhuǎn)換 parseInt和parseFloat
var num1 = 10;
var num2 = 3.14;
console.log(parseFloat(num1),parseInt(num2)); //整數(shù)轉(zhuǎn)浮點數(shù)不加小數(shù)位 10 32.所有數(shù)值類型均可以轉(zhuǎn)成字符串類型
3.字符串類型轉(zhuǎn)數(shù)值類型：
????只要是數(shù)值開頭的字符串均可以通過parseInt和parseFloat進行轉(zhuǎn)換??注意：千分位表示的數(shù)值字符串通過這方法只能識別開頭
//字符串轉(zhuǎn)數(shù)值
//純數(shù)值形式的字符串 Number
var num3 = "12.3";
console.log(Number(num3)); //12.3
console.log(parseInt(num3)); //12
//以數(shù)字開頭的字符串轉(zhuǎn)數(shù)值 parseInt和parseFloat
var num4 = "3.3公斤"
console.log(parseInt(num4)); //3
console.log(parseFloat(num4)); //3.3
//數(shù)值開頭的千分位表示法的字符串 parseInt只能識別開頭的數(shù)值并轉(zhuǎn)換
var num6 = "100_200_300"
console.log(parseInt(num6)); //100????非數(shù)值開頭的字符串通過parseInt和parseFloat進行轉(zhuǎn)換??得到NaN（特殊的數(shù)值類型）
//非數(shù)值開頭的字符串轉(zhuǎn)數(shù)字
var num5 = "共3元";
console.log(parseInt(num5)); //NaN
Boolean轉(zhuǎn)Number和Number轉(zhuǎn)Boolean
數(shù)值類型轉(zhuǎn)布爾類型
只有0和NaN轉(zhuǎn)成Boolean為false
//數(shù)值類型轉(zhuǎn)布爾類型
console.log(Boolean(99)); //true
console.log(Boolean(0)); //false布爾類型轉(zhuǎn)數(shù)值類型
//布爾類型轉(zhuǎn)數(shù)值類型
console.log(Number(true)); //1
console.log(Number(false)); //0
隱式轉(zhuǎn)換
/*
隱式轉(zhuǎn)換: 存在于弱類型語言如js php要求不像py那樣苛刻
+規(guī)則：倆個數(shù)值相加或者兩個字符串拼接
-規(guī)則：兩個數(shù)值相減
與python不同：python中隱式轉(zhuǎn)換主要集中于數(shù)值運算和布爾判斷print(1-True)>>>0 print(1 + 1.1)>>>2.1 if 1:
不能print("2"-"1") 即python隱式轉(zhuǎn)換要求苛刻
*/
//數(shù)值類型和布爾類型
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:條件？真時返回的結(jié)果:假時返回的結(jié)果
py:真時的返回結(jié)果 if 條件 else 假時返回的結(jié)果
*/
//js
age = 18;
var ret = age>=20?"成年人":"未成年人";
console.log(ret);
//py
age = 18
ret = "成年人" if age>=18 else "未成年人"
print(ret)
浙公網(wǎng)安備 33010602011771號