首頁 web前端 js教程 10個你可能不知道的JavaScript小技巧

10個你可能不知道的JavaScript小技巧

Nov 26, 2016 am 09:30 AM
javascript

1.變數轉換
看起來很簡單,但據我所看到的,使用建構函數,像Array()或Number()來進行變數轉換是常用的做法。始終使用原始資料類型(有時也稱為字面量)來轉換變量,這種沒有任何額外的影響的做法反而效率更高。
var myVar   = "3.14159",
str     = ""+ myVar,//  to string
int     = ~~myVar,  //  to int  = !!myVar,  / *  to boolean - any string with length
and any number except 0 are true */
array   = [myVar];  //  to array
轉換日期(new Date(myVar))和正規表示 //  to array
轉換日期(new Date(myVar))與正規表示必須使用構造函數,而且在創建正規表示式的時候要使用/pattern/flags的形式。
 
2.十進制轉換為十六進製或八進制,或者反過來
你是不是寫個單獨的函數來轉換十六進制(或者八進制)呢?馬上停下吧!有更容易的現成的函數可以用:
(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.玩轉數字
除了上一節介紹的之外,這裡有更多的處理數字的技巧
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); //ing the number, returns "3.142"
4.Javascript版本偵測
你知道你的瀏覽器支援哪一個版本的Javascript嗎?如果你不知道的話,就去維基百科查一下Javascript版本表吧。出於某種原因,Javascript 1.7版本的某些特性是沒有廣泛的支援。不過大部分瀏覽器都支援了1.8版和1.8.1版的特性。 (註:所有的IE瀏覽器(IE8或更舊的版本)只支援1.5版的Javascript)這裡有一個腳本,既能透過偵測特徵來偵測JavaScript版本,它還能檢查特定的Javascript版本所支援的特性。
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] +",") +"『 (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.判斷屬性是否存在
這個問題包含兩個方面,既有檢查屬性時候存在,還要取得屬性的類型。但我們總是忽略了這些小事:
// BAD: This will cause an error in code when foo is undefined
if (foo) {
  doSomething();
}
// GOOD: This donOOD' errors. However, even when
// foo is set to NULL or false, the condition validates as true
if (typeof foo != "undefined") {
  doSomething();
}/
  做cause any errors and in addition
// values NULL or false won't validate as true
if (window.foo) {
  doSomething();
}
,有的情況下需要更有更深的結構和更深層的結構但是適當的檢查的時候,可以這樣:
// UGLY: we have to proof existence of every
// object before we can be sure property actually exists
if (window.oFoo && oFoo.oBar. oFoo. {
  doSomething();
}
7.給函數傳遞參數
當函數既有必選又有可選參數的時候,我們可能是這樣做的:
function doSomething(arg0, arg1, arg2, arg3, arg4 ) {
  ...
}
doSomething('', 'foo', 5, [], false);
而傳遞一個物件總是比傳遞一堆的參數更方便:
function doSomething() {
// Leaves the function if nothing is passed
  if (!arguments[0]) {
  return false;
  }
  var oArgs 
  arg1    = oArgs.arg1 || "",
  arg2    = oArgs.arg2 || 0,
  arg3    = oArgs.arg3 || [],
  arg〜]    : "foo",
arg2    : 5,
  arg4    : false
});
這只是一個把物件當作參數傳遞的一個很簡單的例子,例如,我們也可以宣告一個對象,變數名作為Key,預設值當作Value。
8.使用document.createDocumentFragment()
您可能需要動態地追加多個元素到文件中。然而,直接將它們插入文件中會導致這個文檔每次都需要重新佈局一個,相反的,你應該使用文檔碎片,建成後只追加一次:
function createList() {
  var aLI = ["first item ", "second item", "third item",
  "fourth item", "fith item"];
  // Creates the fragment
  var oFal  = doccuumragmentle.
    var oLI = document.createElement("li");
    // Removes the first item from array and appends it
    // as a text node to LILIHyterp. shift()));
    oFrag.appendChild(oLI);
  }
  oFrag.getElementById('myUL').appendChild(oFF);document.getElementById('myUL').appendChild(oF);
}
9.一個想替換你的部分為其它的值,最好的方法就是傳遞一個獨立的函數給String.replace()。以下是一個簡單範例:
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[1], a1] +" of ");
  return match;
});
// string sFlop now contains:
// "Flop: [Ace of Hearts] [King of Spades] [Seven of Clubs]"
10.循環中標籤的使用www.2cto.com
有的時候,循環中又嵌套了循環,你可能想在循環中退出,則可以用標籤:
outerloop:
for (var iI=0;iI  if (somethingIsTrue()) {
  // Breaks the outer loop iteration
  break outerloop;
  }〜〦〦〦〜)5;   if (somethingElseIsTrue()) {
// Breaks the inner loop iteration
    break innerloop;
  }
  }
}

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

javascript如何使用insertBefore javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

如何在JavaScript中取得HTTP狀態碼的簡單方法 如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介:在進行前端開發中,我們常常需要處理與後端介面的交互,而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法,並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時,服務

See all articles