JavaScript 學(xué)習(xí)技巧
更新時(shí)間：2010年02月17日 16:52:58 作者：
JavaScript 學(xué)習(xí)技巧,需要的朋友可以參考下。
- 轉(zhuǎn)化為Boolean類(lèi)型
所有JavaScript中的值都能隱式的轉(zhuǎn)化為Boolean類(lèi)型，比如：0 == false; // true
但是這些值都不是Boolean類(lèi)型。
1 == true; // true
'' == false // true
null == false // true
因此當(dāng)我們使用三個(gè)等于號(hào)進(jìn)行比較時(shí)：0 === false; // false
現(xiàn)在的問(wèn)題是如何將其他類(lèi)型轉(zhuǎn)化為Boolean類(lèi)型：
1 === true; // false
'' === false // false
null === false // false
!!0 === false; // true
!!1 === true; // true
!!'' === false // true
!!null === false // true
- 為參數(shù)賦初值
JavaScript中沒(méi)有重載的概念，但是JavaScript中函數(shù)的參數(shù)都是可選的，如果調(diào)用時(shí)少寫(xiě)了一個(gè)參數(shù)，將會(huì)被undefined 所代替。function plus(base, added) {在這個(gè)例子中，plus(2) 和plus(2, undefined) 是等價(jià)的，2 + undefined 的結(jié)果是NaN 。
return base + added;
}
plus(2); // NaN
現(xiàn)在的問(wèn)題是，如果沒(méi)有傳遞第二個(gè)參數(shù)，如何為它賦初值呢？function plus(base, added) {
added = added || 1;
return base + added;
}
plus(2); // 3
plus(2, 2); // 4
有網(wǎng)友提到 plus(2, 0) = 3; 的確是這樣的，看來(lái)這個(gè)地方還要做一些特殊處理：function plus(base, added) {
added = added || (added === 0 ? 0 : 1);
return base + added;
}
- 阻止別人在Iframe中加載你的頁(yè)面
如果你的網(wǎng)站變得非常有人氣的時(shí)候，就有很多網(wǎng)站想鏈接到你的網(wǎng)站，甚至想把你的網(wǎng)頁(yè)通過(guò)IFrame嵌入它自己的網(wǎng)頁(yè)。
這樣就不好玩了，那么如何來(lái)阻止這樣行為呢？if(top !== window) {這段代碼應(yīng)該放在你每個(gè)頁(yè)面的head 中，如果你想知道現(xiàn)實(shí)中有沒(méi)人在用，看看baidu的博客你就知道了。
top.location.href = window.location.href;
}
- 字符串替換
String.prototype.replace 函數(shù)經(jīng)常會(huì)讓那些非常熟悉C#或者Java的程序員感到迷惑。
比如：'Hello world, hello world'.replace('world', 'JavaScript');replace 函數(shù)的第一個(gè)參數(shù)是正則表達(dá)式。
// The result is "Hello JavaScript, hello world"
如果你傳遞一個(gè)字符串到第一個(gè)參數(shù)，則只有第一個(gè)找到的匹配字符串被替換。
為了解決這個(gè)問(wèn)題，我們可以使用正則表達(dá)式：'Hello world, hello world'.replace(/world/g, 'JavaScript');
我們還可以指定在替換時(shí)忽略大小寫(xiě)：
// The result is "Hello JavaScript, hello JavaScript"
'Hello world, hello world'.replace(/hello/gi, 'Hi');
// The result is "Hi world, Hi world"
- 將arguments轉(zhuǎn)化為數(shù)組
函數(shù)中的預(yù)定義變量arguments 并非一個(gè)真正的數(shù)組，而是一個(gè)類(lèi)似數(shù)組的對(duì)象。
它具有length 屬性，但是沒(méi)有slice, push, sort等函數(shù)，那么如何使arguments 具有這些數(shù)組才有的函數(shù)呢？
也就是說(shuō)如何使arguments 變成一個(gè)真正的數(shù)組呢？function args() {
return [].slice.call(arguments, 0);
}
args(2, 5, 8); // [2, 5, 8]
- 為parseInt函數(shù)指定第二個(gè)參數(shù)
parseInt 用來(lái)將字符串轉(zhuǎn)化為整形的數(shù)字，語(yǔ)法為：parseInt(str, [radix])
其中第二個(gè)參數(shù)是可選的，用來(lái)指定第一個(gè)參數(shù)是幾進(jìn)制的。
如果沒(méi)有傳遞第二個(gè)參數(shù)，則按照如下規(guī)則：
->如果str 以 0x 開(kāi)頭，則認(rèn)為是16進(jìn)制。
->如果str 以 0 開(kāi)頭，則認(rèn)為是8進(jìn)制。
->否則，認(rèn)為是10進(jìn)制。
因此如下的代碼將會(huì)讓人很迷惑，如果你不知道這些規(guī)則：parseInt('08'); // 0
parseInt('08', 10); // 8
所以，安全起見(jiàn)一定要為parseInt 指定第二個(gè)參數(shù)。
- 從數(shù)組中刪除一個(gè)元素
或許我們可以通過(guò)delete 來(lái)做到：var arr = [1, 2, 3, 4, 5];
可以看到，delete 并不能真正的刪除數(shù)組中的一個(gè)元素。刪除的元素會(huì)被undefined 取代，數(shù)組的長(zhǎng)度并沒(méi)有變化。
delete arr[1];
arr; // [1, undefined, 3, 4, 5]
事實(shí)上，我們可以通過(guò)Array.prototype中的splice 函數(shù)來(lái)刪除數(shù)組中的元素，如下所示：var arr = [1, 2, 3, 4, 5];
arr.splice(1, 1);
arr; // [1, 3, 4, 5]
- 函數(shù)也是對(duì)象
在JavaScript中函數(shù)也是對(duì)象，因?yàn)槲覀兛梢詾楹瘮?shù)添加屬性。
比如：function add() {我們?yōu)楹瘮?shù)add 添加了count 屬性，用來(lái)記錄此函數(shù)被調(diào)用的次數(shù)。
return add.count++;
}
add.count = 0;
add(); // 0
add(); // 1
add(); // 2
當(dāng)然這可以通過(guò)更優(yōu)雅的方式來(lái)實(shí)現(xiàn)：function add() {arguments.callee 指向當(dāng)前正在運(yùn)行的函數(shù)。
if(!arguments.callee.count) {
arguments.callee.count = 0;
}
return arguments.callee.count++;
}
add(); // 0
add(); // 1
add(); // 2
- 數(shù)組中的最大值
如何在全是數(shù)字的數(shù)組中找到最大值，我們可以簡(jiǎn)單的通過(guò)循環(huán)來(lái)完成：var arr = [2, 3, 45, 12, 8];
有沒(méi)有其他方法？我們都知道JavaScript中有一個(gè)Math 對(duì)象進(jìn)行數(shù)字的處理：
var max = arr[0];
for(var i in arr) {
if(arr[i] > max) {
max = arr[i];
}
}
max; // 45
Math.max(2, 3, 45, 12, 8); // 45
然后，我們可以這樣來(lái)找到數(shù)組中最大值：
var arr = [2, 3, 45, 12, 8];
Math.max.apply(null, arr); // 45
- 為IE添加console.log 函數(shù)
在Firefox下并有Firebug的支持下，我們經(jīng)常使用console.log 來(lái)在控制臺(tái)記錄一些信息。
但是這種做法在IE下會(huì)阻止JavaScript的執(zhí)行（在Firefox下沒(méi)有啟用Firebug情況下也是一樣），因?yàn)榇藭r(shí)根本沒(méi)有console 對(duì)象存在。
我們可以通過(guò)如下小技巧來(lái)防止這樣情況的發(fā)生：if (typeof(console) === 'undefined') {
window.console = {
log: function(msg) {
alert(msg);
}
};
}
console.log('debug info.');
- undefined 是JavaScript中保留關(guān)鍵字么？
看起來(lái)像是的，但實(shí)際上undefined并不是JavaScript中的關(guān)鍵字:var undefined = 'Hello';
這段代碼可能會(huì)讓你感到很奇怪，不過(guò)它的確能夠正常運(yùn)行，undefined 只是JavaScript中一個(gè)預(yù)定義的變量而已。
undefined; // 'Hello'
注：在JavaScript程序中，千萬(wàn)不要這樣做，這個(gè)技巧只是告訴你有這么一回事而已。
- 判斷一個(gè)變量是否為undefined
兩種情況下，一個(gè)變量為undefined：
1. 聲明了變量，但是沒(méi)有賦值var name;
2. 從來(lái)沒(méi)有聲明過(guò)此變量
name === undefined; // true
name2 === undefined; // error – name2 is not defined
在第二種情況下，會(huì)有一個(gè)錯(cuò)誤被拋出，那么如果判斷一個(gè)變量是否為undefined而不產(chǎn)生錯(cuò)誤呢？
下面提供了一種通用的方法：typeof(name2) === ‘undefined'; // true
- 預(yù)加載圖片
預(yù)加載圖片就是加載頁(yè)面上不存在的圖片，以便以后使用JavaScript把它們快速顯示出來(lái)。
比如你想在鼠標(biāo)移動(dòng)到某個(gè)圖片上時(shí)顯示另一張圖片:var img = new Image();
img.src = "clock2.gif";
<img src="clock.gif" src="clock.gif" alt=""
onmouseover="this.src='clock2.gif';"
onmouseout="this.src=clock.gif';" />
那么，如何加載一組圖片呢？考慮如下代碼：var source = ['img1.gif','img2.gif'];
實(shí)際上，這段代碼只能預(yù)加載最后的一張圖片，因?yàn)槠渌膱D片根本沒(méi)有時(shí)間來(lái)預(yù)加載在循環(huán)到來(lái)的時(shí)候。
var img = new Image();
for(var i = 0; i < source.length; i++) {
img.src = source[i];
}
因此正確的寫(xiě)法應(yīng)該是：var source = ['img1.gif','img2.gif'];
for(var i = 0; i < source.length; i++) {
var img = new Image();
img.src = source[i];
}
- 閉包（closure）
閉包指的是函數(shù)內(nèi)的局部變量，當(dāng)函數(shù)返回時(shí)此變量依然可用。
當(dāng)你在函數(shù)內(nèi)部定義另外一個(gè)函數(shù)時(shí)，你就創(chuàng)建了一個(gè)閉包，一個(gè)著名的例子：function add(i) {add(2) 是一個(gè)函數(shù)，它可能獲取外部函數(shù)的局部變量i 。
return function() {
return ++i;
};
}
add(2).toString(); // "function () { return ++i; }"
add(2)(); // 3
參考文章
- 私有變量
我們經(jīng)常使用命名規(guī)范來(lái)標(biāo)示一個(gè)變量是否為私有變量（最常用來(lái)標(biāo)示）：var person = {下劃線前綴用來(lái)作為私有變量的約定，但是其他開(kāi)發(fā)人員仍然可以調(diào)用此私有變量：
_name: '',
getName: function() {
return this._name || 'not defined';
}
};
person.getName(); // "not defined"
person._name; // ""
那么，如何在JavaScript中創(chuàng)建一個(gè)真正的私有變量呢？
主要技巧是使用匿名函數(shù)（anonymous function）和閉包（closure）。var person = {};
(function() {
var _name = '';
person.getName = function() {
return _name || 'not defined';
}
})();
person.getName(); // "not defined"
typeof(person._name); // "undefined"
- JavaScript沒(méi)有塊級(jí)上下文（Scope）
JavaScript中塊級(jí)代碼沒(méi)有上下文，實(shí)際上只有函數(shù)有自己的上下文。for(var i = 0; i < 2; i ++) {如果想創(chuàng)建一個(gè)上下文，可以使用自執(zhí)行的匿名函數(shù)：
}
i; // 2
(function (){
for(var i = 0; i < 2; i ++) {
}
})();
typeof(i) === 'undefined'; // true
- 怪異的NaN
NaN用來(lái)表示一個(gè)值不是數(shù)字。
NaN在JavaScript中行為很怪異，是因?yàn)槟荖aN和任何值都不相等（包括它自己）。NaN === NaN; // false
因?yàn)橄旅娴拇a可能會(huì)讓一些人抓狂：
parseInt('hello', 10); // NaN那么如何來(lái)檢查一個(gè)值是否NaN?
parseInt('hello', 10) == NaN; // false
parseInt('hello', 10) === NaN; // false
可以使用window.isNaN來(lái)判斷：isNaN(parseInt('hello', 10)); // true
- 真值和假值
JavaScript中所有值都能隱式地轉(zhuǎn)化為Boolean類(lèi)型。
在條件判斷中，下面這些值會(huì)自動(dòng)轉(zhuǎn)化為false：
null, undefined, NaN, 0, ‘', false
因此，不需要做如下復(fù)雜的判斷:if(obj === undefined || obj === null) {而只需要這樣做就行了：
}
if(!obj) {
}
- 修改arguments
比如，添加一個(gè)值到arguments中：function add() {這樣會(huì)出錯(cuò)，因?yàn)?EM>arguments 不是一個(gè)真正的數(shù)組，沒(méi)有push方法。
arguments.push('new value');
}
add(); // error - arguments.push is not a function
解決辦法：function add() {
Array.prototype.push.call(arguments, 'new value');
return arguments;
}
add()[0]; // "new value"
- Boolean 和 new Boolean
我們可以把Boolean看做是一個(gè)函數(shù)，用來(lái)產(chǎn)生Boolean類(lèi)型的值（Literal）：Boolean(false) === false; // true
所以，Boolean(0) 和!!0 是等價(jià)的。
Boolean('') === false; // true
我們也可以把Boolean看做是一個(gè)構(gòu)造函數(shù)，通過(guò)new 來(lái)創(chuàng)建一個(gè)Boolean類(lèi)型的對(duì)象：new Boolean(false) === false; // false
new Boolean(false) == false; // true
typeof(new Boolean(false)); // "object"
typeof(Boolean(false)); // "boolean"
- 快速字符串連接
我們經(jīng)常使用+ 將較短的字符串連接為一個(gè)長(zhǎng)字符串，這在大部分的情況下是沒(méi)問(wèn)題的。
但是如果有大量的字符串需要連接，這種做法將會(huì)遇到性能問(wèn)題，尤其是在IE下。var startTime = new Date();
var str = '';
for (var i = 0; i < 50000; i++) {
str += i;
}
alert(new Date() - startTime); // Firefox - 18ms, IE7 - 2060ms
var startTime = new Date();
var arr = [];
for (var i = 0; i < 100000; i++) {
arr.push(i);
}
var str = arr.join("");
alert(new Date() - startTime); // Firefox - 38ms, IE7 - 280ms
可以看到Firefox似乎對(duì)+ 操作符進(jìn)行了優(yōu)化，而IE則表現(xiàn)的傻乎乎的。
- 一元操作符 +
在JavaScript中，我們可以在字符串之前使用一元操作符“+”。這將會(huì)把字符串轉(zhuǎn)化為數(shù)字，如果轉(zhuǎn)化失敗則返回NaN。
2 + '1'; // "21"
2 + ( +'1'); // 3
如果把 + 用在非字符串的前面，將按照如下順序進(jìn)行嘗試轉(zhuǎn)化：
- 調(diào)用valueOf()
- 調(diào)用toString()
- 轉(zhuǎn)化為數(shù)字
+new Date; // 1242616452016
參考文章
+new Date === new Date().getTime(); // true
+new Date() === Number(new Date) // true
- encodeURI和encodeURIComponent
window.encodeURI函數(shù)用來(lái)編碼一個(gè)URL，但是不會(huì)對(duì)以下字符進(jìn)行編碼：“:”, “/”, “;”, “?”.
window.encodeURIComponent則會(huì)對(duì)上述字符進(jìn)行編碼。
我們通過(guò)一個(gè)例子來(lái)說(shuō)明：'index.jsp?page='+encodeURI('/page/home.jsp'); // "index.jsp?page=/page/home.jsp"因此，在對(duì)URL進(jìn)行編碼時(shí)我們經(jīng)常會(huì)選擇 encodeURIComponent。
'index.jsp?page='+encodeURIComponent('/page/home.jsp'); // "index.jsp?page=%2Fpage%2Fhome.jsp"
- table.innerHTML在IE下是只讀屬性
我們經(jīng)常通過(guò)節(jié)點(diǎn)的innerHTML 屬性來(lái)填充節(jié)點(diǎn)，比如：<div id="container1"> </div>
document.getElementById('container1').innerHTML = "Hello World!";但是在IE下設(shè)置table.innerHTML 將會(huì)導(dǎo)致錯(cuò)誤：<table id="table1"> </table>
// works well in Firefox, but fail to work in IE
實(shí)際上，table, thead, tr, select等元素的innerHTML屬性在IE下都是只讀的。
document.getElementById('table1').innerHTML = "<tr><td>Hello</td><td>World!</td></tr>";
那么如果動(dòng)態(tài)的創(chuàng)建一個(gè)table呢，下面提供了一種可行的方法：<div id="table1"> </div>
document.getElementById('table1').innerHTML = "<table><tr><td>Hello</td><td>World!</td></tr></table>";
- 0.1+0.2 != 0.3
JavaScript將小數(shù)作為浮點(diǎn)數(shù)對(duì)待，所以可能會(huì)產(chǎn)生一些四舍五入的錯(cuò)誤，比如：0.1 + 0.2; // 0.30000000000000004
你可以通過(guò)toFixed方法指定四舍五入的小數(shù)位數(shù)：(0.1 + 0.2).toFixed(); // "0"
(0.1 + 0.2).toFixed(1); // "0.3"
javascript 是一種區(qū)分大小寫(xiě)的程序語(yǔ)言.
定義數(shù)組:
var strweek= new Array(7);
問(wèn)號(hào)表達(dá)式
var i= (condition)?A:B;
相當(dāng)于if-else 語(yǔ)句;condition 成立 執(zhí)行A ，不成立執(zhí)行B;
switch 語(yǔ)句
var i=3;
var result="";
swithck(i);
{
case 1;
result="First";
case 2;
result="Second";
case 3;
result="Three";
break;
}
Date類(lèi)
getDate() getYear() getMont()
getMinutes() getHours() getSeconds()
setTimeout("fution()",1000);
相關(guān)文章
如何使用proxy實(shí)現(xiàn)一個(gè)簡(jiǎn)單完整的MVVM庫(kù)的示例代碼
這篇文章主要介紹了如何使用proxy實(shí)現(xiàn)一個(gè)簡(jiǎn)單完整的MVVM庫(kù)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
JS基于對(duì)象的鏈表實(shí)現(xiàn)與使用方法示例
這篇文章主要介紹了JS基于對(duì)象的鏈表實(shí)現(xiàn)與使用方法,結(jié)合實(shí)例形式分析了鏈表的原理及javascript定義與使用鏈表的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
js實(shí)現(xiàn)動(dòng)態(tài)添加上傳文件頁(yè)面
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)動(dòng)態(tài)添加上傳文件頁(yè)面，如何動(dòng)態(tài)創(chuàng)建一個(gè)input標(biāo)簽示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
本文主要介紹了js獲取瀏覽器和屏幕的各種寬度高度的方法，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02![怎么在下面的HTML里調(diào)用數(shù)組cs[]的值](http://img.jbzj.com/images/xgimg/bcimg4.png)
怎么在下面的HTML里調(diào)用數(shù)組cs[]的值
怎么在下面的HTML里調(diào)用數(shù)組cs[]的值...2007-01-01
這篇文章主要介紹了js對(duì)字符的驗(yàn)證方法,實(shí)例匯總了漢字驗(yàn)證、手機(jī)驗(yàn)證、郵箱驗(yàn)證、身份證號(hào)驗(yàn)證等各種常用技巧,需要的朋友可以參考下2015-02-02
最近因?yàn)楣ぷ餍枰撕枚嗵斓膉s了，老婆一問(wèn)我在弄 ajax, 一問(wèn)我在弄js，她都聽(tīng)得沒(méi)有一點(diǎn)興趣了，我自己感覺(jué)還好，畢竟做出來(lái)了東西就有成就感吧，這里把幾個(gè)有用但是不常見(jiàn)的東西貼出來(lái)供大家參考參考2009-02-02
在knockoutjs 上自己實(shí)現(xiàn)的flux(實(shí)例講解)
下面小編就為大家分享一篇在knockoutjs 上自己實(shí)現(xiàn)的flux方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
分頁(yè)打印的實(shí)現(xiàn)方法有很多，本文為大家介紹的使用js來(lái)完成這個(gè)需求，感興趣的朋友可以參考下2014-02-02
JS實(shí)現(xiàn)單行文字不間斷向上滾動(dòng)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)單行文字不間斷向上滾動(dòng)的方法,以實(shí)例形式較為詳細(xì)的分析了文字滾動(dòng)效果實(shí)現(xiàn)的原理與技巧,需要的朋友可以參考下2015-01-01