在掌握如何编写JavaScript代码之后，那么就进阶到实践——如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读，因为这样的程序更易于团队成员之间紧密协作。
今天，我们将介绍15个最佳实践技巧，可帮助简化JavaScript代码，易于其他开发人员理解，也使程序更具可读性和可维护性。
没有什么比延迟声明更能破坏可读性的了。正如在开始工作之前准备好所有工具可以帮助简化工作，在进入函数的细节之前声明所有变量也可以让程序更简单。这也方便了我们以后调整变量名称或值。
至于变量，最佳做法是在创建时初始化变量，以便你和你的团队都可以确定没有undefined的变量。
<script>var x = 5;</script>为了效率和可读性，单个函数走天下是不可行的。所以我们在设计函数时，应该秉持着一个任务一个函数的原则。函数命名也应当匹配任务。
这样做是不是更方便其他人阅读代码了呢？因为只处理一项任务，自然而然函数就会更简单。甚至以后如果有需要，你和你的团队还可以将此函数应用到其他程序。
请看下面的示例，改进后的代码只看函数名和变量名，就可以清楚地知道任务目的。
function table (columns, rows, item){creates table and searches it for the passed item}// compared tofunction createTable (columns, rows){//creates table}function searchTable (table.length, item) {//searches table for the passed item}有时，代码中不可避免地会出现重复的代码行。在这种情况下，应将重复的代码改写为函数，并在以前所有使用过这些代码的地方改为调用函数。
这不但减少了视觉混乱，还有助于以后的调试，因为这样一来团队只需要查看函数，而不必一一检查多处代码。
<script>var x = 5;var y = 6;var x = x*2var y = y*2</script><script>var x = 5;var y = 6;function double (value){return value*2;}double (x);double(y);</script>注释是总结代码片段目的的好方法，可以节省其他开发人员靠自己去确定代码所需的时间。
如果代码未完成注释描述应完成的任务，还能及时捕获可能的错误。一般来说，最好每个函数都有一条注释。
不确定应不应该写注释？那就写吧！如果太过杂乱，大不了以后删除罢了。
//declares and initializes var x<script>var x = 5;</script>注意：递归函数不要嵌套太多层。虽然说多层嵌套能一次解决许多问题，但我们很难一目了然。
为避免困惑，尽可能在不产生大量运行时成本的前提下，解放嵌套的递归函数。如果你有3+层的嵌套函数，那么你的同事可能很难跟上你的思路。
function1 (a,b){ function2{ function3{ //this is too hard to follow and can likely be solved another way } }}</script>访问DOM对于充分利用程序至关重要，但反复这样做会导致视觉混乱并会减慢程序速度。
因此，我们最好访问一次并进行缓存，以供稍后在变量中使用。然后有需要的话，直接访问变量而不是访问DOM。这个过程在视觉上更干净、更高效。
注意：最佳做法是使用$符号标记DOM引用。
function accountInfo(){var email = $("#accounts").find(".email").val();var accountNumber = $("#accounts").find(".accountNumber").val();}// Contents cached to variable "accounts"function accountInfo(){ var $accounts = $("#accounts"); var name = $accounts.find(".email").val(); var age = $accounts.find(".accountNumber").val();}在JavaScript中，变量具有或全局或局部的作用域。作用域决定了在代码何处定义和访问变量。我们可以在程序中的任何位置，甚至函数之外定义全局变量。而局部变量仅用于定义的函数中。
如果存在同名的局部变量和全局变量，那么JavaScript将优先考虑局部变量并忽略全局变量。我们应避免使用全局变量，因为全局变量可能会意外覆盖窗口变量，从而导致错误。
此外，过多的全局变量会减慢程序速度，因为在窗口关闭之前不会删除全局变量，而局部变量会在函数完成后删除。
<html> <script> var myVar = "my global variable"; // This variable is declared as global function localVariable( ) { var myVar = "my local variable"; // This is a locally declared variable </script> </body></html>在JavaScript中设计对象或数组时，可以通过选择速记符号来节省空间。实现方式是在声明期间而不是之后设置对象或数组的属性。
这样做，我们就不必确定在每一行上设置了哪个对象或数组，从而使这部分代码更易于阅读。虽然是一个很小的变化，但随着对象和数组逐渐变得复杂，绝对可以为你的团队节省很多时间。
例如创建一个对象
普通写法：
var computer = new Object(); computer.caseColor = 'black'; computer.brand = 'Dell'; computer.value = 1200; computer.onSale = true;速记写法：
var computer = { caseColor: 'black'; brand: 'Dell'; value: 1200; onSale: true;}速记数组：
var computerBrands = ['Dell','Apple','Lenovo','HP','Toshiba','Sony'];与其他编程语言（如C++和Java）相比，JavaScript是一种语法非常宽松的语言。虽然这种宽大处理有助于在不引发错误的情况下运行代码，但可能会导致隐形的错误。所以我们需要解决隐形的静默错误，否则可能会导致意料之外的行为。
解决方案就是严格模式。包括两项主要更改：
或者在脚本部分的顶部，或者在所需功能之前（部分严格），添加'use strict';即可进入严格模式。
创建对象时，可以为对象的部分或全部属性设置默认值。这样做不仅可确保每个属性的值都不是undefined，而且还声明了属性所需的数据类型。此外，通过不为某些属性设置默认值，还可以向团队传达对象正常运行不需要这些值的意思。
function logProperty({ address = '111 11th Street, 11111', unit, //optional landlord = 'Sara', tenant = 'Raj', rent = 500, })上面的代码中，unit属性可选，但其他四个属性（预期的数据类型）都必须有默认值。为此，unit留空。
组合字符串可太麻烦了，尤其是在组合字符串和变量时。我们可以使用模板字面量（用反引号标记），简化组合过程，因为模板字面量同时接受字符串和变量。
function greet(name) { return `Hi, ${name}`; //template literal}console.log(greet('Leo'));注意，通过使用模板字面量，我们可以根据传递的名称、组合字符串Hi和变量name传递的值来记录对用户的问候语。因此，此代码打印：Hi, Leo
测试数组中值是否存在是一个常见问题。值得庆幸的是，JavaScript有一个特殊的数组方法include()——如果数组包含搜索值，则返回布尔值。不用搜索数组，这是一种高效、易于阅读的解决方案。
const sections = ['contact', 'shipping']; function displayShipping(sections) { return sections.includes('shipping');} console.log(displayShipping(sections));此外，还有indexOf()方法可用于检查值以及查找索引。
在JavaScript的跨变量类型中，有一些值等效于false，包括：
在 JavaScript 中，等效的==意味着两个对象共享相同的值，但它们可能不是相同的类型。完全相同的===表示两个对象类型相同，值也相同。这有什么用呢？
好吧，与其创建单独的变量来保存布尔值，不如使用上述值作为默认值来报告false，如果没有任何东西覆盖的话。比如下面的例子，你需要检查给定的员工是否接受过设备培训（equipmentTraining）。这台机器只需要最低级别的培训，培训水平并不重要。
因此，我们用if语句检查equipmentTraining是否具有falsy值，即默认的' '。如果是，则执行if语句并返回员工未获得授权。如果equipmentTraining包含除默认值以外的任何字符串，则表示具有truthy值，因此不会执行if语句。
const employee = { name: 'Eric', equipmentTraining: '',} if (!employee.equipmentTraining) { console.log('Not authorized to operate machinery');}继承涉及在类之间共享属性或方法。下面的示例中使用super标签实现继承，允许FlashCoupon中的构造函数访问Coupon中的父构造函数。只需定义一次方法（在父类中），即可增强代码的可读性。代码也变得更加模块化，因为继承器类可以专门用于给定任务。
注意，顶部的代码框建立了父类Coupon，其属性和方法共享到FlashCoupon，如FlashCoupon在其最后一行调用getExpirationMessage方法时看到的那样。
class Coupon { constructor(price, expiration) { this.price = price; this.expiration = expiration || 'Two Weeks'; } getExpirationMessage() { return `This offer expires in ${this.expiration}`; }}export default Coupon;import Coupon from './extend'; class FlashCoupon extends Coupon { constructor(price, expiration) { super(price); this.expiration = expiration || 'two hours'; }} const flash = new FlashCoupon(10);console.log(flash.getExpirationMessage());最后一个小贴士，我们将深入探讨数组优化的复杂性。循环是创建和填充数组的常用方法。但是，循环会导致代码杂乱且难以阅读。
因此，我们可以使用数组方法来实现类似的效果，例如for只需若干代码行即可循环。以下面的for循环为例。
const prices = ['1.0', 'negotiable', '2.15']; const formattedPrices = [];for (let i = 0; i < prices.length; i++) { const price = parseFloat(prices[i]); if (price) { formattedPrices.push(price); }}console.log(formattedPrices);我们可以通过三行map方法实现与上面代码相同的效果。此方法创建了一个大小相等的数组，只有price属性。然后使用parseFloat获取价格的浮点值。
const prices = ['1.0', '2.15'];const formattedPrices = prices.map(price => parseFloat(price));console.log(formattedPrices)对简洁代码的追求是一个持续的旅程，因为最佳实践会随着语言的不断发展而不断改善。这个过程也是软件开发乐趣的一部分，学习最佳实践有助于开发人员真正掌握编程语言。大家加油！
本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-78298-0.html你不可不知的 15 个 JavaScript 小贴士
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 又出新JS运行时了！JS运行时大盘点
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
