js便攜小方法，你值得擁有

標籤：style   blog   http   io   ar   color   os   使用   sp   

引言：

　　本章沒有深奧的講解js一些底層原理，比如this指標、範圍、原型啦，涉及的都是一些有利於平時開發時簡化代碼，提高執行效率，或者說可以當做一種經驗方法來使用，篇幅都不長，小步快跑的讓你閱讀完整篇文章。

 

擷取兩個區間之內隨機數

function getRandomNum(Min, Max){ // 擷取兩個區間之內隨機數        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錯誤xxxxxvar 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: Stringvar num = str - 0;// num: Number

空值判斷

var s = ‘‘;  // Null 字元串if(!s)         // Null 字元串預設轉換為布爾false，可以直接寫在判斷語句裡面if(s != null) // 但是Null 字元串 != nullif(s != undefined) // Null 字元串也 != 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(); // errorvar p1 = new Person(); // 只有在new操作符時，此時才會把原型run方法賦值給p1p1.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不是一個Null 物件alert(a === undefined); // true,因為a未初始化，值為undefined// 引申alert(null == undefined); // true,因為‘==’運算子會進行類型轉換，// 同理alert(1 == ‘1‘); // truealert(0 == false); // true,false轉換為Number類型為0

 給方法動態添加參數

// 方法a多了一個參數2function 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 的這些奇妙特性，就可以編寫出很多簡潔而強大的代碼來。 */ 

：）如有不錯的方法還請慷慨留言推薦，我會一併加入進來。

ps:歡迎轉載，轉載請註明出處：http://www.cnblogs.com/liuyitian/p/4081517.html

　　　　　　　　　　　　　　　　　　　　　　　　　　寫作不易，難免有疏漏和錯誤，還請慷慨指正，不錯請推薦

  　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　每天多學一點點     代碼少敲一點點　

js便攜小方法，你值得擁有