For You > js笔记

js笔记

2018-09-07

js

####null和undefined两者数值相等，类型不同

1
if（null==undefined）返回true；if（null===undefined）返回false,两者不同类型；
1
2
3
var test="2e3";test=parseFloat(test);//test=parseInt(test);
alert(test)；
2000（转换为float时会用科学计数法，结果为2000）//2（转换为int型结果为2）

null支持自增自减（–、++）

switch、case语句：若语句中没有break（在匹配到其中一个case的情况下），条件语句将会顺序执行，不会考虑下面case的情况,直到遇到break；若没有匹配的case，将会执行default，也会执行default下面的case（没有break的情况下）；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*执行结果为 01case 02case 03case*/
var i=1;
switch (i){
    case 1:document.write("01case");
    case 2:document.write("02case");
    case 3:document.write("03case");
}
/*执行结果为nofit 03case （当有brake时，执行结果为nofit）*/
var i=5;
switch (i){
    case 1:
           document.write("01case");
    case 2:
           document.write("02case");
    default：
            document.write("nofit");
    //break；
    case 3:
            document.write("03case");
}

continue语句跳过当前花括号内的语句；

打印九九乘法表

1
2
3
4
5
6
7
8
9
10
11
12
document.write('<table border="1" cellpading="0" width="800">');
for(var i=1;i<=9;i++)//for(var i=9;i>=1;i--)注释内容用来打印倒得乘法表
  {
    document.write('<tr>');
      for(var j=1;j<=i;j++)//for(var j=i;j>=1;j--)
        {
    document.write('<td bgcolor="grey">'+j+'x'+i+'='+i*j+'</td>')
         }
    document.write('</tr>');
    
  }
 document.write('</table>');

百钱买百鸡问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var x,y,z;//x为公鸡数量，y为母鸡数量，z为小鸡数量
      var cost;//费用

       for(x=0;x<=20;x++){/*公鸡最多20只*/
           for(y=0;y<=33;y++){/*母鸡最多33只*/
               z=100-x-y;
               if(z%3==0){/*刚好满足小鸡数为整数，且刚好一百只鸡*/
                   cost=5*x+3*y+z/3;
                   if(cost==100){
                       document.write("公鸡"+x+"只\n"+"母鸡"+y+"只\n"+"小鸡"+z+"只<br>");
                   }
               }
           }
       }

函数参数问题

1
2
3
4
5
6
7
function calc1(num1,num2)
{
    num1=num1||1;/*当函数调用不给参数时，num会取值为1，当有参数时，使用原来的参数*/
    num2=num2||2;/*同理*/
    return (num1+num2);  
}
calc1();

可以通过arguments对象实现可变参数的函数，也可以实现默认值的效果；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*可变参数形式的函数*/
function test()
{
  var paramsNum=arguments.length;/*得到传入参数的个数*/
  
  var sum=0;
  for(var i=0;i<paramsNum;i++)
    {
      
      sum+=arguments[i];
      }
  return sum;
  
}

function test1()
{
  //var x=arguments[0]||2;
  var x=arguments[0]?arguments[0]:2;
  /*同上一句话等价，但是三元运算符只对arguments对象生效*/
  
  var y=arguments[1]||3;
  
  return (x+y);
}
document.write(test(1,3,6,7,9)+"</br>");//26
document.write(test1(3,5)+"</br>");//8
document.write(test1());//5

通过 isFinite()检测是否为无穷值（函数含义等同于判断这个数值是否有穷）；

1
2
var x=Infinity;/-Infinity,0/0
alert(isFinite(x));//false

创建一个普通的空对象；

1
2
var obj=Object.create(Object.prototype);
或者var obj=Object.create(null);

hasOwnPropertype 检测某个对象是否含有指定的自身属性(不包括从Object继承而来的属性。var obj=Object.create({x:1}))

属性值中的get和set方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var obj={
	x:1,
	y:2,
	z:3,
	get zhouchang()
	{
		return this.x+this.y+this.z;
	},
	set doublecircle(val)
	{
		this.x*=val;
		this.y*=val;
		this.z*=val;
	}
}
document.write(obj.zhouchang);//没有该属性时调用get方法，返回结果6
obj.doublecircle=3;//赋值时没有该属性，调用set方法
document.write(obj.zhouchang);//18
document.write(obj.x);//3，此时属性值被改变

获取对象属性值的三种方式

1
2
3
4
5
for(var p in obj)

Object.keys(obj)

Object.getOwnPropertyNames(obj)

正则匹配。exec（string）函数

1
2
3
4
5
6
7
8
9
10
11
var str="this is a test hello maIzi hello world";
var patt=/i/g;
var arr;
/*下次执行时会从已经匹配到的元素的下一个位置开始继续查找，但是每次只匹配一个，所以数组arr中只存在一个元素*/
while((arr=patt.exec(str))!==null)
  {
    var msg='Find  '+arr[0]+'!';
    msg+='the next position is '+patt.lastIndex;
    console.log(msg);
    
  }

