• JS特效 http://www.shiekolong848.icu/js/
  • 匯總篇關于日常適用JS特殊代碼技巧集合

    發布日期:2019-01-30 08:35:00


      今天又到了分享時刻,我相信各位忠實的網友朋友們已經大概了解我們網站的日常運作了,我們網站會時不時地將一些集合和匯總總體的分析以后然后分享給各位小伙伴們,這是非常的珍貴的資訊哦,今天的內容是關于JS特效代碼日常技巧的集合。

      1. 避免鏈式聲明

      后果:可能引入全局變量

      //錯誤的寫法 var a = b = 0;

      這段代碼中,b實際上被聲明為全局變量。因為操作符優先級是是從右往左,所以該語句相當于:

      var a = (b = 0)

      此時b未聲明就被直接賦值,所以b成了全局變量

      2. 單一var原則

      這條規則的意思是,把函數內部的所有變量,放到頂部聲明。比如:

      //示例 function A(){ var a = 1, b = 2, c = a + b ; }

      優點:

      便于查找函數內部使用的局部變量

      防止變量未定義時就被使用

      防止變量聲明提升后引發的誤解

      關于第三點,這里舉個例子說明:

      var x = 1; function A(){ console.log(x);//第一處輸出 ,注意結果 var x = 2; console.log(x);//第二處輸出 2,沒問題 }

      從代碼上看,第二處輸出肯定沒問題,可能會有人認為第一處輸出的是1,因為此時在函數內部還沒聲明變量x,根據作用域鏈,向外層查找的話,x值為1。但是實際輸出的值應該是undefined,因為js允許在函數任何地方聲明變量,并且無論在哪里聲明都等同于在頂部聲明,這就是聲明提升。所以上面的代碼相當于:

      var x = 1; function A(){ var x;//提升到頂部 console.log(x);//此時已聲明 未賦值 x = 2;//賦值 console.log(x); }

      3. 使用for循環時,緩存長度值

    技巧

      通常用使用for循環遍歷數組時,會采用以下寫法:

      for(var i = 0;i

      這段代碼存在的問題在于,在循環的每個迭代步驟,都必須訪問一次arr的長度。如果arr是靜態數值還好,但是我們在使用js時可能會碰到arr是dom元素對象,由于dom對象載頁面下是活動的查詢,這個長度查詢就相當耗時,

      //用len緩存長度值for(var i = 0,len = arr.length;i

      按照上面的代碼,我們在第一次獲取長度值時就緩存這個長度值,就可以避免上述問題。

      4. 使用for-in時,增加hasOwnProperty()判斷

      for-in通常用來枚舉對象的屬性和方法,但是這個方法會枚舉范圍包括對象和對象的原型對象(對原型對象不了解的可以看看我之前寫的文章傳送門)此時,利用hasOwnProperty()方法可以幫我們過濾出只在對象本身上的屬性和方法,或者只在原型鏈的屬性和方法

      for(var key in obj){ if(obj.hasOwnProperty(key)){ // 對象本身的屬性或者方法 } else{ // 原型鏈的屬性和方法 }}/* 下面是一個具體的例子 */ function A(name){ this.type = 'A類'; this.name = name || '未命名'}var a = new A('a');function B(name){ this.subtype = 'B類';}// 建立原型鏈B.prototype = a;B.prototype.sayHello = function(){}var b = new B();// 遍歷屬性for(var key in b){ //對象自身屬性 if(b.hasOwnProperty(key)){ console.log('對象自身的屬性或方法:'+key) } //上述表達式的另一種寫法 if(B.prototype.hasOwnProperty.call(b,key)){ console.log('對象自身的屬性或方法:'+key) } else { console.log('原型鏈的屬性或方法:'+key) }}

      5. 使用===代替==

      這個算是比較常見的了,因為js在做比較判斷時,會執行強制類型轉換,比如false == 0返回true這樣的情況,使用===可以執行嚴格的等價比較,更易于閱讀代碼(后來閱讀的人就不需要判斷這個是遺漏還是故意使用強制類型轉換簡寫)

      6. 使用parseInt()時,帶上第二個參數。

      parseInt()用于從字符串中獲取數值,第二個參數代表進制,默認是10。我們在使用的時候可能習慣性忽略這個參數,但是在一些情況下會有問題:當字符串的開頭為0時,在es3里會被當做是八進制,es5里面仍然當做10進制,為了代碼的一致性以及避免不必要的失誤,應該每次使用時都帶上參數:

      var x = parseInt('089',10);//使用時都帶上進制參數

      7. 大括號的使用

      大括號的使用主要是2個方面:

      第1,不要省略大括號,即使可以忽略,比如:

      for(var i =1;i<10 ;i++) console.log(i) //此處原則上可以忽略大括號

      上述語句并沒有問題,但是如果后期函數體內增加了其他語句的時候,很容易忘記補上大括號,因此建議都帶上大括號;

      第2,大括號的必須跟在前一個語句的同一行

      這個地方為什么加粗了呢?因為這個問題非常容易被忽略,通常我們都覺得大括號是跟在語句的同一行還是下一行只是習慣問題,但是實際上不是的!看下面這個例子:

      function func(){ return { name:'xxx' }}var res = func()console.log(res)//輸出undefined

      是不是覺得很奇怪,看代碼第一感覺應該是輸出一個包含name屬性的對象。請注意,由于js的分號插入機制:如果語句沒有使用分號結束,會自動補充分號,因此上面的代碼實際相當于如下寫法:

      function func(){ return undefined;//自動插入分號 { name:'xxx' }}

      正確的寫法應該是:

      function func(){ return { name:'xxx' }}var res = func()console.log(res)//輸出{name:'xxx'}

      不知道你看完本篇文章以后還有什么疑難之處,如果你還有任何的問題你可以來資訊我們的工作人員,他們會親力親為的幫你解決并且分享給各位同樣是這種問題的小伙伴們,所以請大家多多支持我們哦。

    • 專題推薦

    次元立方 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
    本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
    七乐彩官网 ffv| d7x| xlj| 7th| pt5| rhr| n5z| nvp| 5rl| zj6| hzr| rlx| z6l| zvx| 6tn| hp6| pxl| z4l| ltp| 5lz| zx5| rrb| x5x| pdz| 5fr| 5bx| dl5|