你有几篇文章，js编码的5个坏习惯

更多文章请关注微信公众号：前端css和js干货阅读js代码时，你是否有过这样的感觉：你几乎看不懂代码的意思？代码使用了很多过时的JavaScript技巧？更随意的命名和编码风格？这些都是不良编码习惯的迹象。本文列出了JavaScript中5个常见的不良编码习惯。更重要的是，本文就如何改掉这些习惯提供了可操作的建议。1.不要使用隐式类型转换JavaScript是一种弱类型语言。如果使用得当，这是一个优势，因为它提供了灵活性。大多数运算符+-*/==（不包括===）在处理不同类型的数据时使用隐式类型转换。if(condition){...},while(condition){...}语句将条件隐式转换为布尔值。以下示例依赖于隐式类型转换。我打赌你很困惑：console.log("2"+"1");//=>"21"console.log("2"-"1");//=>1console.log(''==0);//=>trueconsole.log(true==[]);//->falseconsole.log(true==![]);//->false过度依赖隐式类型转换是一个坏习惯。首先，它使您的代码在某些情况下不太稳定。其次，它会产生更多难以重现和修复的错误。下面是一个获取对象属性的函数。如果该属性不存在，则该函数返回一个默认值：'蝙蝠侠',isVillian:false};console.log(getProp(hero,'name','Unknown'));//=>'Batman'getProp()读取name属性的值，即“Batman”。如果您访问isVillian属性会发生什么：console.log(getProp(hero,'isVillian',true));//=>true这是一个错误。即使hero的isVillian属性为false，函数getProp()也会返回falsetrue。这是因为属性的存在取决于通过if(!object[propertyName]){...}隐式转换为布尔值。这些类型的错误很难被发现。要修复功能，需要明确数据的类型。functiongetPropFixed(object,propertyName,defaultValue){if(object[propertyName]===undefined){returndefaultValue;}returnobject[propertyName];}consthero={name:'Batman',isVillian:false};控制台。日志（getPropFixed（英雄，“isVillian”，真））；//=>falseobject[propertyName]===undefined验证属性访问器的计算结果是否为未定义。旁注：第4节建议避免直接使用undefined。因此，可以通过使用in运算符来改进上述方案：}returnobject[propertyName];}建议：尽量不要使用隐式类型convert。相反，请确保变量和函数参数始终具有相同的类型。必要时使用显式类型转换。最佳实践列表：始终使用严格相等运算符===执行比较不要使用松散相等运算符==加法运算符operand1+operand2：两个操作数都应该是数字或两个字符串benumbersif(condition){...},while(condition){...}etc.statements:conditionshouldbeaboolean你可能会说这个方法需要写更多的代码...确实！但是使用显式方法，您可以控制代码的行为。此外，这增加了可读性。2.不要使用过时的JavaScript技巧JavaScript的有趣之处在于它的创始人并没有预料到这门语言会变得如此流行。构建在JavaScript之上的应用程序的复杂性增长速度快于语言的发展速度。这种情况迫使开发人员使用javaScripthack来实现功能。一个经典的例子是搜索一个数组是否包含一个元素。使用array.indexOf(item)!==-1检查元素是否存在。ECMAScript2015及之后的版本越来越强大。您可以安全地重构许多hack以使用新的语言功能。使用ES2015方法array.includes(item)重构array.indexOf(item)!==-1。3.不要污染函数作用域在ES2015之前，js变量是函数作用域的，所以你可能会养成如下将所有变量声明在函数作用域中是一个坏习惯，请看一个例??子：functionsomeFunc(array){varindex,项目,长度=array.length;/**大量代码*/for(index=0;indexundefinedconsthero={name:'Batman'};console.log(hero.city);//=>undefinedcount变量已定义但尚未用值初始化。JavaScript隐式地??为它赋值undefined。访问不存在的属性hero.city也会返回undefined。为什么直接使用undefined是一种不好的做法？因为当我们直接和undefined比较的时候，我们可能是在处理未初始化的变量。变量、对象属性、数组在使用前必须先赋值！JavaScript提供了很多方法来避免与undefine直接比较。propertyexists://不好的做法constobject={prop:'value'};if(object.nonExistingProp===undefined){//...}//好的做法constobject={prop:'value'};if('nonExistingProp'inobject){//...}对象默认属性//坏习惯functionfoo(options){if(object.optionalProp1===undefined){object.optionalProp1='默认值1';}//...}//好的做法functionfoo(options){constdefaultProps={optionalProp1:'默认值1'};options={...defaultProps,...options};//...}函数默认参数//坏习惯functionfoo(param1,param2){if(param2===undefined){param2='Somedefaultvalue';}//...}//好的做法functionfoo(param1,param2='Somedefaultvalue'){//...}你应该尽量避免从函数返回null，并避免调用带有null的函数作为参数。一旦null出现在您的调用堆栈中，您必须检查每个可能访问null的函数中的变量是否为null。这是麻烦且容易出错的，如以下代码所示：}else{返回foo(null);}}functionfoo(options){letvalue=null;如果（选项！==null）{value=options.value;//...}returnvalue;}尝试编写不涉及空值的代码。另一种方法是try/catch机制。ALGOL的发明者托尼·霍尔(TonyHoare)曾经说过：我称之为我的十亿美元错误……我正在设计面向对象语言中的第一个引用综合类型系统。但是我无法抗拒空引用的诱惑，只是因为它太容易做到了。这导致了无数的错误、错误和系统崩溃，在过去的四十年中造成了大约十亿美元的痛苦和损失。“计算机科学最严重的错误”一文深入探讨了为什么null会损害代码质量。5.不要使用随机的编码风格有什么比阅读带有随机编码风格的代码更令人生畏的呢？你永远不知道会发生什么！如果代码库包含许多具有不同编码风格的开发人员怎么办？各种人物涂鸦墙。要求整个团队和应用程序代码库采用相同的编码风格。它提高了代码的可读性。编码风格示例可参考：AirbnbJavaScriptStyleGuideGoogleJavaScriptStyleGuide推荐自动验证代码风格：安装eslint使用最适合你的编码风格配置eslint设置pre-submithook在提交前运行eslint验证。6.总结编写高质量和干净的代码需要更多的纪律和克服不良的编码习惯。JavaScript是一种弱类型语言，具有很大的灵活性。但是您必须了解您正在使用的功能。建议是避免隐式类型转换并减少使用undefined和null。js语言这几年发展非常快。查找棘手的代码并重构它以使用最新的JavaScript功能。代码库中一致的编码风格有利于可读性。你还知道JavaScript中的其他不良编码习惯吗？作者：dmitriPavlutin译者：前端css和js干货来源：DmitriPavlutin