javascript中call與replace方法!

1 call方法

call 方法最大特點就是可以改變當前所調用的方法所在的作用域

在作爲對象的調用過程中,很多時候需要用到this,
而在方法的調用中,this的值很多時候都是變動的
那麼如果需要在下一個被調用的方法中的this值和調用的方法的this一樣,換言之,
剛是要讓他們處在同一個作用域中,怎麼辦呢

那麼就可以採用call方法,當然也可以使用apply,也可以使用new

<span style="white-space:pre">	</span>var node = {
            init: function(){
                console.log("init");
                console.log(this);
            }
        };
        function test (){
            console.log(this);
            this.init();
        }
        test.call(node);

2 apply方法

apply的一些其他巧妙用法
細心的人可能已經察覺到,在我調用apply方法的時候,第一個參數是對象(this), 第二個參數是一個數組集合, 在調用Person的時候,他需要的不是一個數組,但是爲什麼他給我一個數組我仍然可以將數組解析爲一個一個的參數,這個就是apply的一個巧妙的用處,可以將一個數組默認的轉換爲一個參數列表([param1,param2,param3] 轉換爲 param1,param2,param3) 這個如果讓我們用程序來實現將數組的每一個項,來裝換爲參數的列表,可能都得費一會功夫,藉助apply的這點特性,所以就有了以下高效率的方法:
a) Math.max 可以實現得到數組中最大的一項
因爲Math.max 參數裏面不支持Math.max([param1,param2]) 也就是數組
但是它支持Math.max(param1,param2,param3…),所以可以根據剛纔apply的那個特點來解決 var max=Math.max.apply(null,array),這樣輕易的可以得到一個數組中最大的一項(apply會將一個數組裝換爲一個參數接一個參數的傳遞給方法)
這塊在調用的時候第一個參數給了一個null,這個是因爲沒有對象去調用這個方法,我只需要用這個方法幫我運算,得到返回的結果就行,.所以直接傳遞了一個null過去
b) Math.min  可以實現得到數組中最小的一項
同樣和 max是一個思想 var min=Math.min.apply(null,array);
c)Array.prototype.push 可以實現兩個數組合並
同樣push方法沒有提供push一個數組,但是它提供了push(param1,param,…paramN) 所以同樣也可以通過apply來裝換一下這個數組,即:

var arr1 = new Array("1","2","3"),
			arr2 = new Array("4","5","6");  
		Array.prototype.push.apply(arr1,arr2);  

也可以這樣理解,arr1調用了push方法,參數是通過apply將數組裝換爲參數列表的集合.

3 repalce方法

var reg = /([0-9]+$)|(([0-9]+\,)*([0-9]+\.)[0-9]$)/;
        var t = reg.exec("USD $100.00");
    /*console.log(t);
    console.log(reg.exec("USD $100.100"));
    console.log(reg.exec("USD $100"));
    console.log(reg.exec("USD $100.00"));
    console.log(reg.exec("USD $0.01"));
    console.log(reg.exec("USD $0.1"));*/
    console.log(reg.exec("USD $100,555.1"));
    var t = reg.exec("USD $100,555.1");
    console.log(parseFloat(t[0]));


    var number = "123123123.12";
    number.replace(/([0-9]{0,3},)+\.[0-9]+/);

js replace 第二個參數爲function()
參數最多個數根據第一個參數中的正則確定,換言之則是根據正則的分組數目確定.
第一個參數爲匹配到的字符
第二個參數到倒數第三個參數爲每一個分組所匹配到的字符
倒數第二個字符爲匹配到的字符的起始位置
 最後一個參數爲被匹配的字符

/**
	 *	以下正則含有兩個分組
	 * 
	 */
	String.prototype.capitalize = function(){
 
		return this.replace( /([a-z])([a-z])/g , function(m,a,b,p1,p2){
			return p1+p2.toUpperCase();
		});
	};
	String.prototype.capitalize2 = function(){
 
		return this.replace( /([a-z])([a-z])/g , function(m,a,p1,p2){
			return p1+p2.toUpperCase();
		});
	};
	String.prototype.capitalize3 = function(){
 
		return this.replace( /([a-z])([a-z])/g , function(m,p1,p2){
			return p1+p2.toUpperCase();
		});
	};
	String.prototype.capitalize4 = function(){
 
		return this.replace( /([a-z])([a-z])/g , function(m,p1){
			return p1.toUpperCase();
		});
	};
	String.prototype.capitalize5 = function(){
 
		return this.replace( /([a-z])([a-z])/g , function(m){
			return m;
		});
	};
	console.log("safsdafasdfasdfsd".capitalize());
	console.log("safsdafasdfasdfsd".capitalize2());
	console.log("safsdafasdfasdfsd".capitalize3());
	console.log("safsdafasdfasdfsd".capitalize4());
	console.log("safsdafasdfasdfsd".capitalize5());

	/**
	 *  以下正則沒有分組
	 */
	String.prototype.capitalize6 = function(){
 
		return this.replace( /[a-z][a-z]/g , function(m,a,b,p1,p2){
			return m;
		});
	};

	String.prototype.capitalize7 = function(){
 
		return this.replace( /[a-z][a-z]/g , function(m,a,p1,p2){
			return m;
		});
	};
	String.prototype.capitalize8 = function(){
 
		return this.replace( /[a-z][a-z]/g , function(m,p1,p2){
			return m;
		});
	};
	String.prototype.capitalize9 = function(){
 
		return this.replace( /[a-z][a-z]/g , function(m,p1){
			return m;
		});
	};
	String.prototype.capitalize10 = function(){
 
		return this.replace( /[a-z][a-z]/g , function(m){
			return m;
		});

	};
	console.log("safsdafasdfasdfsd".capitalize6());
	console.log("safsdafasdfasdfsd".capitalize7());
	console.log("safsdafasdfasdfsd".capitalize8());
	console.log("safsdafasdfasdfsd".capitalize9());
	console.log("safsdafasdfasdfsd".capitalize10());

