javascript常用方法匯總
更新時(shí)間：2014年12月02日 11:09:04 投稿：hebedich
本文給大家匯總了一些自己整理的在項(xiàng)目中經(jīng)常能夠用到的javascript小方法，基本都是短小精悍型，方便大家快速開(kāi)發(fā)。
本章沒(méi)有深?yuàn)W的講解js一些底層原理，比如this指針、作用域、原型啦，涉及的都是一些有利于平時(shí)開(kāi)發(fā)時(shí)簡(jiǎn)化代碼，提高執(zhí)行效率，或者說(shuō)可以當(dāng)做一種經(jīng)驗(yàn)方法來(lái)使用，篇幅都不長(zhǎng)，小步快跑的讓你閱讀完整篇文章，體驗(yàn)編程的快樂(lè)。
獲取兩個(gè)區(qū)間之內(nèi)隨機(jī)數(shù)
復(fù)制代碼 代碼如下:
function getRandomNum(Min, Max){ // 獲取兩個(gè)區(qū)間之內(nèi)隨機(jī)數(shù)
// @逆火狂飆 提出有可能第一個(gè)參數(shù)大于第二個(gè)參數(shù)，所以增加一下判斷更可靠
if (Min > Max)
Max = [Min, Min = Max][0]; // 快速交換兩個(gè)變量值
var Range = Max - Min + 1;
var Rand = Math.random();
return Min + Math.floor(Rand * Range);
};
隨機(jī)返回一個(gè) 正/負(fù)參數(shù)
復(fù)制代碼 代碼如下:
function getRandomXY(num){ // 隨機(jī)返回一個(gè) 正/負(fù)參數(shù)
num = new Number(num);
if (Math.random() <= 0.5)
num = -num;
return num;
}
setInterval()或setTimeOut()計(jì)時(shí)器函數(shù)傳參
復(fù)制代碼 代碼如下:
var s = '我是參數(shù)';
function fn(args) {
console.log(args);
}
var a = setInterval(fn(s),100); // xxxxxx錯(cuò)誤xxxxx
var b = setInterval(function(){ // 正確,用匿名函數(shù)調(diào)用被計(jì)時(shí)函數(shù)
fn(s);
}, 100);
setInterval()或setTimeOut()計(jì)時(shí)器遞歸調(diào)用
復(fù)制代碼 代碼如下:
var s = true;
function fn2(a, b){ // 步驟三
if (s) {
clearInterval(a);
clearInterval(b);
}
};
function fn(a){ // 步驟二
var b = setInterval(function(){
fn2(a, b) // 傳入兩個(gè)計(jì)時(shí)器
}, 200)
};
var a = setInterval(function(){ // 步驟一
fn(a); // b代表計(jì)時(shí)器本身，可座位參數(shù)傳遞
}, 100);
字符串轉(zhuǎn)換為數(shù)字
復(fù)制代碼 代碼如下:
// 無(wú)需 new Number(String) 也無(wú)需 Number(String) 只需字符串減去零即可
var str = '100'; // str: String
var num = str - 0;// num: Number
空值判斷
復(fù)制代碼 代碼如下:
var s = ''; // 空字符串
if(!s) // 空字符串默認(rèn)轉(zhuǎn)換為布爾false，可以直接寫(xiě)在判斷語(yǔ)句里面
if(s != null) // 但是空字符串 != null
if(s != undefined) // 空字符串也 != undefined
IE瀏覽器parseInt()方法
復(fù)制代碼 代碼如下:
// 下面的轉(zhuǎn)換在IE下為0，其他瀏覽器則為1，這跟IE瀏覽器解釋數(shù)字的進(jìn)制有關(guān)
var iNum = parseInt(01);
// 所以，兼容的寫(xiě)法為
var num = parseInt(new Number(01));
Firebug便捷調(diào)試js代碼
復(fù)制代碼 代碼如下:
//Firebug內(nèi)置一個(gè)console對(duì)象，提供內(nèi)置方法，用來(lái)顯示信息
/**
* 1:console.log()，可以用來(lái)取代alert()或document.write()，支持占位符輸出，字符（%s）、整數(shù)（%d或%i）、浮點(diǎn)數(shù)（%f）和對(duì)象（%o）。如：console.log("%d年%d月%d日",2011,3,26)
* 2：如果信息太多，可以分組顯示，用到的方法是console.group()和console.groupEnd()
* 3：console.dir()可以顯示一個(gè)對(duì)象所有的屬性和方法
* 4：console.dirxml()用來(lái)顯示網(wǎng)頁(yè)的某個(gè)節(jié)點(diǎn)（node）所包含的html/xml代碼
* 5：console.assert()斷言，用來(lái)判斷一個(gè)表達(dá)式或變量是否為真
* 6：console.trace()用來(lái)追蹤函數(shù)的調(diào)用軌跡
* 7：console.time()和console.timeEnd()，用來(lái)顯示代碼的運(yùn)行時(shí)間
* 8：性能分析（Profiler）就是分析程序各個(gè)部分的運(yùn)行時(shí)間，找出瓶頸所在，使用的方法是console.profile()....fn....console.profileEnd()
*/
快速取當(dāng)前時(shí)間毫秒數(shù)
復(fù)制代碼 代碼如下:
// t == 當(dāng)前系統(tǒng)毫秒值，原因：+號(hào)運(yùn)算符會(huì)，會(huì)調(diào)用Date的valueOf（）方法。
var t = +new Date();
快速取小數(shù)整數(shù)位
復(fù)制代碼 代碼如下:
// x == 2,以下x值都為2,負(fù)數(shù)也可轉(zhuǎn)換
var x = 2.00023 | 0;
// x = '2.00023' | 0;
兩個(gè)變量值互換（不用中間量）
復(fù)制代碼 代碼如下:
var a = 1;
var b = 2;
a = [b, b=a][0]
alert(a+'_'+b) // 結(jié)果 2_1,a和b的值已經(jīng)互換。
邏輯或'||'運(yùn)算符
復(fù)制代碼 代碼如下:
// b不為null:a=b, b為null:a=1。
var a = b || 1;
// 較常見(jiàn)的用法為為一個(gè)插件方法傳參，和獲取事件目標(biāo)元素：event = event || window.event
// IE有window.event對(duì)象，而FF沒(méi)有。
只有方法對(duì)象才有prototype原型屬性
復(fù)制代碼 代碼如下:
// 方法有對(duì)象原型prototype屬性，而原始數(shù)據(jù)沒(méi)有該屬性，如 var a = 1， a沒(méi)有prototype屬性
function Person() {} // 人的構(gòu)造函數(shù)
Person.prototype.run = function() { alert('run...'); } // 原型run方法
Person.run(); // error
var p1 = new Person(); // 只有在new操作符時(shí)，此時(shí)才會(huì)把原型run方法賦值給p1
p1.run(); // run...
快速獲取當(dāng)天為星期幾
復(fù)制代碼 代碼如下:
// 計(jì)算系統(tǒng)當(dāng)前時(shí)間是星期幾
var week = "今天是：星期" + "日一二三四五六".charat(new date().getDay());
閉包偏見(jiàn)
復(fù)制代碼 代碼如下:
/**
* 閉包：任何一個(gè)js方法體都可以稱(chēng)為一個(gè)閉包，并非什么只有內(nèi)嵌函數(shù)來(lái)引用了外部函數(shù)的某個(gè)參數(shù)或?qū)傩圆艜?huì)發(fā)生。
* 它有一個(gè)獨(dú)立作用域，在該作用域內(nèi)可存在若干的子作用域（就是方法嵌套方法），最終該閉包作用域?yàn)樽钔鈱臃椒ǖ淖饔糜?br /> * 它包含了本身方法參數(shù)和所有內(nèi)嵌函數(shù)的方法參數(shù)，所以當(dāng)一個(gè)內(nèi)嵌函數(shù)在外部有引用時(shí)，該引用的作用域?yàn)橐煤瘮?shù)所在的（頂級(jí)）方法作用域
*/
function a(x) {
function b(){
alert(x); // 引用外部函數(shù)參數(shù)
}
return b;
}
var run = a('run...');
// 由于作用域的擴(kuò)大，可以引用到外部函數(shù)a的變量并顯示
run(); // alert(): run..
獲取地址參數(shù)字符串和定時(shí)刷新
復(fù)制代碼 代碼如下:
// 獲取問(wèn)號(hào)？后面的內(nèi)容，包括問(wèn)號(hào)
var x = window.location.search
// 獲取警號(hào)#后面的內(nèi)容，包括#號(hào)
var y = window.location.hash
// 配合定時(shí)器可實(shí)現(xiàn)網(wǎng)頁(yè)自動(dòng)刷新
window.location.reload();
Null和Undefined
復(fù)制代碼 代碼如下:
/**
* Undefined類(lèi)型只有一個(gè)值，即undefined。當(dāng)聲明的變量還未被初始化時(shí)，變量的默認(rèn)值為undefined。
* Null類(lèi)型也只有一個(gè)值，即null。null用來(lái)表示尚未存在的對(duì)象，常用來(lái)表示函數(shù)企圖返回一個(gè)不存在的對(duì)象。
* ECMAScript認(rèn)為undefined是從null派生出來(lái)的，所以把它們定義為相等的。
* 但是，如果在一些情況下，我們一定要區(qū)分這兩個(gè)值，那應(yīng)該怎么辦呢？可以使用下面的兩種方法
* 在進(jìn)行判斷時(shí)根據(jù)需要，判斷對(duì)象是否有值時(shí)最好用‘==='強(qiáng)類(lèi)型判斷。
*/
var a;
alert(a === null); // false,因?yàn)閍不是一個(gè)空對(duì)象
alert(a === undefined); // true,因?yàn)閍未初始化，值為undefined
// 引申
alert(null == undefined); // true,因?yàn)椤?='運(yùn)算符會(huì)進(jìn)行類(lèi)型轉(zhuǎn)換，
// 同理
alert(1 == '1'); // true
alert(0 == false); // true,false轉(zhuǎn)換為Number類(lèi)型為0
給方法動(dòng)態(tài)添加參數(shù)
復(fù)制代碼 代碼如下:
// 方法a多了一個(gè)參數(shù)2
function a(x){
var arg = Array.prototype.push.call(arguments,2);
alert(arguments[0]+'__'+arguments[1]);
}
自定義SELECT邊框樣式
復(fù)制代碼 代碼如下:
<!-- 復(fù)制到頁(yè)面試試效果吧，可以隨意自定義樣式 -->
<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>
最簡(jiǎn)單的調(diào)色盤(pán)
復(fù)制代碼 代碼如下:
<!-- JS來(lái)提取其value值即可給任意對(duì)象設(shè)置任意顏色哦 -->
<input type=color />
函數(shù)、對(duì)象 is 數(shù)組？
復(fù)制代碼 代碼如下:
var anObject = {}; //一個(gè)對(duì)象
anObject.aProperty = “Property of object”; //對(duì)象的一個(gè)屬性
anObject.aMethod = function(){alert(“Method of object”)}; //對(duì)象的一個(gè)方法
//主要看下面：
alert(anObject[“aProperty”]); //可以將對(duì)象當(dāng)數(shù)組以屬性名作為下標(biāo)來(lái)訪問(wèn)屬性
anObject[“aMethod”](); //可以將對(duì)象當(dāng)數(shù)組以方法名作為下標(biāo)來(lái)調(diào)用方法
for( var s in anObject) //遍歷對(duì)象的所有屬性和方法進(jìn)行迭代化處理
alert(s + ” is a ” + typeof(anObject[s]));
// 同樣對(duì)于function類(lèi)型的對(duì)象也是一樣：
var aFunction = function() {}; //一個(gè)函數(shù)
aFunction.aProperty = “Property of function”; //函數(shù)的一個(gè)屬性
aFunction.aMethod = function(){alert(“Method of function”)}; //函數(shù)的一個(gè)方法
//主要看下面：
alert(aFunction[“aProperty”]); //可以將函數(shù)當(dāng)數(shù)組以屬性名作為下標(biāo)來(lái)訪問(wèn)屬性
aFunction[“aMethod”](); //可以將函數(shù)當(dāng)數(shù)組以方法名作為下標(biāo)來(lái)調(diào)用方法
for( var s in aFunction) //遍歷函數(shù)的所有屬性和方法進(jìn)行迭代化處理
alert(s + ” is a ” + typeof(aFunction[s]));
復(fù)制代碼 代碼如下:
/**
* 是的，對(duì)象和函數(shù)可以象數(shù)組一樣，用屬性名或方法名作為下標(biāo)來(lái)訪問(wèn)并處理。
* 那么，它到底應(yīng)該算是數(shù)組呢，還是算對(duì)象？我們知道，數(shù)組應(yīng)該算是線性數(shù)據(jù)結(jié)構(gòu)，線性數(shù)據(jù)結(jié)構(gòu)一般有一定的規(guī)律，適合進(jìn)行統(tǒng)一的批量迭代操作等，有點(diǎn)像波。
* 而對(duì)象是離散數(shù)據(jù)結(jié)構(gòu)，適合描述分散的和個(gè)性化的東西，有點(diǎn)像粒子。
* 因此，我們也可以這樣問(wèn)：JavaScript 里的對(duì)象到底是波還是粒子？如果存在對(duì)象量子論，那么答案一定是：波粒二象性！
* 因此，JavaScript里的函數(shù)和對(duì)象既有對(duì)象的特征也有數(shù)組的特征。這里的數(shù)組被稱(chēng)為“字典”，一種可以任意伸縮的名稱(chēng)值對(duì)兒的集合。其實(shí)， object和function的內(nèi)部實(shí)現(xiàn)就是一個(gè)字典結(jié)構(gòu)，但這種字典結(jié)構(gòu)卻通過(guò)嚴(yán)謹(jǐn)而精巧的語(yǔ)法表現(xiàn)出了豐富的外觀。正如量子力學(xué)在一些地方用粒子來(lái) 解釋和處理問(wèn)題，而在另一些地方卻用波來(lái)解釋和處理問(wèn)題。你也可以在需要的時(shí)候，自由選擇用對(duì)象還是數(shù)組來(lái)解釋和處理問(wèn)題。只要善于把握 JavaScript 的這些奇妙特性，就可以編寫(xiě)出很多簡(jiǎn)潔而強(qiáng)大的代碼來(lái)。
*/
點(diǎn)擊空白處能觸發(fā)某一元素關(guān)閉/隱藏
復(fù)制代碼 代碼如下:
/**
* 有時(shí)候頁(yè)面有個(gè)下拉菜單或者什么的效果，需要用戶(hù)點(diǎn)擊空白處或者點(diǎn)擊其他元素時(shí)將其隱藏
* 可用一個(gè)全局document點(diǎn)擊事件來(lái)觸發(fā)
* @param {Object} "目標(biāo)對(duì)象"
*/
$(document).click(function(e){
$("目標(biāo)對(duì)象").hide();
});
/**
* 但是有一個(gè)缺點(diǎn)就是當(dāng)你點(diǎn)擊該元素又想讓他顯示
* 如果你不及時(shí)阻止事件冒泡至全局出發(fā)document對(duì)象點(diǎn)擊時(shí)，上面方法就會(huì)執(zhí)行
*/
$("目標(biāo)對(duì)象").click(function(event){
event = event || window.event;
event.stopPropagation(); // 當(dāng)點(diǎn)擊目標(biāo)對(duì)象時(shí)，及時(shí)阻止事件冒泡
$("目標(biāo)對(duì)象").toggle();
});
以上都是個(gè)人整理的一些常用的javascript小方法，記錄下來(lái)方便自己開(kāi)發(fā)時(shí)直接拿來(lái)使用，這里也推薦給有需要的小伙伴。
相關(guān)文章
JavaScript中的原型繼承基礎(chǔ)學(xué)習(xí)教程
這篇文章主要介紹了JavaScript中的原型繼承基礎(chǔ)學(xué)習(xí)教程,基于原型prototype的繼承是JavaScript中實(shí)現(xiàn)面向?qū)ο笾械睦^承特性的基本手段,需要的朋友可以參考下2016-05-05
JS中for循序中延遲加載動(dòng)態(tài)效果的具體實(shí)現(xiàn)
今天在做一個(gè)前端的效果的時(shí)候碰到一個(gè)棘手的問(wèn)題，就是實(shí)現(xiàn)一個(gè)動(dòng)態(tài)的圓柱效果，廢話(huà)不多少，直接上代碼2013-08-08
對(duì)象是一種復(fù)合值，它將很多值（原始值或其他對(duì)象）聚合在一起，可通過(guò)屬性名訪問(wèn)這些值。而屬性名可以是包含空字符串在內(nèi)的任意字符串。JavaScript對(duì)象也可以稱(chēng)作一種數(shù)據(jù)結(jié)構(gòu)2016-07-07
javascript setTimeout和setInterval 的區(qū)別
window對(duì)象有兩個(gè)主要的定時(shí)方法，分別是setTimeout 和 setInteval 他們的語(yǔ)法基本上相同，但是完成的功能取有區(qū)別。2009-12-12
onkeyup，onkeydown和onkeypress的區(qū)別介紹
三者在事件的響應(yīng)上還有一點(diǎn)不同，就是onkeydown 、onkeypress事件響應(yīng)的時(shí)候輸入的字符并沒(méi)有被系統(tǒng)接受，而響應(yīng)onkeyup的時(shí)候，輸入流已經(jīng)被系統(tǒng)接受2013-10-10
JavaScript 創(chuàng)建運(yùn)動(dòng)框架的實(shí)現(xiàn)代碼
本篇文章是對(duì)，在JavaScript中創(chuàng)建運(yùn)動(dòng)框架的實(shí)現(xiàn)方法進(jìn)行了介紹。需要的朋友參考下2013-05-05
HTML的全稱(chēng)為超文本標(biāo)記語(yǔ)言，是一種標(biāo)記語(yǔ)言。它包括一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說(shuō)明文字，圖形、動(dòng)畫(huà)、聲音、表格、鏈接等2022-03-03
你真的了解JavaScript嗎？...2007-02-02
關(guān)于JS字符串函數(shù)String.replace()
本篇介紹關(guān)于JS字符串函數(shù)String.replace()，有需要的朋友參考一下。2013-04-04
簡(jiǎn)介JavaScript中的setHours()方法的使用
這篇文章主要介紹了簡(jiǎn)介JavaScript中的setHours()方法的使用,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06