JavaScript小特性(1) – 基本语法

http://rolfzhang.com/articles/191.html


JavaScript小特性(7)——面向对象http://rolfzhang.com/articles/825.html

其他所有 http://rolfzhang.com/?s=JavaScript%E5%B0%8F%E7%89%B9%E6%80%A7


最近看完了《ppk on JavaScript》,一本算是进阶的JavaScript基础书,讲了很多不看书发现不了的小细节,但是都是些很重要的细节,例如事件处理,浏览器兼容等等。

本来打算看O’Reilly的《JavaScript权威指南》(好像是厚厚一大本)巩固一下基础,网易面试那个考官给我推荐的,去图书馆找不着,应该被借了。碰巧发现这本《ppk》,图灵出版,淘宝UED译,应该差不到哪去,就借回去了(而且比较薄,我喜欢薄滴~[偷笑] )。

下面我就讲些看书中遇到的一些要注意的地方:

1、数据类型转换

JavaScript总的来说只有4种数据类型:number、string、boolean、对象(如果算上undefined和null就6种,NaN是number类型)。

JavaScript是弱变量类型的,一个变量可以存放任意数据类型,而且数据类型可以自动互相转化(这东西看起来方便,却是万恶的根源呀~~)。

1
2
3
4
5
6
7
8
var a = '5' //a为string
var b = a * 2; //string与number相乘,b数字
var c = a + b; //因为a是string,表达式变为string
c = new Object(); //c被赋值为一个object
if (a && b && c){ //number、string、object自动转为boolean
     //null、undefined、零、NaN都转为false,其他转为true
     //do something
}

问题容易出在哪呢?最常见的就是‘+(加号)’既是加法运算符,又是字符串连接符,导致数字运算经常不知怎么的变成了字符串连接。

介绍几种强制数据类型转换的方法:

  • ” + a -> string
  • a * 1 -> number //如果不能正确转换,则为NaN(not a number)
  • !!a -> bool
  • a.toFixed(num) -> string //转为固定小数位数的字符串(a为number类型)

2011/5/20修订:

+a -> number //同 a*1,此处的“+”是正号的意思

其实,JavaScript有自带的强制转换方法,不过我觉得上面的要方便些

  • Boolean(value) – 把给定的值转换成 Boolean 型;
  • Number(value) – 把给定的值转换成数字(可以是整数或浮点数);
  • String(value) – 把给定的值转换成字符串;

 

顺带说一下浮点数转为整数的几个方法(js的数字类型是不分浮点数与整数的):

  • Math.round(num);//四舍五入
  • Math.floor(num);//向下取整
  • Math.ceil(num);//向上取整

 

2、特殊返回值

JavaScript 的布尔运算 &&、|| 是有返回值的,但不是boolean值,而是该布尔运算计算的最后一个表达式的值

1
2
3
4
5
6
var x = 'JavaScript很诡异' ;
var y = 'Java很繁琐' ;
alert(x || y);
//输出:JavaScript很诡异,x转换为true,不继续运算,返回x
alert(x && y);
//输出:Java很繁琐,x转为true,继续运算,返回y

这种特性常用于检测某对象是否存在(虽然&&也可以用来做对象检测,但我们一般不这样做)

1
2
3
4
5
function eventHandler(e){ //某注册事件的处理函数
     var evt = e || window.event; //获得事件对象,W3C和微软的获取方法不同
     vat evtTarget = evt.target || evt.srcElement; //获取事件目标对象
     //do something
}

另外js里面,=(等号) 也是有返回值的,即可以连续赋值,如:

window.jQuery = window.$ = jQuery

 

3、控制结构

JavaScript支持所有常用的控制结构(这是必须的嘛),如if/else if/else,while/do while,for,continue/break,try/catch/finally …

还有一种for in结构

1
2
3
4
5
6
7
8
9
var test = {
     a: '1' ,
     b:2,
     c: function (){alert(3)}
}
for ( var i in test){
     alert( typeof test[i]); //此处的i是对象的属性名
     //如果是数组,则是数组的索引
}

它还支持使用标签做控制结构,如

1
2
3
4
5
6
7
8
9
10
outerloop:
for (;;){
     for (;;){
         if ( true ){
             alert( 'innerloop' );
             break outerloop; //直接跳出外层循环
         }
     }
}
alert( 'outerloop' );

