理解JavaScript的類型轉換及語法規則

理解JavaScript的類型轉換及語法規則

1.parseInt(string,radix)

• 首先將數字轉換爲對應的進制數，且如果小數位大於6位，則會自動轉換爲浮點數！
• 然後開始讀取合法字符進行數字轉換

//radix接受2~36
parseInt(0.000008)//0
parseInt(0.0000008)//8
parseInt(1/0,19)//18

2.字符串轉換

/*
	toPrimitive抽象操作！！
	toPrimitive(obj)等價於:先計算obj.valueOf(),如果結果爲原始值,則返回此結果;否則.計算
	obj.toString(),如果結果是原始值,則返回此結果;否則,拋出異常

	對象通過valueOf方法，把自己轉換成數字，通過toString方法，把自己轉換成字符串
	
	具有valueOf方法的對象，應該定義一個相應的toString方法，用來返回相等的數字的字符串形式
	
	對於具體的對象可以自己定製valueOf和toString方法，相當於重寫
*/
var a=2
a={
    valueOf:function(){return 42},
    toString:function(){return 4}
}
c=a+""//"42"
d=String(a)//"4"
console.log(c,d)

3.相對於數字和字符串的類型轉換，布爾值的隱式轉換難以判斷[重點]

發生地點：在下列情況下，非布爾值會被隱式轉換爲布爾值

• if(…)
• for(…)
• while(…)及do…while(…)
• ? :
• ||及&&注：==在js中這兩個運算符返回的不一定是布爾值，而是兩個操作數中其中的一個值！！

var a=42
var b='abc'
var c=null
var d=a||b
console.log(d)//42
a||b//42

a&&b//"abc"
c||b//"abc"
//由於||及&&會對第一個操作數執行條件判斷，如果不是布爾值，先進行布爾值轉換，再執行條件判斷
//對於||如果條件判斷爲true則放回第一個操作數，否則返回第二個操作數的值，&&則相反！！

//相當於
a||b
a?a:b

a&&b
a?b:a

function foo(a,b){
    a=a||"hello"
    b=b||"world"    //表示空值合併運算符，檢查變量a，如果未賦值或者爲假值，則賦給一個默認值
    console.log(a+" "+b)//如果第一個表達式爲真，則條件判斷直接通過，後面的表達式不會再執行！！
}
foo()//"hello world"
foo("yang","huifan")//"yang huifan"

a&&foo()//&&又被稱爲把關運算符，前面表達式爲真時，則返回後面的表達式，如果a爲false，則條件判斷未
				//通過，後面的表達式不會再執行
//相當於
if(a){
    foo()
}//可見a&&foo()寫法更加簡潔！！！
var a=1
function foo(){
	console.log("foo被執行了！")
}
a&&foo()//"foo被執行了！"
a=0
a&&foo()//foo()不執行


//最後||及&&雖然返回的是操作數的值，但是用在if和for等語句中，最終還會進行隱式布爾值轉換！！

4.兩個相等“== ” 及 “===”

4.1==檢查值是否相等，但是允許在比較時進行值的類型轉換

1、數字和字符串比較時，優先轉換字符串成數字

2、布爾值與其他類型比較時，優先轉換布爾值成數字

3、所以在使用布爾判斷時，避免使用== 及 ===，而應該使用a或者 ！！a或者Boolean(a)

使用a及！！a的好處在於，後者不會發生類型轉換！！

4.2===檢查值和類型是否相等，但是禁止在比較時進行值的類型轉換

4.3null與undefined之間的相等比較，在===是不相等的， 在 ==中是相等的，除此之外與任意其他值比較都是false

var a=null
var b
a==b
a==null//true
b==null//true
a==false//false

4.4 對象與非對象的比較：優先轉換對象–>toPrimitive(obj)

var a=42
var b=[42]
a==b//true
//b先轉爲"42"，再轉爲42

var a=null
var b=Object(a)
a==b//false

var c=undefined
var d=Object(c)
c==d//false

