javascript教程(2)——数据类型转化和分支循环结构

1.数据类型转化

1.1 显示数据类型转化

1.1.1 转数字类型

Number()  

可以将任意类型的参数mix转换为数值类型，其规则为：    1.如果是布尔值，true和false分别被转换为1和0  2.如果是数字值，返回本身  3.如果是null，返回04.如果是undefined，返回NaN  5.如果是字符串，遵循以下规则：  ①如果字符串中只包含数字，则将其转换为十进制（忽略前导0）  ②如果字符串中包含有效的浮点格式，将其转换为浮点数值（忽略前导0）  ③ 如果是空字符串，将其转换为0  ④ 如果字符串中包含非以上格式，则将其转换为NaN
 

Number("hello World!")// 结果NaN 
Number("020dd")// 结果NaN
Number("070") // 结果70
Number(true)  // 结果1
Number("0x8")// 结果8

parseInt(string, radix)  

parseInt() 函数可解析一个字符串，并返回一个整数。    1.忽略字符串前面的空格，直至找到第一个非空字符。  2.如果第一个字符不是数字符号或者负号，返回NaN。    3.如果第一个字符是数字，则继续解析直至字符串解析完毕或者遇到一个非数字符号为止 。    4.如果上步解析的结果以0开头，则将其当作八进制来解析；如果以0x 开头，则将其当作十六进制来解析。  5.如果指定radix参数，则以radix为基数进行解析。    

parseInt("hello World!");// 结果NaN
parseInt(" 020dd");// 结果20
parseInt("070");// 结果70 
parseInt(true); // 结果NaN
parseInt("0x8f",16);// 结果143    
parseInt("22.5"); //结果22 

parseInt(string)  

将字符串转换为浮点数类型的数值规则与parseInt基本相同，但也有点区别：字符串中第一个小数点符号是有效的，另外parseFloat会忽略所有前导0，如果字符串包含一个可解析为整数的数，则返回整数值而不是浮点数值。

var obj = {
y:"10.0",
x:"0010",
z:"0.123浮点"
}   
parseFloat(obj.x); //结果10
parseFloat(obj.z); //结果0.123
parseFloat(obj.y); //结果10.0   

1.1.2 转字符串类型

toString(radix)  

除undefined和null之外的所有类型的值都具有toString()方法，其作用是返回对象的字符串表示

<center>表1-1 toString转字符串返回值</center>

对象	返回值
Array	将Array的元素转换为字符串，结果字符串由都好分隔，且连接起来
Boolean	如果Boolean值为true，则返回"true"。否则，返回"false"
Date	返回日期的文字表示法
Number	可以把一个Number对象转换为一个字符串，并返回结果
String	返回一个String对象值
Object	返回"[object object]"

fun : function(){},
obj : new Object()
boo.b.toString() //结果false  
boo.e.toString(2) //结果1010   
boo.e.toString(10) // 结果10 
boo.e.toString(16) // 结果a  
boo.date.toString()// 结果Mon May 09 
//2016 16:48:25 
//GMT+0800 (中国标准时间)
boo.fun.toString() // 结果function (){}
boo.obj.toString() // 结果[object Object]   

String(mix)  

将任何类型的值转换为字符串，其规则为：    1.如果有toString()方法，则调用该方法（不传递radix参数）并返回结果。  2.如果是null，返回”null”   。3.如果是undefined，返回”undefined” 。  

String("hello CSSer!");
// 结果hello CSSer!
String(new Boolean(0));
// 结果false  
String(070);  
// 结果56 
String(true); 
// 结果true   
String("0x8f");   
// 结果0x8f   
String("22.5");
// 结果22.5   

toFixed(num)  

toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。 返回字符串表示，num是保留小数位数。注意：只能操作将数字变成字符串。

var a = 10.234;
var res = a.toFixed(2);
document.writeln(res);  
// 结果为 10.23

 

1.1.3 转布尔型

Boolean(mix)  

当要转换的值是至少有一个字符的字符串、非0数字或对象时，Boolean()函数将返回true。如果该值是空字符串、数字 0、undefined或null，它将返回false。

Boolean("");// 结果false  
Boolean("hello");// 结果true   
Boolean(100); // 结果true   
Boolean(null);// 结果false  
Boolean(0); // 结果false  
Boolean(new Object());
//结果true

