10個(gè)你不知道的js技巧

1.變量轉(zhuǎn)換

看起來(lái)很簡(jiǎn)單赂鲤,但據(jù)我所看到的噪径,使用構(gòu)造函數(shù)柱恤,像Array()或者Number()來(lái)進(jìn)行變量轉(zhuǎn)換是常用的做法。始終使用原始數(shù)據(jù)類型(有時(shí)也稱為字面量)來(lái)轉(zhuǎn)換變量找爱,這種沒(méi)有任何額外的影響的做法反而效率更高梗顺。

1

2

3

4

5

6

7

var myVar? = "3.14159",

str? ? = ""+ myVar,//? to string

int? ? = ~~myVar,? //? to integer

float? = 1*myVar,? //? to float

bool? ? = !!myVar,? /*? to boolean - any string with length

and any number except 0 are true */

array? = [myVar];? //? to array

轉(zhuǎn)換日期(new Date(myVar))和正則表達(dá)式(new RegExp(myVar))必須使用構(gòu)造函數(shù),而且創(chuàng)建正則表達(dá)式的時(shí)候要使用/pattern/flags的形式车摄。

2.十進(jìn)制轉(zhuǎn)換為十六進(jìn)制或者八進(jìn)制寺谤,或者反過(guò)來(lái)

你是不是寫(xiě)個(gè)單獨(dú)的函數(shù)來(lái)轉(zhuǎn)換十六進(jìn)制(或者八進(jìn)制)呢?馬上停下吧练般!有更容易的現(xiàn)成的函數(shù)可以用:

1

2

3

4

(int).toString(16); // converts int to hex, eg 12 => "C"

(int).toString(8);? // converts int to octal, eg. 12 => "14"

parseInt(string,16) // converts hex to int, eg. "FF" => 255

parseInt(string,8) // converts octal to int, eg. "20" => 16

3.玩轉(zhuǎn)數(shù)字

除了上一節(jié)介紹的之外矗漾,這里有更多的處理數(shù)字的技巧

1

2

3

4

5

0xFF; // Hex declaration, returns 255

020; // Octal declaration, returns 16

1e3; // Exponential, same as 1 * Math.pow(10,3), returns 1000

(1000).toExponential(); // Opposite with previous, returns 1e3

(3.1415).toFixed(3); // Rounding the number, returns "3.142"

4.Javascript版本檢測(cè)

你知道你的瀏覽器支持哪一個(gè)版本的Javascript嗎?如果不知道的話薄料,去維基百科查一下Javascript版本表吧敞贡。出于某種原因,Javascript 1.7版本的某些特性是沒(méi)有得到廣泛的支持摄职。不過(guò)大部分瀏覽器都支持了1.8版和1.8.1版的特性誊役。(注:所有的IE瀏覽器(IE8或者更老的版本)只支持1.5版的Javascript)這里有一個(gè)腳本,既能通過(guò)檢測(cè)特征來(lái)檢測(cè)JavaScript版本谷市,它還能檢查特定的Javascript版本所支持的特性蛔垢。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

var JS_ver? = [];

(Number.prototype.toFixed)?JS_ver.push("1.5"):false;

([].indexOf && [].forEach)?JS_ver.push("1.6"):false;

((function(){try {[a,b] = [0,1];return true;}catch(ex) {return false;}})())?JS_ver.push("1.7"):false;

([].reduce && [].reduceRight && JSON)?JS_ver.push("1.8"):false;

("".trimLeft)?JS_ver.push("1.8.1"):false;

JS_ver.supports = function()

{

if (arguments[0])

return (!!~this.join().indexOf(arguments[0] +",") +",");

else

return (this[this.length-1]);

}

alert("Latest Javascript version supported: "+ JS_ver.supports());

alert("Support for version 1.7 : "+ JS_ver.supports("1.7"));

5.使用window.name進(jìn)行簡(jiǎn)單會(huì)話處理

