10個你不知道的js技巧

1.變量轉換

看起來很簡單,但據我所看到的,使用構造函數,像Array()或者Number()來進行變量轉換是常用的做法。始終使用原始數據類型(有時也稱為字面量)來轉換變量,這種沒有任何額外的影響的做法反而效率更高。

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

轉換日期(new Date(myVar))和正則表達式(new RegExp(myVar))必須使用構造函數,而且創建正則表達式的時候要使用/pattern/flags的形式。

2.十進制轉換為十六進制或者八進制,或者反過來

你是不是寫個單獨的函數來轉換十六進制(或者八進制)呢?馬上停下吧!有更容易的現成的函數可以用:

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.玩轉數字

除了上一節介紹的之外,這里有更多的處理數字的技巧

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版本檢測

你知道你的瀏覽器支持哪一個版本的Javascript嗎?如果不知道的話,去維基百科查一下Javascript版本表吧。出于某種原因,Javascript 1.7版本的某些特性是沒有得到廣泛的支持。不過大部分瀏覽器都支持了1.8版和1.8.1版的特性。(注:所有的IE瀏覽器(IE8或者更老的版本)只支持1.5版的Javascript)這里有一個腳本,既能通過檢測特征來檢測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進行簡單會話處理

這個是我真的喜歡的東西。您可以為指定一個字符串作為window.name屬性的值,直到您關閉該標簽或窗口。雖然我沒有提供任何腳本,但我強烈建議您如充分利用這個方法。舉例來說,在建設一個網站或應用程序的時候,在調試和測試模式之間切換是非常有用的。

6.判斷屬性是否存在

這個問題包含兩個方面,既有檢查屬性時候存在,還要獲取屬性的類型。但我們總是忽略了這些小事情:

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();

}

但是,有的情況下,我們有更深的結構和需要更合適的檢查的時候,可以這樣:

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.給函數傳遞參數

當函數既有必選又有可選參數的時候,我們可能是這樣做的:

1

2

3

4

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

...

}

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

而傳遞一個對象總是比傳遞一堆的參數更方便:

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

});

這只是一個把對象作為參數傳遞的一個很簡單的例子,例如,我們還可以聲明一個對象,變量名作為Key,默認值作為Value。

8.使用document.createDocumentFragment()

您可能需要動態地追加多個元素到文檔中。然而,直接將它們插入到文檔中會導致這個文檔每次都需要重新布局一個,相反的,你應該使用文檔碎片,建成后只追加一次:

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()方法傳遞一個函數

有的時候你想替換字符串的某個部分為其它的值,最好的方法就是給String.replace()傳遞一個獨立的函數。下面是一個簡單例子:

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.循環中標簽的使用

有的時候,循環中又嵌套了循環,你可能想在循環中退出,則可以用標簽:

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;

}

}

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,250評論 6 530
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 97,923評論 3 413
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,041評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,475評論 1 308
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,253評論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,801評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,882評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,023評論 0 285
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,530評論 1 331
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,494評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,639評論 1 366
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,177評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 43,890評論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,289評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,552評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,242評論 3 389
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,626評論 2 370

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,775評論 18 139
  • You Don't Know JS: this & Object Prototypes Chapter 5: Pr...
    大橙子CZ閱讀 582評論 0 2
  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法,內部類的語法,繼承相關的語法,異常的語法,線程的語...
    子非魚_t_閱讀 31,704評論 18 399
  • 這篇文章里面的問題是來自github上面一個repo的,我在復習前端的適合找到了question list; 當然...
    土汪閱讀 2,391評論 2 7
  • 回到屋里,我沒有開燈。我不知道是酒醉了我,還是我自己將自己尋醉。 我想起一些事,想起一些人。 彈盡糧絕的時候,也許...
    半島都市綜合版閱讀 208評論 0 0