javascript常用方法匯總
更新時間：2014年12月02日 11:09:04 投稿：hebedich
本文給大家匯總了一些自己整理的在項目中經常能夠用到的javascript小方法，基本都是短小精悍型，方便大家快速開發(fā)。
本章沒有深奧的講解js一些底層原理，比如this指針、作用域、原型啦，涉及的都是一些有利于平時開發(fā)時簡化代碼，提高執(zhí)行效率，或者說可以當做一種經驗方法來使用，篇幅都不長，小步快跑的讓你閱讀完整篇文章，體驗編程的快樂。
獲取兩個區(qū)間之內隨機數(shù)
復制代碼 代碼如下:
function getRandomNum(Min, Max){ // 獲取兩個區(qū)間之內隨機數(shù)
// @逆火狂飆 提出有可能第一個參數(shù)大于第二個參數(shù)，所以增加一下判斷更可靠
if (Min > Max)
Max = [Min, Min = Max][0]; // 快速交換兩個變量值
var Range = Max - Min + 1;
var Rand = Math.random();
return Min + Math.floor(Rand * Range);
};
隨機返回一個 正/負參數(shù)
復制代碼 代碼如下:
function getRandomXY(num){ // 隨機返回一個 正/負參數(shù)
num = new Number(num);
if (Math.random() <= 0.5)
num = -num;
return num;
}
setInterval()或setTimeOut()計時器函數(shù)傳參
復制代碼 代碼如下:
var s = '我是參數(shù)';
function fn(args) {
console.log(args);
}
var a = setInterval(fn(s),100); // xxxxxx錯誤xxxxx
var b = setInterval(function(){ // 正確,用匿名函數(shù)調用被計時函數(shù)
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代表計時器本身，可座位參數(shù)傳遞
}, 100);
字符串轉換為數(shù)字
復制代碼 代碼如下:
// 無需 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瀏覽器解釋數(shù)字的進制有關
var iNum = parseInt(01);
// 所以，兼容的寫法為
var num = parseInt(new Number(01));
Firebug便捷調試js代碼
復制代碼 代碼如下:
//Firebug內置一個console對象，提供內置方法，用來顯示信息
/**
* 1:console.log()，可以用來取代alert()或document.write()，支持占位符輸出，字符（%s）、整數(shù)（%d或%i）、浮點數(shù)（%f）和對象（%o）。如：console.log("%d年%d月%d日",2011,3,26)
* 2：如果信息太多，可以分組顯示，用到的方法是console.group()和console.groupEnd()
* 3：console.dir()可以顯示一個對象所有的屬性和方法
* 4：console.dirxml()用來顯示網頁的某個節(jié)點（node）所包含的html/xml代碼
* 5：console.assert()斷言，用來判斷一個表達式或變量是否為真
* 6：console.trace()用來追蹤函數(shù)的調用軌跡
* 7：console.time()和console.timeEnd()，用來顯示代碼的運行時間
* 8：性能分析（Profiler）就是分析程序各個部分的運行時間，找出瓶頸所在，使用的方法是console.profile()....fn....console.profileEnd()
*/
快速取當前時間毫秒數(shù)
復制代碼 代碼如下:
// t == 當前系統(tǒng)毫秒值，原因：+號運算符會，會調用Date的valueOf（）方法。
var t = +new Date();
快速取小數(shù)整數(shù)位
復制代碼 代碼如下:
// x == 2,以下x值都為2,負數(shù)也可轉換
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屬性，而原始數(shù)據(jù)沒有該屬性，如 var a = 1， a沒有prototype屬性
function Person() {} // 人的構造函數(shù)
Person.prototype.run = function() { alert('run...'); } // 原型run方法
Person.run(); // error
var p1 = new Person(); // 只有在new操作符時，此時才會把原型run方法賦值給p1
p1.run(); // run...
快速獲取當天為星期幾
復制代碼 代碼如下:
// 計算系統(tǒng)當前時間是星期幾
var week = "今天是：星期" + "日一二三四五六".charat(new date().getDay());
閉包偏見
復制代碼 代碼如下:
/**
* 閉包：任何一個js方法體都可以稱為一個閉包，并非什么只有內嵌函數(shù)來引用了外部函數(shù)的某個參數(shù)或屬性才會發(fā)生。
* 它有一個獨立作用域，在該作用域內可存在若干的子作用域（就是方法嵌套方法），最終該閉包作用域為最外層方法的作用域
* 它包含了本身方法參數(shù)和所有內嵌函數(shù)的方法參數(shù)，所以當一個內嵌函數(shù)在外部有引用時，該引用的作用域為引用函數(shù)所在的（頂級）方法作用域
*/
function a(x) {
function b(){
alert(x); // 引用外部函數(shù)參數(shù)
}
return b;
}
var run = a('run...');
// 由于作用域的擴大，可以引用到外部函數(shù)a的變量并顯示
run(); // alert(): run..
獲取地址參數(shù)字符串和定時刷新
復制代碼 代碼如下:
// 獲取問號？后面的內容，包括問號
var x = window.location.search
// 獲取警號#后面的內容，包括#號
var y = window.location.hash
// 配合定時器可實現(xiàn)網頁自動刷新
window.location.reload();
Null和Undefined
復制代碼 代碼如下:
/**
* Undefined類型只有一個值，即undefined。當聲明的變量還未被初始化時，變量的默認值為undefined。
* Null類型也只有一個值，即null。null用來表示尚未存在的對象，常用來表示函數(shù)企圖返回一個不存在的對象。
* ECMAScript認為undefined是從null派生出來的，所以把它們定義為相等的。
* 但是，如果在一些情況下，我們一定要區(qū)分這兩個值，那應該怎么辦呢？可以使用下面的兩種方法
* 在進行判斷時根據(jù)需要，判斷對象是否有值時最好用‘==='強類型判斷。
*/
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
給方法動態(tài)添加參數(shù)
復制代碼 代碼如下:
// 方法a多了一個參數(shù)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 />
函數(shù)、對象 is 數(shù)組？
復制代碼 代碼如下:
var anObject = {}; //一個對象
anObject.aProperty = “Property of object”; //對象的一個屬性
anObject.aMethod = function(){alert(“Method of object”)}; //對象的一個方法
//主要看下面：
alert(anObject[“aProperty”]); //可以將對象當數(shù)組以屬性名作為下標來訪問屬性
anObject[“aMethod”](); //可以將對象當數(shù)組以方法名作為下標來調用方法
for( var s in anObject) //遍歷對象的所有屬性和方法進行迭代化處理
alert(s + ” is a ” + typeof(anObject[s]));
// 同樣對于function類型的對象也是一樣：
var aFunction = function() {}; //一個函數(shù)
aFunction.aProperty = “Property of function”; //函數(shù)的一個屬性
aFunction.aMethod = function(){alert(“Method of function”)}; //函數(shù)的一個方法
//主要看下面：
alert(aFunction[“aProperty”]); //可以將函數(shù)當數(shù)組以屬性名作為下標來訪問屬性
aFunction[“aMethod”](); //可以將函數(shù)當數(shù)組以方法名作為下標來調用方法
for( var s in aFunction) //遍歷函數(shù)的所有屬性和方法進行迭代化處理
alert(s + ” is a ” + typeof(aFunction[s]));
復制代碼 代碼如下:
/**
* 是的，對象和函數(shù)可以象數(shù)組一樣，用屬性名或方法名作為下標來訪問并處理。
* 那么，它到底應該算是數(shù)組呢，還是算對象？我們知道，數(shù)組應該算是線性數(shù)據(jù)結構，線性數(shù)據(jù)結構一般有一定的規(guī)律，適合進行統(tǒng)一的批量迭代操作等，有點像波。
* 而對象是離散數(shù)據(jù)結構，適合描述分散的和個性化的東西，有點像粒子。
* 因此，我們也可以這樣問：JavaScript 里的對象到底是波還是粒子？如果存在對象量子論，那么答案一定是：波粒二象性！
* 因此，JavaScript里的函數(shù)和對象既有對象的特征也有數(shù)組的特征。這里的數(shù)組被稱為“字典”，一種可以任意伸縮的名稱值對兒的集合。其實， object和function的內部實現(xiàn)就是一個字典結構，但這種字典結構卻通過嚴謹而精巧的語法表現(xiàn)出了豐富的外觀。正如量子力學在一些地方用粒子來 解釋和處理問題，而在另一些地方卻用波來解釋和處理問題。你也可以在需要的時候，自由選擇用對象還是數(shù)組來解釋和處理問題。只要善于把握 JavaScript 的這些奇妙特性，就可以編寫出很多簡潔而強大的代碼來。
*/
點擊空白處能觸發(fā)某一元素關閉/隱藏
復制代碼 代碼如下:
/**
* 有時候頁面有個下拉菜單或者什么的效果，需要用戶點擊空白處或者點擊其他元素時將其隱藏
* 可用一個全局document點擊事件來觸發(fā)
* @param {Object} "目標對象"
*/
$(document).click(function(e){
$("目標對象").hide();
});
/**
* 但是有一個缺點就是當你點擊該元素又想讓他顯示
* 如果你不及時阻止事件冒泡至全局出發(fā)document對象點擊時，上面方法就會執(zhí)行
*/
$("目標對象").click(function(event){
event = event || window.event;
event.stopPropagation(); // 當點擊目標對象時，及時阻止事件冒泡
$("目標對象").toggle();
});
以上都是個人整理的一些常用的javascript小方法，記錄下來方便自己開發(fā)時直接拿來使用，這里也推薦給有需要的小伙伴。
相關文章
今天總結一下javascript中的數(shù)據(jù)類型，希望大家能對javascript數(shù)據(jù)類型基礎有扎實的掌握，祝大家多多進步，早日升職加薪2022-03-03
JavaScript是一種基于對象和事件驅動的客戶端腳本語言。JavaScript最初的設計是為了檢驗HTML表單輸入的正確性。javaScript起源于Netscape公司的LiveScript語言。2009-08-08
document.all與WEB標準...2006-11-11
JavaScript中的getTimezoneOffset()方法使用詳解
這篇文章主要介紹了JavaScript中的getTimezoneOffset()方法使用詳解,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06
javascript中undefined與null的區(qū)別
這篇文章介紹了javascript中undefined與null的區(qū)別，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
這篇文章介紹了ES6基礎語法之Map和Set對象，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
IE8 新增的Javascript 對象 (Object)，需要的朋友可以參考下。2011-01-01
這篇文章主要簡單介紹了javascript 定時器的相關知識，包括 setTimeout()以及clearInterval() 的定義和用法，非常實用，推薦給大家2014-12-12
JavaScript對HTML DOM使用EventListener進行操作
這篇文章主要介紹了JavaScript對HTML DOM使用EventListener進行操作的方法,用于向HTML元素中添加事件,需要的朋友可以參考下2015-10-10
主要包括this指向問題、向setTimeout傳入?yún)?shù)等相關問題，下面與大家分享下以上問題的解決方法，感興趣的朋友可以參考下2013-08-08