在掌握如何编写JavaScript代码之后，那么就进阶到实践——如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读，因为这样的程序更易于团队成员之间紧密协作。
今天，我们将介绍15个最佳实践技巧，可帮助简化JavaScript代码，易于其他开发人员理解，也使程序更具可读性和可维护性。
1. 在顶部声明并初始化变量
没有什么比延迟声明更能破坏可读性的了。正如在开始工作之前准备好所有工具可以帮助简化工作，在进入函数的细节之前声明所有变量也可以让程序更简单。这也方便了我们以后调整变量名称或值。
至于变量，最佳做法是在创建时初始化变量，以便你和你的团队都可以确定没有undefined的变量。
<script>
var x = 5;
</script>
2. 构建模块化、专业化的函数
为了效率和可读性，单个函数走天下是不可行的。所以我们在设计函数时，应该秉持着一个任务一个函数的原则。函数命名也应当匹配任务。
这样做是不是更方便其他人阅读代码了呢？因为只处理一项任务，自然而然函数就会更简单。甚至以后如果有需要，你和你的团队还可以将此函数应用到其他程序。
请看下面的示例，改进后的代码只看函数名和变量名，就可以清楚地知道任务目的。
function table (columns, rows, item){
creates table and searches it for the passed item
}
// compared to
function createTable (columns, rows){
//creates table
}
function searchTable (table.length, item) {
//searches table for the passed item
}
3. 识别并删除重复代码
有时，代码中不可避免地会出现重复的代码行。在这种情况下，应将重复的代码改写为函数，并在以前所有使用过这些代码的地方改为调用函数。
这不但减少了视觉混乱，还有助于以后的调试，因为这样一来团队只需要查看函数，而不必一一检查多处代码。
<script>
var x = 5;
var y = 6;
var x = x*2
var y = y*2
</script>
<script>
var x = 5;
var y = 6;
function double (value){
return value*2;
}
double (x);
double(y);
</script>
4. 多注释代码
注释是总结代码片段目的的好方法，可以节省其他开发人员靠自己去确定代码所需的时间。
如果代码未完成注释描述应完成的任务，还能及时捕获可能的错误。一般来说，最好每个函数都有一条注释。
不确定应不应该写注释？那就写吧！如果太过杂乱，大不了以后删除罢了。
//declares and initializes var x
<script>
var x = 5;
</script>
5. 谨防过度使用递归
注意：递归函数不要嵌套太多层。虽然说多层嵌套能一次解决许多问题，但我们很难一目了然。
为避免困惑，尽可能在不产生大量运行时成本的前提下，解放嵌套的递归函数。如果你有3+层的嵌套函数，那么你的同事可能很难跟上你的思路。
function1 (a,b){
function2{
function3{
//this is too hard to follow and can likely be solved another way
}
}
}
</script>
6. 高效使用DOM操作
访问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();
}
7. 不惜一切代价避免全局变量
在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>
8. 使用速记符号（对象文字）
在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'
];
9. 使用严格模式捕获静默错误
与其他编程语言（如C++和Java）相比，JavaScript是一种语法非常宽松的语言。虽然这种宽大处理有助于在不引发错误的情况下运行代码，但可能会导致隐形的错误。所以我们需要解决隐形的静默错误，否则可能会导致意料之外的行为。
解决方案就是严格模式。包括两项主要更改：
-
以前可以通过编译器的静默错误现在会引发错误 -
修复了阻止JavaScript优化代码的错误 -
JavaScript Strict Code程序通常比非严格模式下的程序运行得更快。
或者在脚本部分的顶部，或者在所需功能之前（部分严格），添加'use strict';即可进入严格模式。
10. 设置默认值
创建对象时，可以为对象的部分或全部属性设置默认值。这样做不仅可确保每个属性的值都不是undefined，而且还声明了属性所需的数据类型。此外，通过不为某些属性设置默认值，还可以向团队传达对象正常运行不需要这些值的意思。
function logProperty({
address = '111 11th Street, 11111',
unit, //optional
landlord = 'Sara',
tenant = 'Raj',
rent = 500,
})
上面的代码中，unit属性可选，但其他四个属性（预期的数据类型）都必须有默认值。为此，unit留空。
11. 使用模板字面量组合字符串
组合字符串可太麻烦了，尤其是在组合字符串和变量时。我们可以使用模板字面量（用反引号标记），简化组合过程，因为模板字面量同时接受字符串和变量。
function greet(name) {
return `Hi, ${name}`; //template literal
}
console.log(greet('Leo'));
注意，通过使用模板字面量，我们可以根据传递的名称、组合字符串Hi和变量name传递的值来记录对用户的问候语。因此，此代码打印：Hi, Leo
12. 使用includes解决存在性测试
测试数组中值是否存在是一个常见问题。值得庆幸的是，JavaScript有一个特殊的数组方法include()——如果数组包含搜索值，则返回布尔值。不用搜索数组，这是一种高效、易于阅读的解决方案。
const sections = ['contact', 'shipping'];
function displayShipping(sections) {
return sections.includes('shipping');
}
console.log(displayShipping(sections));
此外，还有indexOf()方法可用于检查值以及查找索引。
13. 用falsy值缩短条件
在JavaScript的跨变量类型中，有一些值等效于false，包括：
-
布尔值 false -
null -
0 -
NaN -
' ' -
" "
在 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');
}
14. 通过继承共享方法
继承涉及在类之间共享属性或方法。下面的示例中使用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());
15. 使用数组方法编写较短的循环
最后一个小贴士，我们将深入探讨数组优化的复杂性。循环是创建和填充数组的常用方法。但是，循环会导致代码杂乱且难以阅读。
因此，我们可以使用数组方法来实现类似的效果，例如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)
总结
对简洁代码的追求是一个持续的旅程，因为最佳实践会随着语言的不断发展而不断改善。这个过程也是软件开发乐趣的一部分，学习最佳实践有助于开发人员真正掌握编程语言。大家加油！
![将百度云加速[百度CDN]全部IP段添加/导入宝塔CC防火墙IP白名单-小师评](https://img01.xiaoshiping.cn/xsp-bucket/2024/04/20240405034316428.png)
