javascript常用方法總結_基礎知識

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

 取得兩個區間內隨機數

複製程式碼 程式碼如下:

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()         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 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邊框樣式

複製程式碼 程式碼如下:

   
        自訂SELECT邊框樣式
        222
        333
   

最簡單的調色盤

複製程式碼 程式碼如下:

函數、物件 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();
});

以上都是個人整理的一些常用的javascript小方法，記錄下來方便自己開發時直接拿來使用，這裡也推薦給有需要的小伙伴。