西安藍鷗丨45個有用的JavaScript技巧

2021-03-02 OKMOOC
1、首次為變量賦值時務必使用var關鍵字變量沒有聲明而直接賦值得話,默認會作為一個新的全局變量,要儘量避免使用全局變量。2、使用===取代====和!=操作符會在需要的情況下自動轉換數據類型。但===和!==不會,它們會同時比較值和數據類型,這也使得它們要比==和!=快。

[10] === 10    // is false[10]  == 10    // is true'10' == 10     // is true'10' === 10    // is false []   == 0     // is true [] ===  0     // is false '' == false   // is true but true == "a" is false '' === false  // is false

3、underfined、null、0、false、NaN、空字符串的邏輯結果均為false4、行尾使用分號

實踐中最好還是使用分號,忘了寫也沒事,大部分情況下JavaScript解釋器都會自動添加。對於為何要使用分號,可參考文章JavaScript中關於分號的真相。

5、使用對象構造器

function Person(firstName, lastName){    this.firstName =  firstName;    this.lastName = lastName;}var Saad = new Person("Saad", "Mousliki");

6、小心使用typeof、instanceof和contructor

typeof:JavaScript一元操作符,用於以字符串的形式返回變量的原始類型,注意,typeof null也會返回object,大多數的對象類型(數組Array、時間Date等)也會返回object contructor:內部原型屬性,可以通過代碼重寫 instanceof:JavaScript操作符,會在原型鏈中的構造器中搜索,找到則返回true,否則返回false

var arr = ["a", "b", "c"];typeof arr;   // 返回 "object" arr instanceof Array // truearr.constructor();  //[]

7、使用自調用函數

函數在創建之後直接自動執行,通常稱之為自調用匿名函數(Self-Invoked Anonymous Function)或直接調用函數表達式(Immediately Invoked Function Expression )。格式如下:

(function(){    // 置於此處的代碼將自動執行})();  (function(a,b){    var result = a+b;    return result;})(10,20)

8、從數組中隨機獲取成員

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];var  randomItem = items[Math.floor(Math.random() * items.length)];

9、獲取指定範圍內的隨機數

這個功能在生成測試用的假數據時特別有數,比如介與指定範圍內的工資數。

var x = Math.floor(Math.random() * (max - min + 1)) + min;

10、生成從0到指定值的數字數組

var numbersArray = [] , max = 100;for( var i=1; numbersArray.push(i++) < max;);  // numbers = [1,2,3 ... 100]

11、生成隨機的字母數字字符串

function generateRandomAlphaNum(len) {    var rdmString = "";    for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));    return  rdmString.substr(0, len);}

12、打亂數字數組的順序

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];numbers = numbers.sort(function(){ return Math.random() - 0.5});/* numbers 數組將類似於 [120, 5, 228, -215, 400, 458, -85411, 122205]  */

這裡使用了JavaScript內置的數組排序函數,更好的辦法是用專門的代碼來實現(如Fisher-Yates算法),可以參見StackOverFlow上的這個討論。

13、字符串去空格

Java、C#和php等語言都實現了專門的字符串去空格函數,但JavaScript中是沒有的,可以通過下面的代碼來為String對象函數一個trim函數:

String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, "");};

新的JavaScript引擎已經有了trim()的原生實現。

14、數組之間追加

var array1 = [12 , "foo" , {name "Joe"} , -2458];var array2 = ["Doe" , 555 , 100];Array.prototype.push.apply(array1, array2);/* array1 值為  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

15、對象轉換為數組

var argArray = Array.prototype.slice.call(arguments);

16、驗證是否是數字

function isNumber(n){    return !isNaN(parseFloat(n)) && isFinite(n);}

17、 驗證是否是數組

function isArray(obj){    return Object.prototype.toString.call(obj) === '[object Array]' ;}

但如果toString()方法被重寫過得話,就行不通了。也可以使用下面的方法:

Array.isArray(obj); // its a new Array method

如果在瀏覽器中沒有使用frame,還可以用instanceof,但如果上下文太複雜,也有可能出錯。

var myFrame = document.createElement('iframe');document.body.appendChild(myFrame);var myArray = window.frames[window.frames.length-1].Array;var arr = new myArray(a,b,10); // [a,b,10]  // myArray 的構造器已經丟失,instanceof 的結果將不正常// 構造器是不能跨 frame 共享的arr instanceof Array; // false

18、獲取數組中的最大值和最小值

var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; var maxInNumbers = Math.max.apply(Math, numbers); var minInNumbers = Math.min.apply(Math, numbers);

19、清空數組

var myArray = [12 , 222 , 1000 ];  myArray.length = 0; // myArray will be equal to [].

20、不要直接從數組中delete或remove元素

如果對數組元素直接使用delete,其實並沒有刪除,只是將元素置為了undefined。數組元素刪除應使用splice。切忌:

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // return 11 delete items[3]; // return true items.length; // return 11 /* items 結果為 [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */

而應:

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // return 11 items.splice(3,1) ; items.length; // return 10 /* items 結果為 [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119]

刪除對象的屬性時可以使用delete。

21、使用length屬性截斷數組

前面的例子中用length屬性清空數組,同樣還可用它來截斷數組:

var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];  myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

與此同時,如果把length屬性變大,數組的長度值變會增加,會使用undefined來作為新的元素填充。length是一個可寫的屬性。

myArray.length = 10; // the new array length is 10 myArray[myArray.length - 1] ; // undefined

22、在條件中使用邏輯與或

var foo = 10;  foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething(); foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();

邏輯或還可用來設置默認值,比如函數參數的默認值。

function doSomething(arg1){     arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set}

23、使得map()函數方法對數據循環

var squares = [1,2,3,4].map(function (val) {      return val * val;  }); // squares will be equal to [1, 4, 9, 16]

24、保留指定小數位數

var num =2.443242342;num = num.toFixed(4);  // num will be equal to 2.4432

注意,toFixec()返回的是字符串,不是數字。

25、浮點計算的問題

0.1 + 0.2 === 0.3 // is false 9007199254740992 + 1 // is equal to 90071992547409929007199254740992 + 2 // is equal to 9007199254740994

為什麼呢?因為0.1+0.2等於0.30000000000000004。JavaScript的數字都遵循IEEE 754標準構建,在內部都是64位浮點小數表示,具體可以參見JavaScript中的數字是如何編碼的.

可以通過使用toFixed()和toPrecision()來解決這個問題。

26、 通過for-in循環檢查對象的屬性

下面這樣的用法,可以防止迭代的時候進入到對象的原型屬性中。