1.2 隐式数据类型转化

JavaScript的数据类型是非常弱的（不然不会叫它做弱类型语言了）！在使用算术运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算，是因为JavaScript引擎在运算之前会悄悄的把他们进行了隐式类型转换的，如下是数值类型和布尔类型的相加：

3 + true; // 4

结果是一个数值型！如果是在C或者Java环境的话，上面的运算肯定会因为运算符两边的数据类型不一致而导致报错的！但是，在JavaScript中，只有少数情况下，错误类型才会导致出错，比如调用非函数，或者读取null或者undefined的属性时，如下：

"hello"(1); 
// error: not a function
null.x; 
// error: cannot read property 'x' of null

结果是一个数值型！如果是在C或者Java环境的话，上面的运算肯定会因为运算符两边的数据类型不一致而导致报错的！但是，在JavaScript中，只有少数情况下，错误类型才会导致出错，比如调用非函数，或者读取null或者undefined的属性时，如下：

多数情况下，JavaScript都不会出错的，而是自动的进行相应的类型转换。比如-, *, /,和%等算术运算符都会把操作数转换成数字的，但是“+”号就有点不一样了，有些情况下，它是算术加号，有些情况下，是字符串连接符号，具体的要看它的操作数，如下：

2 + 3; // 5
"hello" + " world"; // "hello world"

但是，如果字符串和数字相加，会是怎样的结果呢？JavaScript会自动把数字转换成字符的，不管数字在前还是字符串在前，如下：

"2" + 3; // "23"
2 + "3"; // "23"

字符串和数字相加结果是字符串  此外，需要注意的是，“+”的运算方向是从左到右的，如下：

1 + 2 + "3"; // "33"

这与下面是等价的：

(1 + 2) + "3"; // "33"

相比之下，下面的结果是不一样的：

1 + "2" + 3; // "123"

但是，隐式类型转换，有时候，会隐藏一些错误的，比如，null会转换成0，undefined会转换成NaN。需要注意的是，NaN和NaN是不相等的（这是由于浮点数的精度决定的），如下：

var x = NaN;
x === NaN; // false

虽然，JavaScript提供了isNaN来检测某个值是否为NaN，但是，这也不太精确的，因为，在调用isNaN函数之前，本身就存在了一个隐式转换的过程，它会把那些原本不是NaN的值转换成NaN的，如下：

isNaN("foo"); 
// true
isNaN(undefined); 
// true
isNaN({}); 
// true
isNaN({ valueOf: "foo" }); 
// true

上面代码，我们使用isNaN来测试后，发现字符串，undefined，甚至对象，结果都返回真！！！但是，我们总不能说他们也是NaN吧？总而言之，得出的结论是：isNaN检测NaN并不可靠！！！

幸运的是，有一种可靠的并且准确的方法可以检测NaN。我们都知道，只有NaN是自己不等自己的，那么，我们就以使用不等于号（！==）来判断一个数是否等于自身，从而，可以检测到NaN了，如下：

var a = NaN;
a !== a; // true
var b = "foo";
b !== b; // false
var c = undefined;
c !== c; // false
var d = {};
d !== d; // false
var e = { valueOf: "foo" };
e !== e; // false

 

2.短路逻辑

所谓的短路逻辑就是在我们 ||  和 && 运算中有些比较特别的处理：

|| 多个条件判断中从前往后当出现第一个条件为true的时候就立刻返回整个表达式的值为true，不再看后面的条件的结果是true还是false，即使后面的条件判断中有表达式写错也不会报错。  

&& 多个条件判断中从前往后当出现第一个条件为false的时候就立即返回整个表达式的值为false，不再看后面的条件的结果是true还是false，即使后面的条件判断中是有表达式写错也不会报错。

var a = 10;
var b =20;
var res = a>20 ||  b<40 ||  c<10;
console.log(res)  // 输出true

第一个条件是a>20是不成立的，接着第二个条件 b<40的是正确的，那么整个表达式的结果就是true，不再判断 c是否小于10.即使c不存在会报错。

var a = 10;
var res = a>20 &&  b<40 &&  c<10;
console.log(res)  // 输出false

