理解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>         //可以执行！！