for (var name in object) {      if (object.hasOwnProperty(name)) {         // do something with name    }  }

27、 逗號操作符

var a = 0; var b = ( a++, 99 ); console.log(a);  // a will be equal to 1 console.log(b);  // b is equal to 99

28、臨時存儲用於計算和查詢的變量

在jQuery選擇器中,可以臨時存儲整個DOM元素。

var navright = document.querySelector('#right'); var navleft = document.querySelector('#left'); var navup = document.querySelector('#up'); var navdown = document.querySelector('#down');

29、提前檢查傳入isFinite()的參數

isFinite(0/0) ; // falseisFinite("foo"); // falseisFinite("10"); // trueisFinite(10);   // trueisFinite(undefined);  // falseisFinite();   // falseisFinite(null);  // true,這點當特別注意

30、避免在數組中使用負數做索引

var numbersArray = [1,2,3,4,5];var from = numbersArray.indexOf("foo") ; // from is equal to -1numbersArray.splice(from,2); // will return [5]

注意傳給splice的索引參數不要是負數,當是負數時,會從數組結尾處刪除元素。

31、用jsON來序列化與反序列化

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };var stringFromPerson = jsON.stringify(person);/* stringFromPerson 結果為 "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"   */var personFromString = JSON.parse(stringFromPerson);/* personFromString 的值與 person 對象相同  */

32、不要使用eval()或者函數構造器

eval()和函數構造器(Function consturctor)的開銷較大,每次調用,JavaScript引擎都要將原始碼轉換為可執行的代碼。

var func1 = new Function(functionCode);var func2 = eval(functionCode);

33、避免使用with()

使用with()可以把變量加入到全局作用域中,因此,如果有其它的同名變量,一來容易混淆,二來值也會被覆蓋。

34、 不要對數組使用for-in

避免:

var sum = 0;  for (var i in arrayNumbers) {      sum += arrayNumbers[i];  }

而是:

var sum = 0;  for (var i = 0, len = arrayNumbers.length; i < len; i++) {      sum += arrayNumbers[i];  }

另外一個好處是,i和len兩個變量是在for循環的第一個聲明中,二者只會初始化一次,這要比下面這種寫法快:

for (var i = 0; i < arrayNumbers.length; i++)

35、 傳給setInterval()和setTimeout()時使用函數而不是字符串

如果傳給setTimeout()和setInterval()一個字符串,他們將會用類似於eval方式進行轉換,這肯定會要慢些,因此不要使用:

setInterval('doSomethingPeriodically()', 1000);  setTimeout('doSomethingAfterFiveSeconds()', 5000);

而是用:

setInterval(doSomethingPeriodically, 1000);  setTimeout(doSomethingAfterFiveSeconds, 5000);

36、使用switch/case代替一大疊的if/else

當判斷有超過兩個分支的時候使用switch/case要更快一些,而且也更優雅,更利於代碼的組織,當然,如果有超過10個分支,就不要使用switch/case了。

37、在switch/case中使用數字區間

其實,switch/case中的case條件,還可以這樣寫:

function getCategory(age) {      var category = "";      switch (true) {          case isNaN(age):              category = "not an age";              break;          case (age >= 50):              category = "Old";              break;          case (age <= 20):              category = "Baby";              break;          default:              category = "Young";              break;      };      return category;  }  getCategory(5);  // 將返回 "Baby"

38、使用對象作為對象的原型

下面這樣,便可以給定對象作為參數,來創建以此為原型的新對象:

function clone(object) {      function OneShotConstructor(){};     OneShotConstructor.prototype = object;      return new OneShotConstructor(); } clone(Array).prototype ;  // []

39、html欄位轉換函數

function escapehtml(text) {      var replacements= {"<": "<", ">": ">","&": "&", "\"": """};                          return text.replace(/[<>&"]/g, function(character) {          return replacements[character];      }); }

40、不要在循環內部使用try-catch-finally

try-catch-finally中catch部分在執行時會將異常賦給一個變量,這個變量會被構建成一個運行時作用域內的新的變量。切忌:

var object = ['foo', 'bar'], i;  for (i = 0, len = object.length; i <len; i++) {      try {          // do something that throws an exception     }      catch (e) {           // handle exception      } }

而應該:

var object = ['foo', 'bar'], i;  try {     for (i = 0, len = object.length; i <len; i++) {          // do something that throws an exception     } } catch (e) {       // handle exception  }

41、 使用XMLHttpRequests時注意設置超時

XMLHttpRequests在執行時,當長時間沒有響應(如出現網絡問題等)時,應該中止掉連接,可以通過setTimeout()來完成這個工作:

var xhr = new XMLHttpRequest (); xhr.onreadystatechange = function () {      if (this.readyState == 4) {          clearTimeout(timeout);          // do something with response data     }  }  var timeout = setTimeout( function () {      xhr.abort(); // call error callback  }, 60*1000 /* timeout after a minute */ ); xhr.open('GET', url, true);  xhr.send();

同時需要注意的是,不要同時發起多個XMLHttpRequests請求。

42、處理WebSocket的超時

通常情況下,WebSocket連接創建後,如果30秒內沒有任何活動,伺服器端會對連接進行超時處理,防火牆也可以對單位周期沒有活動的連接進行超時處理。

為了防止這種情況的發生,可以每隔一定時間,往伺服器發送一條空的消息。可以通過下面這兩個函數來實現這個需求,一個用於使連接保持活動狀態,另一個專門用於結束這個狀態。

var timerID = 0; function keepAlive() {     var timeout = 15000;      if (webSocket.readyState == webSocket.OPEN) {          webSocket.send('');      }      timerId = setTimeout(keepAlive, timeout);  }  function cancelKeepAlive() {      if (timerId) {          cancelTimeout(timerId);      }  }

keepAlive()函數可以放在WebSocket連接的onOpen()方法的最後面,cancelKeepAlive()放在onClose()方法的最末尾。

43、 時間注意原始操作符比函數調用快,使用VanillaJS

比如,一般不要這樣:

var min = Math.min(a,b); A.push(v);

可以這樣來代替:

var min = a < b ? a : b; A[A.length] = v;

44、開發時注意代碼結構,上線前檢查並壓縮JavaScript代碼

別忘了在寫代碼時使用一個代碼美化工具。使用JSLint(一個語法檢查工具)並且在上線前壓縮代碼(比如使用JSMin)。註:現在代碼壓縮一般推薦 UglifyJS (github.com/mishoo/Ugli…)

45、JavaScript博大精深,這裡有些不錯的學習資源

Code Academy資源:www.codecademy.com/tracks/java…

Marjin Haverbekex編寫的Eloquent JavaScript:eloquentjavascript.net/

John Resig編寫的Advanced JavaScript:ejohn.org/apps/learn/

相關焦點

  • 20個常用的JavaScript簡寫技巧
    任何程式語言的簡寫技巧都能夠幫助你編寫更簡練的代碼,讓你用更少的代碼實現你的目標。讓我們一個個來看看 JavaScript 的簡寫技巧吧。 1. 聲明變量 2.
  • 融資2.2億元後,藍鷗的「IT狂人」試驗田
    而藍鷗科技正在用自己的方式,培養著一批又一批可以很酷的IT從業者,而對於人們所解讀的「四個月掌握全部課程,門檻低;入職後月薪過萬,高收入」的IT職業教育培訓。  藍鷗也有著自己的理解。  不可忽視的缺口  談及創業初衷,藍鷗創始人兼CEO劉輝介紹,職業教育領域一直存在較大的人才問題。
  • 西安公交700路被授予「陝西省青年文明號」45路榮獲「西安市青年...
    三秦都市報—三秦網訊 (記者 趙麗莉)4月29日,西安公交集團第二分公司在曲江雁翔場站舉行「青年文明號」授牌表彰大會暨「青年文明號立新功」主題行動啟動儀式,公司所屬線路700路被授予「陝西省青年文明號」、45路被授予「西安市青年文明號」。
  • 用Java語言巧妙實現javascript的運行
    Java前言在學習開發的過程中javascript是每位程式設計師小盆友都得掌握的一種方法,他們可以說是貫穿了整個Java開發的語言,下面給大家演示一下在Java中如何完美運行javascript案例,跟著小編一起來學習一下吧
  • 前端:用javascript實現一個轉盤小遊戲?
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫本文主要介紹如何使用原生javascript和Css3來實現一個在各大移動應用中經常出現的轉盤遊戲,由於改實現可以有不同方式,如果熟悉canvas的話也可以用canvas實現,本文採用js和css實現主要考慮到複雜度較小性能較好
  • 9個好用的JavaScript小技巧
    下面給出了一些非常強大的 JavaScript 小技巧。1.將數字轉換為字符串只需要用 + 運算符帶和一個空字符串即可。將字符串轉換為數字只需要用 + 運算符即可。但是要注意:它僅適用於「字符串數字」。
  • 足球教學丨五個讓隊友「wow」的足球技巧
    大家好,今天我們給大家展示五個可以讓你的隊友刮目相看的的足球技巧,希望大家喜歡!我們現在開始:相關閱讀:足球教學丨如何踢出完美下墜弧線任意球足球教學丨如何用腳內側兜出弧線足球教學丨弧線球技巧精析精講首先你要學會如何踢弧線球,簡而言之,助跑是非常重要的,你要和球呈90度角,用腳內側兜弧線。
  • 2020西安馬拉松丨用熱愛這座城市的方式,盡情奔跑!
    西安馬拉松賽始於2017年,按中國田協A1類賽事標準執行,線路穿越千年古都著名地標,至今已成功舉辦三屆,包括全程馬拉松、半程馬拉松和全民歡樂跑3個項目。
  • 9 個極其強大的 JavaScript 技巧
    有著 hacker 精神的程式設計師相信事物總有改進的餘地,沒有什麼是完美的存在。每一段代碼都有進一步優化的空間,每一個操作都有更便捷的技巧。 下面列舉一些非常強大的 JavaScript hack 技巧。 1.
  • Javascript去除字符串中的點或其他符號
    在前端上使用javascript進行操作的。測試了兩次沒有好用,程序直接把整個字符串都進行了替換,在考慮這個是為什麼呢?javascript(請忽略此配圖)示例var ip = data.field.ip.replace(/.
  • 貼士丨美滴很 西安首個「閘機式」公共自行車服務站點月底投用
    工作人員演示閘機服務站使用流程本月底,在西安曲江國際會展中心附近,租騎公共自行車將更方便。記者昨日從西安城市公共自行車公司獲悉,我市首個「閘機式」公共自行車服務站點將於8月底投用。首個「閘機式」站點落戶曲江以前,很多市民想借輛公共自行車代步,卻發現服務點「空無一車」,還車時卻發現「無一空樁」,只好再去下一個服務點,這樣的窘境,在「閘機式」公共自行車服務站點投用後,將得到解決。我市首個「閘機式」公共自行車服務站點,位於西安曲江國際會展中心C口處。
  • 初識javascript,JS的歷史_騰訊新聞
    3.從技術的角度來看其實就是指: HTML5個 + CSS3個 +JavaScript個技術所開發的移動客戶端應用程式。javascript的由來 JavaScript誕生於1995年。
  • 9個極其強大的JavaScript技巧
    有著 hacker 精神的程式設計師相信事物總有改進的餘地,沒有什麼是完美的存在。每一段代碼都有進一步優化的空間,每一個操作都有更便捷的技巧。下面列舉一些非常強大的 JavaScript hack 技巧。
  • 九個難以置信的HTML5和JavaScript實驗
    拖動藍點,讓所有線都不相交,看看你多久能解開?  一款javascript遊戲,點擊和控制藍色的盒子,讓黃色的點擊不要碰到紅色的點。       5.Sketch 3D
  • JavaScript小知識:String類型
    轉義序列轉系序列也稱字符串字面量,用於表示非列印字符,後者具有其他用途的的字符:字符串特點字符串是不給變更的,如果變量中保存字符串發生了改變,那麼就會銷毀原來的字符串,然後用新的字符串填充變量let lang="java";lang=lange+"scriot";console.log(lang);//javascript我們首先創建變量lang用來保存字符串java,然後我們將lang保存的字符串改為由原先保存字符串java和新的字符串
  • 你好西安丨新聞早餐速遞 2020年10月5日
    頭條新聞習近平同孟加拉國總統哈米德就中孟建交45周年互致賀電4日,國家主席習近平同孟加拉國總統哈米德互致賀電,熱烈慶祝兩國建交45周年。從目前車票預售情況來看,5日,西安至各個方向車票依然較為充裕。(記者 梁璠)◆ 市文旅局提醒:假期注意安全出行 文明旅遊讓風景更美麗3日,西安市文化和旅遊局組成六個督導組,對全市旅遊景區開展安全隱患排查和消防安全工作督導檢查。市文旅局提醒廣大市民遊客,外出遊玩要注意旅遊安全,參與遊玩項目時,根據自身實際情況,謹慎選擇高風險旅遊項目。
  • 攝影技巧:自拍技巧,網友自拍姿勢示範
    丨攝影技巧丨丨攝影入門丨丨攝影教程丨丨攝影圖片丨攝影技巧:沒有一張好看的自拍照,怎麼好意思發朋友圈?如今,不管是男生還是女生都沉溺於自拍,那麼怎麼自拍才好看,自拍技巧有哪些?bobo今天就給大家分享一些網友自拍姿勢示範。
  • Javascript.info - 更新頻率極高的Javascript免費開源電子教程
    Javascript.info 首頁截圖Javascript.info 依託 learn.javascript.ru 而來的,learn.javascript.ru 是俄羅斯最大的 JavaScript 教程和學習平臺之一。
  • Hi公益丨愛心早餐溫暖環衛工人,華遠地產用行動愛西安
    在這個城市裡,有這麼一群人,他們沒有聚燈光環繞,默默無聞,他們起早貪黑,堅守在城市的每個角落,他們是這座城市的建設者、奮鬥者,他們平凡卻又各有偉大之處,他們的生活和夢想與這座城市血脈相連,他們是這個時代最可愛的人。
  • 你好西安丨新聞早餐速遞 6月27日 [語音版]
    (記者 張松)詳情:西安降雨全面襲來!第29屆全國圖書交易博覽會將於7月27日至30日在西安舉行。記者昨日獲悉,目前各項工作正在有序推進,按照大會有關安排,本屆書博會主會場設在西安曲江國際會展中心,共設七個展館;同時在延安市、銅川市設立分會場。(記者 雷縣鴻)