第一个条件是a>20是不成立的，那么整个表达式的结果就是false，不会再去判断第二个，第三个条件是否是正确的。即使第二三个条件中有错误。

 

3.分支结构语句

3.1 if 语句

3.1.1 if 语句

只有当指定条件为 true 时，使用该语句来执行代码

注意：请使用小写的if。使用大写字母（IF）会生成   JavaScript错误！

语法：

if(条件){
    当条件为true 时执行的代码
}
var num = 10;
if(num == 10){
    alert("判断正确"+"<br />");
}

 

3.1.2 if...else 语句

当条件为 true 时执行代码，当条件为 false 时执行其他代码

语法：

if(条件){
    当条件为 true 时执行的代码
}else{
    当条件为 false 时执行的代码
}

举例:

var num = 5;
if(num < 10){
   alert("结果为true");
}else{
    alert("结果为false");
}

3.1.3 if...else if...else 语句

使用该语句来选择多个代码块之一来执行

语法：

if(条件1){
    当条件1为true 时执行的代码
}else if(条件2){
    当条件2为 true 时执行的代码
}else{
    当条件1和条件2都不true时执行的代码
}

距离

var num = 10;   
if(num < 10){   
   alert("num的值是小于10的");
}else if(num > 10){ 
    alert("num的值是大于10的");    
}else{
   alert("num的值是等于10的");    
}

 

3.2 switch 语句

switch 语句用于基于不同的条件来执行不同的动作。使用 switch 语句来选择要执行的多个代码块之一。

举例：

var date = new Date().getDay(); 
var str;
switch(date){
    case 1 :
        str = "今天是星期一"; 
        break;
    case 2 :
        str = "今天是星期二";
        break;  
    case 3 :    
        str = "今天是星期三";
        break;  
    case 4 :    
        str = "今天是星期四";
        break;  
    case 5 :    
        str = "今天是星期五";
        break;  
    case 6 :    
        str = "今天是星期六";
        break;  
    default :   
        str = "今天是星期日";
        break;  
}   
document.write(str);    
   
// 结果输出今天是星期几

default 关键词    

使用 default 关键词来规定匹配不存在时做的事情：

switch(date){   
    case 6: 
        str = "今天是星期六";
        break;  
    case 0: 
        str = "今天是星期日";
        break;  
    default :
        str = "期待周末的到来！！！"; 
    break;  
}   
document.write(str);    
// 如果不是周末, 则输出今天是星期几

 

4.循环结构语句

4.1 while循环

只要指定条件为 true，循环就可以一直执行代码。while循环语句也称为前测试循环语句，它是利用一个条件来控制是否要继续重复执行这个语句。while循环语句与for循环语句相比，无论是语法还是执行的流程，都较为简明易懂  

 

语法

while (条件){
    需要执行的代码
}
var i = 0;
while(i < 10){
    document.write(i+++"<br />");   
}

4.2 do...while 循环

do...while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。  

语法

do{
    需要执行的代码
}while (条件);

var i = 0;
do{
    document.writeln(i++);
}while(i > 1)

 

4.3 for循环

4.3.1 for循环

循环可以将代码块执行指定的次数。    

语法：

for(初始化；判断语句；自增){
    //执行语句
}

for(var i = 0; i < 5  ; i++){	
    document.write(i);
}
var x = 0,len = 10;
for( ; x < len ; ){
document.write(x + "<br />");
x++;
}

 

 

4.3.2 for in 循环

JavaScript中 for/in 语句循环遍历对象的属性：

var x ;
var parson = {uname:"tom",age:22}
for(x in parson){
    document.write(parson[x] + "<br />")	
}	

结果是：tom 22    

 

4.4 跳转语句

4.4.1 break 语句

语句用于跳出循环。当条件到达break的时候，则跳出此循环，也就是终止循环。

for(var i=0;i<10;i++){
 	if(i==3){	
    break;
    }
    document.write(i)；	
// 结果是： 012
}   

 

4.4.2 continue 语句

语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代,也就是中止当前这次循环，还会继续后面的循环。

for(var i = 0;i < 10;i ++){	
    if( i == 6){	
        continue;	
    }	
    document.writeln(i);	
// 结果0 、1、2、3、5、
}

 

PS：纯属本人原创，如有错误 欢迎指点  不才会及时更正  互相学习