JavaScript 應(yīng)用技巧集合[推薦]
更新時(shí)間:2009年08月30日 21:50:08 作者:
前段時(shí)間我曾經(jīng)對(duì)JavaScript中的應(yīng)用技巧進(jìn)行了收集和總結(jié)這里我將會(huì)對(duì)這些應(yīng)用技巧進(jìn)行集中描述,如果你覺得遺漏了一些好用的應(yīng)用技巧,也請(qǐng)?jiān)诹粞灾刑岢?,我?huì)及時(shí)更新到這篇文章中的。
轉(zhuǎn)化為Boolean類型
所有JavaScript中的值都能隱式的轉(zhuǎn)化為Boolean類型,比如:
因此當(dāng)我們使用三個(gè)等于號(hào)進(jìn)行比較時(shí):
為參數(shù)賦初值
JavaScript中沒有重載的概念,但是JavaScript中函數(shù)的參數(shù)都是可選的,如果調(diào)用時(shí)少寫了一個(gè)參數(shù),將會(huì)被undefined所代替。
現(xiàn)在的問題是,如果沒有傳遞第二個(gè)參數(shù),如何為它賦初值呢?
有網(wǎng)友提到 plus(2, 0) = 3; 的確是這樣的,看來這個(gè)地方還要做一些特殊處理:
阻止別人在Iframe中加載你的頁面
如果你的網(wǎng)站變得非常有人氣的時(shí)候,就有很多網(wǎng)站想鏈接到你的網(wǎng)站,甚至想把你的網(wǎng)頁通過IFrame嵌入它自己的網(wǎng)頁。
這樣就不好玩了,那么如何來阻止這樣行為呢?
字符串替換
String.prototype.replace函數(shù)經(jīng)常會(huì)讓那些非常熟悉C#或者Java的程序員感到迷惑。
比如:
如果你傳遞一個(gè)字符串到第一個(gè)參數(shù),則只有第一個(gè)找到的匹配字符串被替換。
為了解決這個(gè)問題,我們可以使用正則表達(dá)式:
將arguments轉(zhuǎn)化為數(shù)組
函數(shù)中的預(yù)定義變量arguments并非一個(gè)真正的數(shù)組,而是一個(gè)類似數(shù)組的對(duì)象。
它具有length屬性,但是沒有slice, push, sort等函數(shù),那么如何使arguments具有這些數(shù)組才有的函數(shù)呢?
也就是說如何使arguments變成一個(gè)真正的數(shù)組呢?
為parseInt函數(shù)指定第二個(gè)參數(shù)
parseInt用來將字符串轉(zhuǎn)化為整形的數(shù)字,語法為:
如果沒有傳遞第二個(gè)參數(shù),則按照如下規(guī)則:
->如果str以 0x 開頭,則認(rèn)為是16進(jìn)制。
->如果str以 0 開頭,則認(rèn)為是8進(jìn)制。
->否則,認(rèn)為是10進(jìn)制。
因此如下的代碼將會(huì)讓人很迷惑,如果你不知道這些規(guī)則:
所以,安全起見一定要為parseInt指定第二個(gè)參數(shù)。
從數(shù)組中刪除一個(gè)元素
或許我們可以通過delete來做到:
事實(shí)上,我們可以通過Array.prototype中的splice函數(shù)來刪除數(shù)組中的元素,如下所示:
函數(shù)也是對(duì)象
在JavaScript中函數(shù)也是對(duì)象,因?yàn)槲覀兛梢詾楹瘮?shù)添加屬性。
比如:
當(dāng)然這可以通過更優(yōu)雅的方式來實(shí)現(xiàn):
數(shù)組中的最大值
如何在全是數(shù)字的數(shù)組中找到最大值,我們可以簡單的通過循環(huán)來完成:
為IE添加console.log函數(shù)
在Firefox下并有Firebug的支持下,我們經(jīng)常使用console.log來在控制臺(tái)記錄一些信息。
但是這種做法在IE下會(huì)阻止JavaScript的執(zhí)行(在Firefox下沒有啟用Firebug情況下也是一樣),因?yàn)榇藭r(shí)根本沒有console對(duì)象存在。
我們可以通過如下小技巧來防止這樣情況的發(fā)生:
undefined是JavaScript中保留關(guān)鍵字么?
看起來像是的,但實(shí)際上undefined并不是JavaScript中的關(guān)鍵字:
注:在JavaScript程序中,千萬不要這樣做,這個(gè)技巧只是告訴你有這么一回事而已。
判斷一個(gè)變量是否為undefined
兩種情況下,一個(gè)變量為undefined:
1. 聲明了變量,但是沒有賦值
下面提供了一種通用的方法:
預(yù)加載圖片
預(yù)加載圖片就是加載頁面上不存在的圖片,以便以后使用JavaScript把它們快速顯示出來。
比如你想在鼠標(biāo)移動(dòng)到某個(gè)圖片上時(shí)顯示另一張圖片:
那么,如何加載一組圖片呢?考慮如下代碼:
因此正確的寫法應(yīng)該是:
閉包(closure)
閉包指的是函數(shù)內(nèi)的局部變量,當(dāng)函數(shù)返回時(shí)此變量依然可用。
當(dāng)你在函數(shù)內(nèi)部定義另外一個(gè)函數(shù)時(shí),你就創(chuàng)建了一個(gè)閉包,一個(gè)著名的例子:
參考文章
私有變量
我們經(jīng)常使用命名規(guī)范來標(biāo)示一個(gè)變量是否為私有變量(最常用來標(biāo)示):
主要技巧是使用匿名函數(shù)(anonymous function)和閉包(closure)。
JavaScript沒有塊級(jí)上下文(Scope)
JavaScript中塊級(jí)代碼沒有上下文,實(shí)際上只有函數(shù)有自己的上下文。
怪異的NaN
NaN用來表示一個(gè)值不是數(shù)字。
NaN在JavaScript中行為很怪異,是因?yàn)槟荖aN和任何值都不相等(包括它自己)。
可以使用window.isNaN來判斷:
真值和假值
JavaScript中所有值都能隱式地轉(zhuǎn)化為Boolean類型。
在條件判斷中,下面這些值會(huì)自動(dòng)轉(zhuǎn)化為false:
null, undefined, NaN, 0, ‘', false
因此,不需要做如下復(fù)雜的判斷:
修改arguments
比如,添加一個(gè)值到arguments中:
解決辦法:
Boolean 和 new Boolean
我們可以把Boolean看做是一個(gè)函數(shù),用來產(chǎn)生Boolean類型的值(Literal):
我們也可以把Boolean看做是一個(gè)構(gòu)造函數(shù),通過new來創(chuàng)建一個(gè)Boolean類型的對(duì)象:
快速字符串連接
我們經(jīng)常使用+將較短的字符串連接為一個(gè)長字符串,這在大部分的情況下是沒問題的。
但是如果有大量的字符串需要連接,這種做法將會(huì)遇到性能問題,尤其是在IE下。
可以看到Firefox似乎對(duì)+操作符進(jìn)行了優(yōu)化,而IE則表現(xiàn)的傻乎乎的。
一元操作符 +
encodeURI和encodeURIComponent
window.encodeURI函數(shù)用來編碼一個(gè)URL,但是不會(huì)對(duì)以下字符進(jìn)行編碼:“:”, “/”, “;”, “?”.
window.encodeURIComponent則會(huì)對(duì)上述字符進(jìn)行編碼。
我們通過一個(gè)例子來說明:
table.innerHTML在IE下是只讀屬性
我們經(jīng)常通過節(jié)點(diǎn)的innerHTML屬性來填充節(jié)點(diǎn),比如:
那么如果動(dòng)態(tài)的創(chuàng)建一個(gè)table呢,下面提供了一種可行的方法:
0.1+0.2 != 0.3
JavaScript將小數(shù)作為浮點(diǎn)數(shù)對(duì)待,所以可能會(huì)產(chǎn)生一些四舍五入的錯(cuò)誤,比如:
所有JavaScript中的值都能隱式的轉(zhuǎn)化為Boolean類型,比如:
復(fù)制代碼 代碼如下:
0 == false; // true 1 == true; // true '' == false // true null == false // true
但是這些值都不是Boolean類型。因此當(dāng)我們使用三個(gè)等于號(hào)進(jìn)行比較時(shí):
復(fù)制代碼 代碼如下:
0 === false; // false 1 === true; // false '' === false // false null === false // false
現(xiàn)在的問題是如何將其他類型轉(zhuǎn)化為Boolean類型: 復(fù)制代碼 代碼如下:
!!0 === false; // true !!1 === true; // true !!'' === false // true !!null === false // true
為參數(shù)賦初值
JavaScript中沒有重載的概念,但是JavaScript中函數(shù)的參數(shù)都是可選的,如果調(diào)用時(shí)少寫了一個(gè)參數(shù),將會(huì)被undefined所代替。
復(fù)制代碼 代碼如下:
function plus(base, added) { return base + added; } plus(2); // NaN
在這個(gè)例子中,plus(2)和plus(2, undefined)是等價(jià)的,2 + undefined的結(jié)果是NaN。 現(xiàn)在的問題是,如果沒有傳遞第二個(gè)參數(shù),如何為它賦初值呢?
復(fù)制代碼 代碼如下:
function plus(base, added) { added = added || 1; return base + added; } plus(2); // 3 plus(2, 2); // 4
有網(wǎng)友提到 plus(2, 0) = 3; 的確是這樣的,看來這個(gè)地方還要做一些特殊處理:
復(fù)制代碼 代碼如下:
function plus(base, added) { added = added || (added === 0 ? 0 : 1); return base + added; }
阻止別人在Iframe中加載你的頁面
如果你的網(wǎng)站變得非常有人氣的時(shí)候,就有很多網(wǎng)站想鏈接到你的網(wǎng)站,甚至想把你的網(wǎng)頁通過IFrame嵌入它自己的網(wǎng)頁。
這樣就不好玩了,那么如何來阻止這樣行為呢?
復(fù)制代碼 代碼如下:
if(top !== window) { top.location.href = window.location.href; }
這段代碼應(yīng)該放在你每個(gè)頁面的head中,如果你想知道現(xiàn)實(shí)中有沒人在用,看看baidu的博客你就知道了。 字符串替換
String.prototype.replace函數(shù)經(jīng)常會(huì)讓那些非常熟悉C#或者Java的程序員感到迷惑。
比如:
復(fù)制代碼 代碼如下:
'Hello world, hello world'.replace('world', 'JavaScript'); // The result is "Hello JavaScript, hello world"
replace函數(shù)的第一個(gè)參數(shù)是正則表達(dá)式。如果你傳遞一個(gè)字符串到第一個(gè)參數(shù),則只有第一個(gè)找到的匹配字符串被替換。
為了解決這個(gè)問題,我們可以使用正則表達(dá)式:
復(fù)制代碼 代碼如下:
'Hello world, hello world'.replace(/world/g, 'JavaScript'); // The result is "Hello JavaScript, hello JavaScript"
我們還可以指定在替換時(shí)忽略大小寫: 復(fù)制代碼 代碼如下:
'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è)類似數(shù)組的對(duì)象。
它具有length屬性,但是沒有slice, push, sort等函數(shù),那么如何使arguments具有這些數(shù)組才有的函數(shù)呢?
也就是說如何使arguments變成一個(gè)真正的數(shù)組呢?
復(fù)制代碼 代碼如下:
function args() { return [].slice.call(arguments, 0); } args(2, 5, 8); // [2, 5, 8]
為parseInt函數(shù)指定第二個(gè)參數(shù)
parseInt用來將字符串轉(zhuǎn)化為整形的數(shù)字,語法為:
復(fù)制代碼 代碼如下:
parseInt(str, [radix])
其中第二個(gè)參數(shù)是可選的,用來指定第一個(gè)參數(shù)是幾進(jìn)制的。 如果沒有傳遞第二個(gè)參數(shù),則按照如下規(guī)則:
->如果str以 0x 開頭,則認(rèn)為是16進(jìn)制。
->如果str以 0 開頭,則認(rèn)為是8進(jìn)制。
->否則,認(rèn)為是10進(jìn)制。
因此如下的代碼將會(huì)讓人很迷惑,如果你不知道這些規(guī)則:
復(fù)制代碼 代碼如下:
parseInt('08'); // 0 parseInt('08', 10); // 8
所以,安全起見一定要為parseInt指定第二個(gè)參數(shù)。
從數(shù)組中刪除一個(gè)元素
或許我們可以通過delete來做到:
復(fù)制代碼 代碼如下:
var arr = [1, 2, 3, 4, 5]; delete arr[1]; arr; // [1, undefined, 3, 4, 5]
可以看到,delete并不能真正的刪除數(shù)組中的一個(gè)元素。刪除的元素會(huì)被undefined取代,數(shù)組的長度并沒有變化。 事實(shí)上,我們可以通過Array.prototype中的splice函數(shù)來刪除數(shù)組中的元素,如下所示:
復(fù)制代碼 代碼如下:
var arr = [1, 2, 3, 4, 5]; arr.splice(1, 1); arr; // [1, 3, 4, 5]
函數(shù)也是對(duì)象
在JavaScript中函數(shù)也是對(duì)象,因?yàn)槲覀兛梢詾楹瘮?shù)添加屬性。
比如:
復(fù)制代碼 代碼如下:
function add() { return add.count++; } add.count = 0; add(); // 0 add(); // 1 add(); // 2
我們?yōu)楹瘮?shù)add添加了count屬性,用來記錄此函數(shù)被調(diào)用的次數(shù)。 當(dāng)然這可以通過更優(yōu)雅的方式來實(shí)現(xiàn):
復(fù)制代碼 代碼如下:
function add() { if(!arguments.callee.count) { arguments.callee.count = 0; } return arguments.callee.count++; } add(); // 0 add(); // 1 add(); // 2
arguments.callee指向當(dāng)前正在運(yùn)行的函數(shù)。 數(shù)組中的最大值
如何在全是數(shù)字的數(shù)組中找到最大值,我們可以簡單的通過循環(huán)來完成:
復(fù)制代碼 代碼如下:
var arr = [2, 3, 45, 12, 8]; var max = arr[0]; for(var i in arr) { if(arr[i] > max) { max = arr[i]; } } max; // 45
有沒有其他方法?我們都知道JavaScript中有一個(gè)Math對(duì)象進(jìn)行數(shù)字的處理: 復(fù)制代碼 代碼如下:
Math.max(2, 3, 45, 12, 8); // 45
然后,我們可以這樣來找到數(shù)組中最大值: 復(fù)制代碼 代碼如下:
var arr = [2, 3, 45, 12, 8]; Math.max.apply(null, arr); // 45
為IE添加console.log函數(shù)
在Firefox下并有Firebug的支持下,我們經(jīng)常使用console.log來在控制臺(tái)記錄一些信息。
但是這種做法在IE下會(huì)阻止JavaScript的執(zhí)行(在Firefox下沒有啟用Firebug情況下也是一樣),因?yàn)榇藭r(shí)根本沒有console對(duì)象存在。
我們可以通過如下小技巧來防止這樣情況的發(fā)生:
復(fù)制代碼 代碼如下:
if (typeof(console) === 'undefined') { window.console = { log: function(msg) { alert(msg); } }; } console.log('debug info.');
undefined是JavaScript中保留關(guān)鍵字么?
看起來像是的,但實(shí)際上undefined并不是JavaScript中的關(guān)鍵字:
復(fù)制代碼 代碼如下:
var undefined = 'Hello'; undefined; // 'Hello'
這段代碼可能會(huì)讓你感到很奇怪,不過它的確能夠正常運(yùn)行,undefined只是JavaScript中一個(gè)預(yù)定義的變量而已。 注:在JavaScript程序中,千萬不要這樣做,這個(gè)技巧只是告訴你有這么一回事而已。
判斷一個(gè)變量是否為undefined
兩種情況下,一個(gè)變量為undefined:
1. 聲明了變量,但是沒有賦值
復(fù)制代碼 代碼如下:
var name; name === undefined; // true
2. 從來沒有聲明過此變量 復(fù)制代碼 代碼如下:
name2 === undefined; // error – name2 is not defined
在第二種情況下,會(huì)有一個(gè)錯(cuò)誤被拋出,那么如果判斷一個(gè)變量是否為undefined而不產(chǎn)生錯(cuò)誤呢? 下面提供了一種通用的方法:
復(fù)制代碼 代碼如下:
typeof(name2) === ‘undefined'; // true
預(yù)加載圖片
預(yù)加載圖片就是加載頁面上不存在的圖片,以便以后使用JavaScript把它們快速顯示出來。
比如你想在鼠標(biāo)移動(dòng)到某個(gè)圖片上時(shí)顯示另一張圖片:
復(fù)制代碼 代碼如下:
var img = new Image(); img.src = "clock2.gif";
復(fù)制代碼 代碼如下:
<img src="clock.gif" src="clock.gif" alt="" onmouseover="this.src='clock2.gif';" onmouseout="this.src=clock.gif';" />
那么,如何加載一組圖片呢?考慮如下代碼:
復(fù)制代碼 代碼如下:
var source = ['img1.gif','img2.gif']; var img = new Image(); for(var i = 0; i < source.length; i++) { img.src = source[i]; }
實(shí)際上,這段代碼只能預(yù)加載最后的一張圖片,因?yàn)槠渌膱D片根本沒有時(shí)間來預(yù)加載在循環(huán)到來的時(shí)候。 因此正確的寫法應(yīng)該是:
復(fù)制代碼 代碼如下:
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è)著名的例子:
復(fù)制代碼 代碼如下:
function add(i) { return function() { return ++i; }; } add(2).toString(); // "function () { return ++i; }" add(2)(); // 3
add(2)是一個(gè)函數(shù),它可能獲取外部函數(shù)的局部變量i。 參考文章
私有變量
我們經(jīng)常使用命名規(guī)范來標(biāo)示一個(gè)變量是否為私有變量(最常用來標(biāo)示):
復(fù)制代碼 代碼如下:
var person = { _name: '', getName: function() { return this._name || 'not defined'; } }; person.getName(); // "not defined"
下劃線前綴用來作為私有變量的約定,但是其他開發(fā)人員仍然可以調(diào)用此私有變量: 復(fù)制代碼 代碼如下:
person._name; // ""
那么,如何在JavaScript中創(chuàng)建一個(gè)真正的私有變量呢? 主要技巧是使用匿名函數(shù)(anonymous function)和閉包(closure)。
復(fù)制代碼 代碼如下:
var person = {}; (function() { var _name = ''; person.getName = function() { return _name || 'not defined'; } })(); person.getName(); // "not defined" typeof(person._name); // "undefined"
JavaScript沒有塊級(jí)上下文(Scope)
JavaScript中塊級(jí)代碼沒有上下文,實(shí)際上只有函數(shù)有自己的上下文。
復(fù)制代碼 代碼如下:
for(var i = 0; i < 2; i ++) { } i; // 2
如果想創(chuàng)建一個(gè)上下文,可以使用自執(zhí)行的匿名函數(shù): 復(fù)制代碼 代碼如下:
(function (){ for(var i = 0; i < 2; i ++) { } })(); typeof(i) === 'undefined'; // true
怪異的NaN
NaN用來表示一個(gè)值不是數(shù)字。
NaN在JavaScript中行為很怪異,是因?yàn)槟荖aN和任何值都不相等(包括它自己)。
復(fù)制代碼 代碼如下:
NaN === NaN; // false
因?yàn)橄旅娴拇a可能會(huì)讓一些人抓狂: 復(fù)制代碼 代碼如下:
parseInt('hello', 10); // NaN parseInt('hello', 10) == NaN; // false parseInt('hello', 10) === NaN; // false
那么如何來檢查一個(gè)值是否NaN?可以使用window.isNaN來判斷:
復(fù)制代碼 代碼如下:
isNaN(parseInt('hello', 10)); // true
真值和假值
JavaScript中所有值都能隱式地轉(zhuǎn)化為Boolean類型。
在條件判斷中,下面這些值會(huì)自動(dòng)轉(zhuǎn)化為false:
null, undefined, NaN, 0, ‘', false
因此,不需要做如下復(fù)雜的判斷:
復(fù)制代碼 代碼如下:
if(obj === undefined || obj === null) { }
而只需要這樣做就行了: 復(fù)制代碼 代碼如下:
if(!obj) { }
修改arguments
比如,添加一個(gè)值到arguments中:
復(fù)制代碼 代碼如下:
function add() { arguments.push('new value'); } add(); // error - arguments.push is not a function
這樣會(huì)出錯(cuò),因?yàn)?EM>arguments不是一個(gè)真正的數(shù)組,沒有push方法。 解決辦法:
復(fù)制代碼 代碼如下:
function add() { Array.prototype.push.call(arguments, 'new value'); return arguments; } add()[0]; // "new value"
Boolean 和 new Boolean
我們可以把Boolean看做是一個(gè)函數(shù),用來產(chǎn)生Boolean類型的值(Literal):
復(fù)制代碼 代碼如下:
Boolean(false) === false; // true Boolean('') === false; // true
所以,Boolean(0)和!!0是等價(jià)的。 我們也可以把Boolean看做是一個(gè)構(gòu)造函數(shù),通過new來創(chuàng)建一個(gè)Boolean類型的對(duì)象:
復(fù)制代碼 代碼如下:
new Boolean(false) === false; // false new Boolean(false) == false; // true typeof(new Boolean(false)); // "object" typeof(Boolean(false)); // "boolean"
快速字符串連接
我們經(jīng)常使用+將較短的字符串連接為一個(gè)長字符串,這在大部分的情況下是沒問題的。
但是如果有大量的字符串需要連接,這種做法將會(huì)遇到性能問題,尤其是在IE下。
復(fù)制代碼 代碼如下:
var startTime = new Date(); var str = ''; for (var i = 0; i < 50000; i++) { str += i; } alert(new Date() - startTime); // Firefox - 18ms, IE7 - 2060ms
復(fù)制代碼 代碼如下:
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。
復(fù)制代碼 代碼如下:
2 + '1'; // "21" 2 + ( +'1'); // 3
如果把 + 用在非字符串的前面,將按照如下順序進(jìn)行嘗試轉(zhuǎn)化:調(diào)用valueOf() 調(diào)用toString() 轉(zhuǎn)化為數(shù)字
復(fù)制代碼 代碼如下:
+new Date; // 1242616452016 +new Date === new Date().getTime(); // true +new Date() === Number(new Date) // true
參考文章 encodeURI和encodeURIComponent
window.encodeURI函數(shù)用來編碼一個(gè)URL,但是不會(huì)對(duì)以下字符進(jìn)行編碼:“:”, “/”, “;”, “?”.
window.encodeURIComponent則會(huì)對(duì)上述字符進(jìn)行編碼。
我們通過一個(gè)例子來說明:
復(fù)制代碼 代碼如下:
'index.jsp?page='+encodeURI('/page/home.jsp'); // "index.jsp?page=/page/home.jsp" 'index.jsp?page='+encodeURIComponent('/page/home.jsp'); // "index.jsp?page=%2Fpage%2Fhome.jsp"
因此,在對(duì)URL進(jìn)行編碼時(shí)我們經(jīng)常會(huì)選擇 encodeURIComponent。 table.innerHTML在IE下是只讀屬性
我們經(jīng)常通過節(jié)點(diǎn)的innerHTML屬性來填充節(jié)點(diǎn),比如:
復(fù)制代碼 代碼如下:
<div id="container1"> </div>
復(fù)制代碼 代碼如下:
document.getElementById('container1').innerHTML = "Hello World!";
但是在IE下設(shè)置table.innerHTML將會(huì)導(dǎo)致錯(cuò)誤: 復(fù)制代碼 代碼如下:
<table id="table1"> </table>
復(fù)制代碼 代碼如下:
// works well in Firefox, but fail to work in IE document.getElementById('table1').innerHTML = "<tr><td>Hello</td><td>World!</td></tr>";
實(shí)際上,table, thead, tr, select等元素的innerHTML屬性在IE下都是只讀的。 那么如果動(dòng)態(tài)的創(chuàng)建一個(gè)table呢,下面提供了一種可行的方法:
復(fù)制代碼 代碼如下:
<div id="table1"> </div>
復(fù)制代碼 代碼如下:
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ò)誤,比如:
復(fù)制代碼 代碼如下:
0.1 + 0.2; // 0.30000000000000004
你可以通過toFixed方法指定四舍五入的小數(shù)位數(shù): 復(fù)制代碼 代碼如下:
(0.1 + 0.2).toFixed(); // "0" (0.1 + 0.2).toFixed(1); // "0.3"
相關(guān)文章
JavaScript中的純函數(shù)與偏函數(shù)你了解嗎
JS中,純函數(shù)指在相同的輸入下始終產(chǎn)生相同的輸出并且沒有副作用的函數(shù),偏函數(shù)指一種創(chuàng)建新函數(shù)的方法,通過預(yù)設(shè)一個(gè)或多個(gè)參數(shù)從而實(shí)現(xiàn)對(duì)原始函數(shù)的封裝和定制,本文主要來講講純函數(shù)與偏函數(shù)的一些使用,需要的可以參考一下2023-05-05基于JavaScript實(shí)現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01Javascript Ajax異步讀取RSS文檔具體實(shí)現(xiàn)
這篇文章主要介紹了Javascript Ajax異步讀取RSS文檔具體實(shí)現(xiàn),有需要的朋友可以參考一下2013-12-12微信小程序?qū)崿F(xiàn)tabbar凹凸圓選中動(dòng)畫效果實(shí)例
小程序日益增多的情況下,UI風(fēng)格顯得越來越重要,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)tabbar凹凸圓選中動(dòng)畫效果的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09JS實(shí)現(xiàn)的頁面自定義滾動(dòng)條效果
這篇文章主要介紹了JS實(shí)現(xiàn)的頁面自定義滾動(dòng)條效果,涉及JavaScript結(jié)合css設(shè)置頁面滾動(dòng)條樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10JavaScript檢測瀏覽器cookie是否已經(jīng)啟動(dòng)的方法
這篇文章主要介紹了JavaScript檢測瀏覽器cookie是否已經(jīng)啟動(dòng)的方法,實(shí)例分析了javascript操作cookie的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02JavaScript學(xué)習(xí)教程之cookie與webstorage
這篇文章主要給大家介紹了關(guān)于JavaScript學(xué)習(xí)教程之cookie與webstorage的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06