日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > javascript >内容正文

javascript

开发者最容易犯的13个JavaScript错误

發布時間:2023/12/2 javascript 25 豆豆
生活随笔 收集整理的這篇文章主要介紹了 开发者最容易犯的13个JavaScript错误 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

開發者最容易犯的JavaScript錯誤,總結出13個。這些當中可能少不了你犯的錯誤。我們描述了這些陋習,并列出來解決辦法,希望對開發者有幫助。

1.for...數組迭代的用法 Usage of for..in to iterate Arrays

舉例:

  • var?myArray?=?[?“a”,?“b”,?“c”?];???
  • var?totalElements?=?myArray.length;???
  • for?(var?i?=?0;?i?<?totalElements;?i++)?{???
  • console.log(myArray[i]);???
  • }???
  • 這里主要的問題是語句中的“for..."不能保證順序,這意味著你將獲得不同的執行結果。此外,如果有人增加一些其他自定義功能的函數Array.prototype,你的循環將重復遍歷這些函數,就像原數組項。

    解決辦法:一直使用規則的for循環來遍歷數組。

  • var?myArray?=?[?“a”,?“b”,?“c”?];???
  • for?(var?i=0;?i<myArray.length;?i++)?{???
  • console.log(myArray[i]);???
  • }???
  • 2.數組維度Array dimensions

    舉例

  • var?myArray?=?new?Array(10);??
  • 第二個問題是開發者使用數組構成器來創建數組,技術上是正確的,然而會比文字符號(literal notation)慢解決辦法:使用文字符號來初始化數組,不要預定義數組長度。

  • var?myArray?=?[];?
  • 3.未定義屬性 Undefined properties

    舉例:

  • var?myObject?=?{???
  • ????someProperty:?“value”,???
  • ????someOtherProperty:?undefined???
  • }??
  • 未定義屬性,將在對象中創建元素(鍵‘someOtherProperty’和值‘undefined’.)。如果你遍歷數組,檢測已存在的元素,那么下面的語句將都返回“未定義/undefined”

  • typeof?myObject['someOtherProperty']?//?undefined???
  • ??
  • typeof?myObject['unknownProperty']?//?undefined???
  • 解決辦法:如果你想明確聲明對象中的未初始化的屬性,標記它們為Null(空)。

  • var?myObject?=?{???
  • someProperty:?“value”,???
  • someOtherProperty:?null???
  • }??
  • 4.閉包的濫用Misuse of Closures

    舉例:

  • function(a,?b,?c)?{???
  • var?d?=?10;???
  • var?element?=?document.getElementById(‘myID’);???
  • element.onclick?=?(function(a,?b,?c,?d)?{???
  • return?function()?{???
  • alert?(a?+?b?+?c?+?d);???
  • }???
  • })(a,?b,?c,?d);???
  • }???
  • 這里開發者使用兩個函數來傳遞參數a、b、c到onclick handler。雙函數根本不需要,徒增代碼的復雜性。

    變量abc已經在局部函數中被定義,因為他們已經在主函數中作為參數被聲明。局部函數中的任何函數都可創建主函數中定義的所有變量的閉包。因此不需要再次傳遞它們。

    看看這里JavaScript Closures FAQ了解更多。

    解決辦法:使用閉環來簡化你的代碼。

  • function?(a,?b,?c)?{???
  • var?d?=?10;???
  • var?element?=?document.getElementById(‘myID’);???
  • element.onclick?=?function()?{???
  • //a,?b,?and?c?come?from?the?outer?function?arguments.???
  • //d?come?from?the?outer?function?variable?declarations.???
  • //and?all?of?them?are?in?my?closure???
  • alert?(a?+?b?+?c?+?d);???
  • };???
  • }???
  • 5.循環中的閉包Closures in loops

    舉例:

  • var?elements?=?document.getElementByTagName(‘div’);???
  • for?(var?i?=?0;?i<elements.length;?i++)?{???
  • elements[i].onclick?=?function()?{???
  • alert(“Div?number?“?+?i);???
  • }???
  • }???
  • 在這里例子里面,當用戶點擊不同的divs時,我們想觸發一個動作(顯示“Div number 1”, “Div number 2”… 等) 。然而,如果你在頁面有10個divs,他們全部都會顯示“Div number 10”。

    問題是當我們使用局部函數創建一個閉包時,函數中的代碼可以訪問變量i。關鍵是函數內部i和函數外部i涉及同樣的變量。當我們的循環結束,i指向了值10,所以局部函數中的i的值將是10。

    解決辦法:使用第二函數來傳遞正確的值。

  • var?elements?=?document.getElementsByTagName(‘div’);???
  • for?(var?i?=?0;?i<elements.length;?i++)?{???
  • elements[i].onclick?=?(function(idx)?{?//Outer?function???
  • return?function()?{?//Inner?function???
  • alert(“Div?number?“?+?idx);???
  • }???
  • })(i);???
  • }???
  • 6.DOM對象的內測泄漏Memory leaks with DOM objects

    舉例:

  • function?attachEvents()?{???
  • var?element?=?document.getElementById(‘myID’);???
  • element.onclick?=?function()?{???
  • alert(“Element?clicked”);???
  • }???
  • };???
  • attachEvents();???
  • 該代碼創建了一個引用循環。變量元素包含函數的引用(歸于onclick屬性)。同時,函數保持一個DOM元素的引用(提示函數內部可以訪問元素, 因為閉包。)。所以JavaScript垃圾收集器不能清除元素或是函數,因為他們被相互引用。大部分的JavaScript引擎對于清除循環應用都不夠 聰明。

    解決辦法:避免那些閉包,或者不去做函數內的循環引用。

  • function?attachEvents()?{???
  • var?element?=?document.getElementById(‘myID’);???
  • element.onclick?=?function()?{???
  • //Remove?element,?so?function?can?be?collected?by?GC???
  • delete?element;???
  • alert(“Element?clicked”);???
  • }???
  • };???
  • attachEvents();?
  • 7.區別整數數字和浮點數字Differentiate float numbers from integer numbers

    舉例:

  • var?myNumber?=?3.5;???
  • var?myResult?=?3.5?+?1.0;?//We?use?.0?to?keep?the?result?as?float???
  • 在JavaScript中,浮點與整數間沒有區別。事實上,JavaScript中的每個數字都表示使用雙精度64位格式IEEE 754。簡單理解,所有數字都是浮點。

    解決辦法:不要使用小數(decimals),轉換數字(numbers)到浮點(floats)。

  • var?myNumber?=?3.5;???
  • var?myResult?=?3.5?+?1;?//Result?is?4.5,?as?expected???
  • 8.with()作為快捷方式的用法Usage of with() as a shortcut

    舉例:

  • team.attackers.myWarrior?=?{?attack:?1,?speed:?3,?magic:?5};???
  • with?(team.attackers.myWarrior){???
  • console.log?(?“Your?warrior?power?is?”?+?(attack?*?speed));???
  • }???
  • 討論with()之前,要明白JavaScript contexts如何工作的。每個函數都有一個執行context(語句),簡單來說,包括函數可以訪問的所有的變量。因此context包含arguments和定義變量。

    with()真正是做什么?是插入對象到context鏈,它在當前context和父級context間植入。就像你看到的with()的快捷方式會非常慢。

    解決辦法:不要使用with() for shortcuts,僅for context injection,如果你確實需要時。

  • team.attackers.myWarrior?=?{?attack:?1,?speed:?3,?magic:?5};???
  • var?sc?=?team.attackers.myWarrior;???
  • console.log(“Your?warrior?power?is?”?+?(sc.attack?*?sc.speed));?
  • 9.setTimeout/setInterval 字符串的用法 Usage of strings with setTimeout/setInterval

    舉例:

  • function?log1()?{?console.log(document.location);?}???
  • function?log2(arg)?{?console.log(arg);?}???
  • var?myValue?=?“test”;???
  • setTimeout(“log1()”,?100);???
  • setTimeout(“log2(”?+?myValue?+?“)”,?200);???
  • setTimeout()和setInterval()可被或一個函數或一個字符串作為首個參數。如果你傳遞一個字符串,引擎將創建一個新函數(使用函數構造器),這在一些瀏覽器中會非常慢。相反,傳遞函數本身作為首個參數,更快、更強大、更干凈。

    解決辦法:一定不要使用strings for setTimeout()或setInterval()。

  • function?log1()?{?console.log(document.location);?}???
  • function?log2(arg)?{?console.log(arg);?}???
  • var?myValue?=?“test”;???
  • setTimeout(log1,?100);?//Reference?to?a?function???
  • setTimeout(function(){?//Get?arg?value?using?closures???
  • log2(arg);???
  • },?200);???
  • 10.setInterval()的用法Usage of setInterval() for heavy functions

    舉例:

  • function?domOperations()?{???
  • //Heavy?DOM?operations,?takes?about?300ms???
  • }???
  • setInterval(domOperations,?200);???
  • setInterval()將一函數列入計劃被執行,僅是在沒有另外一個執行在主執行隊列中等待。JavaScript引擎只增加下一個執行到隊列如果沒有另外一個執行已在隊列。這可能導致跳過執行或者運行2個不同的執行,沒有在它們之間等待200ms的情況下。

    一定要搞清,setInterval()沒有考慮進多長時間domOperations()來完成任務。

    解決辦法:避免 setInterval(),使用 setTimeout()

  • function?domOperations()?{???
  • //Heavy?DOM?operations,?takes?about?300ms???
  • //After?all?the?job?is?done,?set?another?timeout?for?200?ms???
  • setTimeout(domOperations,?200);???
  • }???
  • setTimeout(domOperations,?200);???
  • 11.“this”的濫用Misuse of ‘this’

    這個常用錯誤,沒有例子,因為非常難創建來演示。this的值在JavaScript中與其他語言有很大的不同。

    函數中的this值被定義是在當函數被調用時,而非聲明的時間,這一點非常重要。下面的案例中,函數內this有不同的含義。

    * Regular function: myFunction(‘arg1’);

    this points to the global object, wich is window for all browers.

    * Method: someObject.myFunction(‘arg1’);

    this points to object before the dot, someObject in this case.

    * Constructor: var something = new myFunction(‘arg1’);

    this points to an empty Object.

    * Using call()/apply(): myFunction.call(someObject, ‘arg1’);

    this points to the object passed as first argument.

    12.eval()訪問動態屬性的用法Usage of eval() to access dynamic properties

    舉例:

  • var?myObject?=?{?p1:?1,?p2:?2,?p3:?3};???
  • var?i?=?2;???
  • var?myResult?=?eval(‘myObject.p’+i);???
  • 主要問題在于使用eval()開始一個新的執行語句,會非常的慢。

    解決辦法:使用方括號表示法(square bracket notation)代替 eval()。

  • var?myObject?=?{?p1:?1,?p2:?2,?p3:?3};???
  • var?i?=?2;???
  • var?myResult?=?myObject[“p”+i];???
  • 13.未定義(undefined)作為變量的用法Usage of undefined as a variable

    舉例:

  • if?(?myVar?===?undefined?)?{???
  • //Do?something???
  • }???
  • 在上面的例子中,未定義實際上是一變量。所有的JavaScript引擎會創建初始化的變量window.undefined給未定義作為值。然而注意的 是變量不僅是可讀,任何其他的代碼可以剛改它的值。很奇怪能找到window.undefined有來自未定義的不同的值的場景,但是為什么冒險呢?

    ?

    解決辦法:檢查未定義時,使用typeof。

    if ( typeof myVar === “undefined” ) { //Do something }

    轉自:http://www.cnblogs.com/JuneZhang/archive/2011/04/19/2020479.html

    ?

    轉載于:https://www.cnblogs.com/xufeiyang/articles/3251369.html

    總結

    以上是生活随笔為你收集整理的开发者最容易犯的13个JavaScript错误的全部內容,希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。