//由於null和undefined不能夠被封裝在對象中，所以Object返回一個常規的空對象，而對於其他的封裝
//==會對封裝對象進行拆封，取出其中的值，進行比較！！
var a="abc"
var b=Object(a)
a==b//true

5."<“及“>”及”<=",">="的關係比較，以及其中涉及的類型轉換！

/*
	1、<=和>=在js中被等價於！>和！<的相反的情況
	2、<及>的比較發生的類型轉換規則爲：如果同時字符串，則比較首字母的大小，如果有非字符串，則轉換爲數
	字比較！！
*/

6.JavaScript的語法構成：表達式、語句、運算符

**注：**表達式相當於語句的短語，運算符充當連接詞，表達式一般都有返回值，而語句的執行一般有一個結果值！！

一般語句的結果值我們並不關心，也不需要獲得，但是有些情況下需要使用：

• 使用代碼塊{…}獲得最後一個執行的結果值
• 可以看出使用代碼塊不能直接獲得結果值，使用(…)可以直接獲得結果值
• 標籤語句{foo:bar()}或bar:{...}或對象解構var {a,b}=function(){return{a:42,b:"foo"}}

var a,b
b=if(true){
    a=2+1
}//不能直接獲得，會出現語法錯誤！

//可以使用eval
b=eval("if(true){a=2+1}")
console.log(b)//3

//使用(state1,state2...)使用小括號封裝多條語句，並返回最後一條語句的執行結果
var c=(1,2,4,6)
c//6

var a=9
var d=(a++,a)
a//10

//對象結構用法簡潔方便
function foo({a,b,c}){
    ...
}
foo({
    a:"foo",
    b:42,
    c:[1,2,3]
})//使用對象解構進行參數傳遞

7.JavaScript的運算符優先級及左關聯和右關聯

參見MDN：&&比||的優先級要高，結合爲從左往右

JavaScript會在每一行自動補上分號機制，但是不會再每行的中間補上，所以不是說JavaScript不需要分號！

8.JavaScript的switch語句

/*
	switch語句的case匹配嚴格按照===進行，如果需要使用==，則需要顯式調用,此外還需要特別注意一點，
		case語句的判斷不會進行布爾值的自動類型轉換，需要自己手動解決
*/
var a="hello world"
var b=10
switch(true){
    case 1:
        ...
    case 2:
        ...
    default:
        ...
}
        
switch(true){
    case a||b==1://結果爲hello world==1，但是不會自動轉換爲false，也就是說永遠不成立，
        		//需要手動解決!!(a||b==1)
        ...
    case a==2:
        ...
    default:
        ...
}
        

9.JavaScript語言的宿主環境及宿主對象區別於語言自身內建的對象！

理解宿主環境和宿主對象：由瀏覽器或者控制檯創建而非JavaScript引擎，提供給js引擎使用的變量

如：var a=document.createElement("div") 則對象a即爲一個宿主對象，差異：

​ 1、無法使用Object的內建方法，無法重寫

​ 2、等等…

console對象、DOM元素均是宿主對象

對於DOM，當創建一個DOM元素是，與此同時，也在js中創建了一個全局對象

<div id="foo"></div>

//js
if(typeof foo==undefined){
    foo=42
}//永遠不會執行
console.log(foo)//HTML元素

10.js文件的< script>標籤

//對於HTML多處嵌入<script>標籤，以此來引入js腳本文件，與純js文件有共同點和不同點
/*
	相同點：所有各處的腳本依然互相共享變量，對象
	不同點：js中的全局對象聲明提升機制不再起作用,而必須在前一個js文件聲明，才能在後一個js文件使用
	       不能夠先使用再聲明
	       
	       出現錯誤，無法執行腳本！！但是後序js文件依然可以執行，只是當前js程序將運行停止！！
*/
//js1
<script>
	foo()
</script>    
//js2
<script>    
	function foo(){...}
</script>    //出現錯誤，無法執行腳本！！但是後序js文件依然可以執行，只是當前js程序將運行停止！！
                   

<script>
	function foo(){...}
</script>    
//js2
<script>    
	foo()
</script>         //可以執行！！