顺便说一个for循环和try/catch结合,解决浏览器工作环境依赖的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function createXMLHttpObject(){
     var xmlhttp = false ;
     for ( var i=0,len=XMLHttpFactories.length;i<len;i++){
         try {
             xmlhttp = XMLHttpFactories[i]();
         }cateh(e){
             //如果产生异常就试下一个
             continue ;
         }
         break ; //找到就跳出循环
     }
     return xmlhttp;
}
//此数组包含创建XMLHTTP对象的所有可能方式
var XMLHttpFactories = [
     function (){ return new XMLHttpRequest()},
     function (){ return new ActiveXObject( 'Msxml2.XMLHTTP' )},
     function (){ return new ActiveXObject( 'Msxml3.XMLHTTP' )},
     function (){ return new ActiveXObject( 'Microsoft.XMLHTTP' )}
];

 

4、对象/数组

对象和数组为啥要放在一起讲呢,因为我觉得他们在很多地方非常相似,我觉得数组可以算是一种简化版的对象吧(当然数组和对象从本质上还是很大不同的)。

先说几点关于对象和数组的重要的杂事~

  • a、一个数组可以保存多个数据类型,如var arr = [1,'a',true,function(){alert('a')}];//包括对象、函数、嵌套的数组
  • b、所有的全局变量都包含于一个全局对象window,也就是说 var a = 2 等同于 window.a = 2;//所以说,JavaScript其实是面向对象的,神马都与对象有关~
  • c、所有函数都是一个Function对象(既然是对象,你就可以给他附上各种属性,各种js库就是这样弄出来的),可以通过new FunctionName()的方法来创建新对象;
  • d、‘.(点)’是用于访问对象的属性或方法的,如test.a、test.method(),我们也可以这样:test['a']、test['method'](),两种方法等价。后一种访问方式有点像Map,可以当做key/value结构使用;

下面说说对象和数组的字面量,也就是用一个字符串代替对象或者数组的创建(便于信息的传输):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//标准对象创建方法
var test = new Object();
test.a = 100;
test.b = '100' ;
test.c = function (){alert(test.a*test.b);}
 
//对象字面量(也就是大名鼎鼎的JSON格式啦~~)
var test = {
     a: 100, //属性名:属性值,结尾有,(逗号)
     b: '100' ,
     c: function (){alert(test.a*test.b);} //最后一个无,(逗号)
}
 
//标准数组创建方法
var arr = new Array(1,2,3,4,5); //几乎没人用这种方法吧~
 
//数组字面量
var arr = [1,2,3,4,5]; //这种简单多了

 

5、函数

(此节新增于2011/5/20)

JavaScript里面,所有的函数都是一个对象。我们可以这样创建一个函数:

1
2
var sayHello = new Function( "toWho" , "alert(\"hello \"+toWho+\"!\")" );
sayHello( "world" );

Function对象的构造方法如下(前面的参数是函数接受的参数,最后一是函数体本身,全部都是字符串形式):

1
var myfun = new function (arg1, arg2, ..., argN, function_body)

Function对象里面有一个特殊的属性,arguments对象,里面包含了函数调用时传入的所有参数

1
2
3
4
5
function testArguments(){
     for ( var i in arguments){
         alert( "arguments[" +i+ "] : " +arguments[i]);
     }
}

既然所有的function都是一个对象,那么函数名就是指向这一对象的引用,我们可以将一个函数赋值给多个引用

var myfun = function(){

1
2
3
4
5
6
     alert( '这是一个函数' );
}
var myfun2 = myfun;
 
myfun();
myfun2();

那么问题又来了,既然函数名是一个引用,那么一个引用当然不能指向多个对象,导致JavaScript并不支持函数重载

虽然函数重载似乎对JavaScript并不是这么重要,但如果真要使用,可以考虑用arguments对象进行模拟函数重载,例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function add(){
     if (arguments.length == 1){
         return arguments[0]+1; //自增
     } else if (arguments.length > 1){
         var sum = 0;
         for ( var i in arguments){
             sum+=arguments[i]; //求和
         }
         return sum;
     }
     return 0;
}
alert(add(1));
alert(add(1,2,3));

JavaScript函数还有一个闭包的特性,欲知详情,请看这里,和这里

 

这篇就先说这么多,下回讲讲BOMDOM相关的东西,例如事件处理、DOM修改神马的~~~


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值