引言:
本章沒有深奧的講解js一些底層原理,比如this指針、作用域、原型啦,涉及的都是一些有利於平時開發時簡化代碼,提高執行效率,或者說可以當做一種經驗方法來使用,篇幅都不長,小步快跑的讓你閱讀完整篇文章,體驗編程的快樂。
另 推 薦 閱 讀 >>悟透javaScript<<
獲取兩個區間之內隨機數
function getRandomNum(Min, Max){ // 獲取兩個區間之內隨機數 // @逆火狂飆 提出有可能第一個參數大於第二個參數,所以增加一下判斷更可靠 if (Min > Max) Max = [Min, Min = Max][0]; // 快速交換兩個變量值 var Range = Max - Min + 1; var Rand = Math.random(); return Min + Math.floor(Rand * Range); };
隨機返回一個 正/負參數
function getRandomXY(num){ // 隨機返回一個 正/負參數 num = new Number(num); if (Math.random() <= 0.5) num = -num; return num; }
setInterval()或setTimeOut()計時器函數傳參
var s = '我是參數'; function fn(args) { console.log(args); } var a = setInterval(fn(s),100); // xxxxxx錯誤xxxxx var b = setInterval(function(){ // 正確,用匿名函數調用被計時函數 fn(s); }, 100);
setInterval()或setTimeOut()計時器遞歸調用
var s = true; function fn2(a, b){ // 步驟三 if (s) { clearInterval(a); clearInterval(b); } }; function fn(a){ // 步驟二 var b = setInterval(function(){ fn2(a, b) // 傳入兩個計時器 }, 200) }; var a = setInterval(function(){ // 步驟一 fn(a); // b代表計時器本身,可座位參數傳遞 }, 100);
字符串轉換為數字
// 無需 new Number(String) 也無需 Number(String) 只需字符串減去零即可 var str = '100'; // str: String var num = str - 0;// num: Number
或
// var num = +str;
空值判斷
var s = ''; // 空字符串 if(!s) // 空字符串默認轉換為布爾false,可以直接寫在判斷語句里面 if(s != null) // 但是空字符串 != null if(s != undefined) // 空字符串也 != undefined
IE瀏覽器parseInt()方法
// 下面的轉換在IE下為0,其他瀏覽器則為1,這跟IE瀏覽器解釋數字的進制有關 var iNum = parseInt(01); // 所以,兼容的寫法為 var num = parseInt(new Number(01));
Firebug便捷調試js代碼
//Firebug內置一個console對象,提供內置方法,用來顯示信息 /** * 1:console.log(),可以用來取代alert()或document.write(),支持占位符輸出,字符(%s)、整數(%d或%i)、浮點數(%f)和對象(%o)。如:console.log("%d年%d月%d日",2011,3,26) * 2:如果信息太多,可以分組顯示,用到的方法是console.group()和console.groupEnd() * 3:console.dir()可以顯示一個對象所有的屬性和方法 * 4:console.dirxml()用來顯示網頁的某個節點(node)所包含的html/xml代碼 * 5:console.assert()斷言,用來判斷一個表達式或變量是否為真 * 6:console.trace()用來追蹤函數的調用軌跡 * 7:console.time()和console.timeEnd(),用來顯示代碼的運行時間 * 8:性能分析(Profiler)就是分析程序各個部分的運行時間,找出瓶頸所在,使用的方法是console.profile()....fn....console.profileEnd() */
快速取當前時間毫秒數
// t == 當前系統毫秒值,原因:+號運算符會,會調用Date的valueOf()方法。 var t = +new Date();
快速取小數整數位
// x == 2,以下x值都為2,負數也可轉換 var x = 2.00023 | 0; // x = '2.00023' | 0;
兩個變量值互換(不用中間量)
var a = 1; var b = 2; a = [b, b=a][0] alert(a+'_'+b) // 結果 2_1,a和b的值已經互換。
邏輯或'||'運算符
// b不為null:a=b, b為null:a=1。 var a = b || 1; // 較常見的用法為為一個插件方法傳參,和獲取事件目標元素:event = event || window.event // IE有window.event對象,而FF沒有。
只有方法對象才有prototype原型屬性
// 方法有對象原型prototype屬性,而原始數據沒有該屬性,如 var a = 1, a沒有prototype屬性 function Person() {} // 人的構造函數 Person.prototype.run = function() { alert('run...'); } // 原型run方法 Person.run(); // error var p1 = new Person(); // 只有在new操作符時,此時才會把原型run方法賦值給p1 p1.run(); // run...
快速獲取當天為星期幾
// 計算系統當前時間是星期幾 var week = "今天是:星期" + "日一二三四五六".charat(new date().getDay());
閉包偏見
/** * 閉包:任何一個js方法體都可以稱為一個閉包,並非什么只有內嵌函數來引用了外部函數的某個參數或屬性才會發生。 * 它有一個獨立作用域,在該作用域內可存在若干的子作用域(就是方法嵌套方法),最終該閉包作用域為最外層方法的作用域 * 它包含了本身方法參數和所有內嵌函數的方法參數,所以當一個內嵌函數在外部有引用時,該引用的作用域為引用函數所在的(頂級)方法作用域 */ function a(x) { function b(){ alert(x); // 引用外部函數參數 } return b; } var run = a('run...'); // 由於作用域的擴大,可以引用到外部函數a的變量並顯示 run(); // alert(): run..
獲取地址參數字符串和定時刷新
// 獲取問號?后面的內容,包括問號 var x = window.location.search
// 獲取警號#后面的內容,包括#號 var y = window.location.hash
// 配合定時器可實現網頁自動刷新 window.location.reload();
Null和Undefined
/** * Undefined類型只有一個值,即undefined。當聲明的變量還未被初始化時,變量的默認值為undefined。 * Null類型也只有一個值,即null。null用來表示尚未存在的對象,常用來表示函數企圖返回一個不存在的對象。 * ECMAScript認為undefined是從null派生出來的,所以把它們定義為相等的。 * 但是,如果在一些情況下,我們一定要區分這兩個值,那應該怎么辦呢?可以使用下面的兩種方法 * 在進行判斷時根據需要,判斷對象是否有值時最好用‘===’強類型判斷。 */ var a; alert(a === null); // false,因為a不是一個空對象 alert(a === undefined); // true,因為a未初始化,值為undefined // 引申 alert(null == undefined); // true,因為‘==’運算符會進行類型轉換, // 同理 alert(1 == '1'); // true alert(0 == false); // true,false轉換為Number類型為0
給方法動態添加參數
// 方法a多了一個參數2 function a(x){ var arg = Array.prototype.push.call(arguments,2); alert(arguments[0]+'__'+arguments[1]); }
自定義SELECT邊框樣式
<!-- 復制到頁面試試效果吧,可以隨意自定義樣式 --> <span style="border:1px solid red; position:absolute; overflow:hidden;" > <select style="margin:-2px;"> <option>自定義SELECT邊框樣式</option> <option>222</option> <option>333</option> </select> </span>
最簡單的調色盤
<!-- JS來提取其value值即可給任意對象設置任意顏色哦 --> <input type=color />
函數、對象 is 數組?
var anObject = {}; //一個對象 anObject.aProperty = “Property of object”; //對象的一個屬性 anObject.aMethod = function(){alert(“Method of object”)}; //對象的一個方法 //主要看下面: alert(anObject[“aProperty”]); //可以將對象當數組以屬性名作為下標來訪問屬性 anObject[“aMethod”](); //可以將對象當數組以方法名作為下標來調用方法 for( var s in anObject) //遍歷對象的所有屬性和方法進行迭代化處理 alert(s + ” is a ” + typeof(anObject[s])); // 同樣對於function類型的對象也是一樣: var aFunction = function() {}; //一個函數 aFunction.aProperty = “Property of function”; //函數的一個屬性 aFunction.aMethod = function(){alert(“Method of function”)}; //函數的一個方法
//主要看下面: alert(aFunction[“aProperty”]); //可以將函數當數組以屬性名作為下標來訪問屬性 aFunction[“aMethod”](); //可以將函數當數組以方法名作為下標來調用方法 for( var s in aFunction) //遍歷函數的所有屬性和方法進行迭代化處理 alert(s + ” is a ” + typeof(aFunction[s]));
/** * 是的,對象和函數可以象數組一樣,用屬性名或方法名作為下標來訪問並處理。 * 那么,它到底應該算是數組呢,還是算對象?我們知道,數組應該算是線性數據結構,線性數據結構一般有一定的規律,適合進行統一的批量迭代操作等,有點像波。 * 而對象是離散數據結構,適合描述分散的和個性化的東西,有點像粒子。 * 因此,我們也可以這樣問:JavaScript 里的對象到底是波還是粒子?如果存在對象量子論,那么答案一定是:波粒二象性! * 因此,JavaScript里的函數和對象既有對象的特征也有數組的特征。這里的數組被稱為“字典”,一種可以任意伸縮的名稱值對兒的集合。其實, object和function的內部實現就是一個字典結構,但這種字典結構卻通過嚴謹而精巧的語法表現出了豐富的外觀。正如量子力學在一些地方用粒子來 解釋和處理問題,而在另一些地方卻用波來解釋和處理問題。你也可以在需要的時候,自由選擇用對象還是數組來解釋和處理問題。只要善於把握 JavaScript 的這些奇妙特性,就可以編寫出很多簡潔而強大的代碼來。 */
點擊空白處能觸發某一元素關閉/隱藏
/** * 有時候頁面有個下拉菜單或者什么的效果,需要用戶點擊空白處或者點擊其他元素時將其隱藏 * 可用一個全局document點擊事件來觸發 * @param {Object} "目標對象" */ $(document).click(function(e){ $("目標對象").hide(); }); /** * 但是有一個缺點就是當你點擊該元素又想讓他顯示 * 如果你不及時阻止事件冒泡至全局出發document對象點擊時,上面方法就會執行 */ $("目標對象").click(function(event){ event = event || window.event; event.stopPropagation(); // 當點擊目標對象時,及時阻止事件冒泡 $("目標對象").toggle(); });
檢測window.open()方法彈出窗口是否被攔截
var blocked = false; try { var wroxWin = window.open("http://www.baidu.com", "_blank"); if (wroxWin == null){ blocked = true; } } catch (ex){ blocked = true; } if (blocked){ alert("彈窗被攔截!"); }
location 對象(最有用的 BOM 對象之一)
js四舍五入保留2位小數
1 、tofixed方法 toFixed() 方法可把 Number 四舍五入為指定小數位數的數字。例如將數據Num保留2位小數,則表示為:toFixed(Num);但是其四舍五入的規則與數學中的規則不同,使用的是銀行家舍入規則,銀行家舍入:所謂銀行家舍入法,其實質是一種四舍六入五取偶(又稱四舍六入五留雙)法。具體規則如下: 簡單來說就是:四舍六入五考慮,五后非零就進一,五后為零看奇偶,五前為偶應舍去,五前為奇要進一。 顯然這種規則不符合我們平常在數據中處理的方式。為了解決這樣的問題,可以自定義去使用Math.round方法進行自定義式 的實現指定保留多少位數據進行處理。 2 、 round方法 round() 方法可把一個數字舍入為最接近的整數。例如:Math.round(x),則是將x取其最接近的整數。其取舍的方法使用的是四舍五入中的方法,符合數學中取舍的規則。對於小數的處理沒有那么便捷,但是可以根據不同的要求,進行自定義的處理。 例如:對於X進行保留兩位小數的處理,則可以使用Math.round(X * 100) / 100.進行處理。
:)如有不錯的方法還請慷慨留言推薦,我會一並加入進來。
ps:歡迎轉載,轉載請注明出處:http://www.cnblogs.com/liuyitian/p/4081517.html
寫作不易,難免有疏漏和錯誤,還請慷慨指正,不錯請推薦
每天多學一點點 代碼少敲一點點