阿里云最近在做促销，低至20折，有兴趣的可以看看：https://promotion.aliyun.com/...为了保证更好的可读性，这个文章采用意译而非直译。想阅读更多优质文章，请戳GitHub博客，一年百篇优质文章等你来！对于那些还不熟悉JavaScript写作风格的人，Google提供了一份编写JavaScript的写作风格指南。Google风格指南列出了编写干净易懂代码的最佳风格实践。这些并不是用于编写有效JavaScript的硬性、快速规则，只是用于在源文件中保持一致、吸引人的样式选择的规则。这对于JavaScript来说尤其有趣，它是一种灵活多变的语言，允许多种风格选择。Google和Airbnb有两个最流行的写作风格指南。如果我的工作是花很多时间写JS，我会先学习这两个。以下是GoogleJS风格指南中我发现最有趣和最相关的13条规则：这个有争议的问题），以及一些更晦涩的规范，这些规范让我感到惊讶，并且肯定改变了我以后编写JS的方式。对于每条规则，我将总结规范，然后详细描述规则，参考风格指南中的支持部分。在适用的情况下，我还将提供实践中的风格示例，并将其与不遵守规则的代码进行对比。使用空格，而不是制表符ASCII水平空格字符(0x20)是除行终止符序列之外唯一出现在源文件中任何位置的空格字符。这意味着...制表符不用于缩进使用两个空格（而不是四个）用于缩进//badfunctionfoo(){????letname;}//badfunctionbar(){?letname;}//goodfunctionbaz(){??letname;}需要分号每条语句必须以分号结尾，禁止依赖自动分号插入。虽然无法想象为什么有人会反对这个想法，但在JS中一致使用分号正在成为新的“空格与制表符”辩论。Google总是建议在末尾使用分号。//badletluke={}letleia={}[luke,leia].forEach(jedi=>jedi.father='vader')//goodletluke={};letleia={};[luke,leia].forEach((jedi)=>{jedi.father='vader';});不要使用ES6模块不要使用ES6模块（即export和import关键字），因为它们的语义尚未最终确定。请注意，一旦语义完全标准化，用法将被重新定义。//先不要这样做//------lib.js------exportfunctionsquare(x){returnx*x;}exportfunctiondiag(x,y){returnsqrt(square(x)+square(y));}//------main.js------import{square,diag}from'lib';不鼓励水平对齐（但不禁止）这种做法是允许的，但谷歌的写作风格通常不鼓励它，甚至不需要水平对齐的地方已经使用。水平对齐是在代码中添加可变数量的额外空间，以便一行中的变量值与前一个变量的值对齐。//坏{tiny:42,longer:435,};//好{tiny:42,longer:435,};不要再使用var了。使用const或let来声明所有局部变量而不是var。默认情况下使用const，除非用let声明时变量需要重新赋值。//badvar示例=42;//goodlet示例=42;首选箭头函数箭头函数提供了简洁的语法，解决了函数中this不确定的一些问题。与function关键字相比，箭头是首选函数，尤其是嵌套函数。老实说，我只是觉得箭头函数很棒，因为它们更简洁、更美观。事实证明，它们还有一个非常重要的目的。//bad[1,2,3].map(function(x){consty=x+1;returnx*y;});//good[1,2,3].map((x)=>{consty=x+1;返回x*y;});使用模板字符串而不是拼接浮雕在复杂的字符串连接上使用模板字符串（以`分隔），尤其是当涉及到多个字符串的文本时，模板字符串可以跨越多行。//badfunctionsayHi(name){return'Howareyou,'+name+'?';}//badfunctionsayHi(name){return['Howareyou,',name,'?'].join();}//badfunctionsayHi(name){return`你好吗，${name}?`;}//goodfunctionsayHi(name){return`你好吗，${name}?`;}别担心关于长字符字符串使用\表示续行不要在普通或模板字符串文字中使用续行（即，在字符串文字中以反斜杠结束一行）。尽管ES5允许这样做，但如果在斜线后有任何尾随空格，那么它可能会导致一些读者不太明显的棘手错误。有趣的是，Google和Airbnb不同意这条规则（这是Airbnb的规范）。虽然Google建议连接较长的字符串（如下所示），但Airbnb的风格指南基本上建议什么都不做，并允许长字符串在需要时继续连接。//不好（抱歉，这在移动设备上显示不佳）constlongString='这是一个非常长的字符串，\远远超过了80列的限制。不幸的是，由于\连续行的缩进方式，它\包含很长的空格。';//goodconstlongString='这是一个很长的字符串，'+'远远超过了80列的限制。它不包含'+'很长的空格，因为连接的'+'字符串更干净。;for...of是for循环的首选类型对于ES6，该语言现在具有三种不同的for循环。可以使用所有循环，但如果可能，应首选for-of循??环。如果你问我，这是一个奇怪的问题，但我认为我应该包括它，因为谷歌声明了一种首选的for循环类型，这很有趣。总觉得for...in循环更适合对象，而for...of更适合数组，不同的场景可以使用不同的方法。虽然Google此处的规范不一定与这个想法相矛盾，但有趣的是知道他们特别喜欢这个循环。不要使用eval()不要使用eval或function(...string)构造函数（代码加载程序除外）。这些功能具有潜在危险，并且在CSP环境中根本不起作用MDN页面的eval()甚至有一个名为“不要使用eval！”的功能。//badletobj={a:20,b:30};让propName=getPropName();//returns"a"or"b"eval('varresult=obj.'+propName);//goodletobj={a:20,b:30};letpropName=getPropName();//返回"a"或"b"letresult=obj[propName];//obj["a"]等同于obj.a常量命名要全部大写，常量名用CONSTANT_CASE用下划线分隔格式：全部大写，单词用下划线分隔。如果您绝对确定变量不应更改，则可以通过将常量名称大写来表明这一点。这使得常量的不变性在整个代码中使用时显而易见。一个值得注意的例外是常量是函数范围的。在这种情况下，它应该写成驼峰式。//badconstnumber=5;//goodconstNUMBER=5;每次声明一个变量，每个局部变量声明只声明一个变量：不推荐a=1，b=2等声明。//badleta=1,b=2,c=3;//goodleta=1;让b=2;让c=3;使用单引号而不是双引号普通字符串使用单引号(')分隔，而不是双引号(")。提示：如果字符串包含单引号字符，请考虑使用模板字符串以避免引号转义。//badletdirective="Noidentificationofselformission."//badletsaying='Sayitain\u0027tso.';//goodletdirective='Noidentificationofselformission.';//goodletsaying=`说不是这样`;最后一点正如我在一开始所说的，这些不是强制性的。谷歌只是众多科技巨头之一，这些只是推荐。也就是说，从谷歌这样的公司看到风格推荐是很有趣的，谷歌雇佣了很多有才华的人，他们花了很多时间写出很棒的代码。如果您想遵循“源代码符合Google”准则，那么您可以遵循这些规则——但是，当然，很多人不同意这些规则，您可以随意忽略任何或所有这些规则。我个人认为Airbnb的规范在很多情况下比Google更有吸引力。无论您对这些特定规则采取何种立场，在编写任何类型的代码时牢记风格的一致性仍然很重要。原文：13NoteworthyPointsfromGoogle’sJavaScriptStyleGuide你的点赞是我继续分享好东西的动力，欢迎点赞！干货交流系列文章总结如下。我觉得点个Star就好了。欢迎加群，互相学习。https://github.com/qq44924588...我是小智，公众号《大招天下》的作者，前端技术爱好者。我会经常分享自己学习看到的干货，在进步的路上互相鼓励！关注公众号，后台回复福利，就能看到福利，你懂的。