4 js中的雙歎號( !! )

經常看到這樣的例子:

var a;var b = !!a;

a默認是undefined。!a是true,!!a則是false,所以b的值是false,而不再是undefined,也非其它值,主要是爲後續判斷提供便利。
!!一般用來將後面的表達式強制轉換爲布爾類型的數據(boolean),也就是隻能是true或者false;
因爲javascript是弱類型的語言(變量沒有固定的數據類型)所以有時需要強制轉換爲相應的類型,類似的如:a=parseInt(“1234″);a=”1234″-0 //轉換爲數字;b=1234+”” //轉換爲字符串;c=someObject.toString() //將對象轉換爲字符串
其中第1種、第4種爲顯式轉換,2、3爲隱式轉換
布爾型的轉換,javascript約定規則爲
1) false、undefinded、null、0、”” 爲 false
 2) true、1、”somestring”、[Object] 爲 true
對null與undefined等其他用隱式轉換的值,用!操作符時都會產生true的結果,所以用兩個感嘆號的作用就在於將這些值轉換爲“等價”的布爾值;

 function test(info,flag){
        console.log(!!flag);
    }
    test("dd","ddd");
    test("dd","");
    test("dd"," ");
    test("dd");
    test("dd",undefined);
    test("dd",null);

5 js中簡易代碼高亮效果,主要依靠正則表達式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
/*

*/
body{
	font-size:12px;
	line-height:1.8;
	font-family:'Courier New', Courier, monospace;
}
#area{
	width:320px;
	height:120px;
}
</style>
</head>
<body>

<textarea id="area">
body{
	font-size:12px;
	line-height:1.8;
	font-family:'微軟雅黑';
}
/*
	web:http://www.dovapour.com.cn/
    mail:[email protected]
  	QQ:362380046
*/
#area{
	width:320px;
	height:120px;
	line-height:1.5;
	font-family:"Courier New", Courier, monospace;
}
/*
ul{
	margin:0;
    padding:0;
    list-style:none;
}
table{
	border-collapse:collapse;
    border-spacing:0;
}
*/
</textarea>
<button id="btn">測試</button>
<div id="pre" style="color:#F0F;"></div>
<script type="text/javascript">
function $(id) {
	return document.getElementById(id);
};
$("btn").οnclick=function(){
	var code = $("area").value;
	//處理註釋:註釋替換成 _數字_ 
	var startIdx = endIndex =-1;
	var at = 0;
	var commentList = [];
	while(true){
		startIndex = code.indexOf("/*",at);
		if(startIndex == -1)
			break;
		endIndex = code.indexOf("*/",startIndex);
		
		if(endIndex==-1)
			break;
		
		at = endIndex + 2;
		commentList.push(code.substring(startIndex,at));
		code = code.replace(commentList[commentList.length-1],"_"+(commentList.length-1)+"_");
	}
	
	//字符串
	code = code.replace(/(['"]).*\1/g,function(m){return "<span style=\"color:#060;\">"+m+"</span>"});
	
	//CSS樣式值
	code = code.replace(/:(.+);/g,function(m,n){return ":<span style=\"color:#00F;\">"+n+"</span>;"});
	
	//CSS樣式名稱
	code=code.replace(/[{}]/g,function(m){
		if(m=="{"){
			return "{<span style=\"color:#006;\">";
		}else{
			return "</span>}";
		}
	});
	
	//註釋
	code=code.replace(/_(\d+)_/g,function(m,n){return "<span style=\"color:#999;\">"+commentList[n]+"</span>"});
	
	//處理\t
	code=code.replace(/^(\t+)/gm,function(m){
		return (new Array(m.length+1)).join("    ");									
	});
	
	//處理空格
	code=code.replace(/^( +)/gm, function(m) {
		return (new Array(m.length + 1)).join(" ");
	});
	
	//處理換行
	code=code.replace(/\r?\n/g,"<br />");
	
	$("pre").innerHTML=code;
}
</script>
</body>
</html>


發佈了177 篇原創文章 · 獲贊 11 · 訪問量 46萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章