unshift 向数组头部添加元素 。shift将素组元素从头部压出。

1
2
3
4
5
6
/*声明新数组*/
var arr=[]; 
/*向数组头部添加元素*  代码注释部分为从尾部向数组假如元素，也从尾部删除*/
arr.unshift(1,2,3,'test',null);//arr.push('c','f',1,4,undefinde);
/*从头部删除元素*/
arr.shift();//arr.pop();

对浏览器适配以及监听等方法的封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
var EventUtil={
addHandle:function(element,type,handle){
if(element.addEventListener)
{/*添加监听*/

	element.addEventListener(type,handle,false);
}
else if(element.attachEvent)
{
	element.attachEvent('on'+type,handle);
}else{

	element['on'+type]=handle;
}

},
removeHandler:function(element,type,handle){
/*移除监听*/
	if(element.removeEventListener){
		element.removeEventListener(type,handle,false);
	}
	else if(element.datachEvent){
		element.datachEvent('on'+type,handle);
	}
	else{
		element['on'+type]=null;
	}
}，
getTarget:function(event){

	return event.target||event.srcElement;
},
getEvent:function(event){
	/*获取事件对象*/
  return event?event:window.event;

},
preventDefault:function(event){
//*取消默认事件*/
if(event.preventDefault){
	event.preventDefault();
}
else 
{
	event.returnValue=false;
}
},
stopPropagation:function(event){
	/*取消冒泡*/
	if(event.stopPropagation){
		event.stopPropagation();
	}
	else
	{
		event.cancelBubble=true;
	}
}



};

对封装的函数进行测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="EventUtil.js"></script>
	<meta charset="utf-8">
	<title>事件</title>
</head>
<body>

<input type="button" id="btn1" value="按钮一" />
<input type="button" id="btn2" value="按钮二" />
<input type="button" id="btn3" value="按钮三" />
<script type="text/javascript">
var btn1=document.getElementById("btn1");
var btn3=document.getElementById("btn3");
var btn2=document.getElementById("btn2");
/*var count=0;
btn1.onclick=function()
{
	alert("按钮点击事件"+count++);
	if(count==2)
	{
		btn1.onclick=null;
	}

}*/
/*false表明按冒泡顺序弹出，true为捕获截断，即从外往里，先是document，然后HTML....*/
/*var count=0;
var handle2=function(){
	alert("成功移除");
}

var handle1=function()
{
alert("按钮点击事件次数"+count++);
	if(count==2)
	{
		btn1.removeEventListener('click',handle1,false);
	}
}
//btn1.addEventListener('click',handle1,false);
EventUtil.addHandle(btn1,'click',handle1);*/	
	/*var e=e||window.event;
	if(typeof e.cancelBubble=='undefinded')
	{
		e.stopPropagation(); 
	}
	else 
	{
		e.cancelBubble=true;
	}*/
	


/*btn1.onclick=function()
{
	alert("按钮点击事件");
}*/
/*function test() 
{
	alert("按钮点击事件")；
}*/
var test2=function()
{
	alert("按钮点击事件");
};

EventUtil.addHandle(btn2,'click',test2);

var test3=function()
{
alert('事件移除');
EventUtil.removeHandler(btn2,'click',test2);
};
EventUtil.addHandle(btn3,'click',test3);
</script>
</body>
</html>

关于自调用函数及闭包问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/*将函数指定给变量的形式*/
var g=function(){
		console.log("excel g");
	}

/*自调用函数*/
(function()
{
	var a=6;
	var b=5;
	function f()
	{
		alert(a);
	}
	window.f=f;

})();
f();

  首先我们看自调用函数部分，指定window.f=f；（如果需要的函数比较多，都可以按同样的方式指定，以便在外部调用）目的是在自调用函数外部可以直接使用f（）来调用我们需要的函数，之所以要用这种方式是因为可以减少全局变量的声明，并且不会再函数执行完销毁变量，可以让声明的变量一直在系统中占有一定内存，不会销毁，也实现了js的闭包。
  其次上面两块代码存在问题，在按上述方式写后，系统会执行并没有调用的g()函数，而不会再往下执行自调用函数，也就是说按上面方式生命的函数g（）,不可以与自调用函数共存，需要用字面量形式或者函数名的形式声明函数，避免程序出现错误。

闭包的理解

1
2
3
4
5
6
7
8
9
10
11
12
13
function f()
{
	var a=2;
	var b=23;
	return function f2()
	{
		alert(a+b);
	}
	
}
var res=f();
res();
在跳出f()函数外面。里面的函数f2()仍然可以调用f()的词法环境，内部函数的scope保存了f()的词法环境，这也是闭包的特性；