這個(gè)是我真的喜歡的東西。您可以為指定一個(gè)字符串作為window.name屬性的值迫悠,直到您關(guān)閉該標(biāo)簽或窗口鹏漆。雖然我沒(méi)有提供任何腳本,但我強(qiáng)烈建議您如充分利用這個(gè)方法创泄。舉例來(lái)說(shuō)艺玲,在建設(shè)一個(gè)網(wǎng)站或應(yīng)用程序的時(shí)候,在調(diào)試和測(cè)試模式之間切換是非常有用的鞠抑。

6.判斷屬性是否存在

這個(gè)問(wèn)題包含兩個(gè)方面饭聚,既有檢查屬性時(shí)候存在,還要獲取屬性的類型搁拙。但我們總是忽略了這些小事情:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

// BAD: This will cause an error in code when foo is undefined

if (foo) {

doSomething();

}

// GOOD: This doesn't cause any errors. However, even when

// foo is set to NULL or false, the condition validates as true

if (typeof foo != "undefined") {

doSomething();

}

// BETTER: This doesn't cause any errors and in addition

// values NULL or false won't validate as true

if (window.foo) {

doSomething();

}

但是秒梳,有的情況下,我們有更深的結(jié)構(gòu)和需要更合適的檢查的時(shí)候箕速,可以這樣:

1

2

3

4

5

// UGLY: we have to proof existence of every

// object before we can be sure property actually exists

if (window.oFoo && oFoo.oBar && oFoo.oBar.baz) {

doSomething();

}

7.給函數(shù)傳遞參數(shù)

當(dāng)函數(shù)既有必選又有可選參數(shù)的時(shí)候酪碘,我們可能是這樣做的:

1

2

3

4

function doSomething(arg0, arg1, arg2, arg3, arg4) {

...

}

doSomething('', 'foo', 5, [], false);

而傳遞一個(gè)對(duì)象總是比傳遞一堆的參數(shù)更方便:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

function doSomething() {

// Leaves the function if nothing is passed

if (!arguments[0]) {

return false;

}

var oArgs? = arguments[0]

arg0? ? = oArgs.arg0 || "",

arg1? ? = oArgs.arg1 || "",

arg2? ? = oArgs.arg2 || 0,

arg3? ? = oArgs.arg3 || [],

arg4? ? = oArgs.arg4 || false;

}

doSomething({

arg1? ? : "foo",

arg2? ? : 5,

arg4? ? : false

});

這只是一個(gè)把對(duì)象作為參數(shù)傳遞的一個(gè)很簡(jiǎn)單的例子,例如盐茎,我們還可以聲明一個(gè)對(duì)象婆跑,變量名作為Key,默認(rèn)值作為Value庭呜。

8.使用document.createDocumentFragment()

您可能需要?jiǎng)討B(tài)地追加多個(gè)元素到文檔中滑进。然而,直接將它們插入到文檔中會(huì)導(dǎo)致這個(gè)文檔每次都需要重新布局一個(gè)募谎,相反的扶关,你應(yīng)該使用文檔碎片,建成后只追加一次:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function createList() {

var aLI = ["first item", "second item", "third item",

"fourth item", "fith item"];

// Creates the fragment

var oFrag? = document.createDocumentFragment();

while (aLI.length) {

var oLI = document.createElement("li");

// Removes the first item from array and appends it

// as a text node to LI element

oLI.appendChild(document.createTextNode(aLI.shift()));

oFrag.appendChild(oLI);

}

document.getElementById('myUL').appendChild(oFrag);

}

9.為replace()方法傳遞一個(gè)函數(shù)

有的時(shí)候你想替換字符串的某個(gè)部分為其它的值数冬,最好的方法就是給String.replace()傳遞一個(gè)獨(dú)立的函數(shù)节槐。下面是一個(gè)簡(jiǎn)單例子:

1

2

3

4

5

6

7

8

9

10

11

var sFlop? = "Flop: [Ah] [Ks] [7c]";

var aValues = {"A":"Ace","K":"King",7:"Seven"};

var aSuits? = {"h":"Hearts","s":"Spades",

"d":"Diamonds","c":"Clubs"};

sFlop? = sFlop.replace(/\[\w+\]/gi, function(match) {

match? = match.replace(match[2], aSuits[match[2]]);

match? = match.replace(match[1], aValues[match[1]] +" of ");

return match;

});

// string sFlop now contains:

// "Flop: [Ace of Hearts] [King of Spades] [Seven of Clubs]"

10.循環(huán)中標(biāo)簽的使用

有的時(shí)候,循環(huán)中又嵌套了循環(huán)拐纱,你可能想在循環(huán)中退出铜异,則可以用標(biāo)簽:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

outerloop:

for (var iI=0;iI<5;iI++) {

if (somethingIsTrue()) {

// Breaks the outer loop iteration

break outerloop;

}

innerloop:

for (var iA=0;iA<5;iA++) {

if (somethingElseIsTrue()) {

// Breaks the inner loop iteration

break innerloop;

}

}

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市秸架,隨后出現(xiàn)的幾起案子揍庄,更是在濱河造成了極大的恐慌,老刑警劉巖东抹,帶你破解...
    沈念sama閱讀 221,635評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蚂子,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡缭黔,警方通過(guò)查閱死者的電腦和手機(jī)食茎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)馏谨,“玉大人别渔,你說(shuō)我怎么就攤上這事【寤ィ” “怎么了哎媚?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,083評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)壹哺。 經(jīng)常有香客問(wèn)我抄伍,道長(zhǎng),這世上最難降的妖魔是什么管宵? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,640評(píng)論 1 296
  • 正文 為了忘掉前任截珍,我火速辦了婚禮,結(jié)果婚禮上箩朴,老公的妹妹穿的比我還像新娘岗喉。我一直安慰自己,他們只是感情好炸庞,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布钱床。 她就那樣靜靜地躺著,像睡著了一般埠居。 火紅的嫁衣襯著肌膚如雪查牌。 梳的紋絲不亂的頭發(fā)上事期,一...
    開(kāi)封第一講書(shū)人閱讀 52,262評(píng)論 1 308
  • 那天,我揣著相機(jī)與錄音纸颜,去河邊找鬼兽泣。 笑死,一個(gè)胖子當(dāng)著我的面吹牛胁孙,可吹牛的內(nèi)容都是我干的唠倦。 我是一名探鬼主播,決...
    沈念sama閱讀 40,833評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼涮较,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼稠鼻!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起狂票,我...
    開(kāi)封第一講書(shū)人閱讀 39,736評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤候齿,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后苫亦,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體毛肋,經(jīng)...
    沈念sama閱讀 46,280評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評(píng)論 3 340
  • 正文 我和宋清朗相戀三年屋剑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了润匙。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,503評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡唉匾,死狀恐怖孕讳,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情巍膘,我是刑警寧澤厂财,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站峡懈,受9級(jí)特大地震影響璃饱,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜肪康,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評(píng)論 3 333
  • 文/蒙蒙 一荚恶、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧磷支,春花似錦谒撼、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,340評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春辩蛋,著一層夾襖步出監(jiān)牢的瞬間呻畸,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,460評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工堪澎, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留擂错,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,909評(píng)論 3 376
  • 正文 我出身青樓樱蛤,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親剑鞍。 傳聞我的和親對(duì)象是個(gè)殘疾皇子昨凡,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)蚁署,斷路器便脊,智...
    卡卡羅2017閱讀 134,701評(píng)論 18 139
  • You Don't Know JS: this & Object Prototypes Chapter 5: Pr...
    大橙子CZ閱讀 579評(píng)論 0 2
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語(yǔ)法,類相關(guān)的語(yǔ)法光戈,內(nèi)部類的語(yǔ)法哪痰,繼承相關(guān)的語(yǔ)法,異常的語(yǔ)法久妆,線程的語(yǔ)...
    子非魚(yú)_t_閱讀 31,663評(píng)論 18 399
  • 這篇文章里面的問(wèn)題是來(lái)自github上面一個(gè)repo的晌杰,我在復(fù)習(xí)前端的適合找到了question list; 當(dāng)然...
    土汪閱讀 2,387評(píng)論 2 7
  • 回到屋里筷弦,我沒(méi)有開(kāi)燈肋演。我不知道是酒醉了我,還是我自己將自己尋醉烂琴。 我想起一些事爹殊,想起一些人。 彈盡糧絕的時(shí)候奸绷,也許...
    半島都市綜合版閱讀 196評(píng)論 0 0