7个保持js代码整洁的技巧

前端很美
195 阅读4分钟

「这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战」

作者： Bhagya Vithana 译者：前端很美 来源：bitsrc

编写整洁的代码有助于增加应用的可维护性和提高开发人员的生产力，本文将探讨写出整洁js代码的7个小技巧。

1.使用对象解构

对象解构允许我们从对象中获取特定属性并立即将它们分配给变量。 它减少了我们提取对象属性所需的代码行数，并使我们的代码更易于理解。 对象解构节省了大量的显式变量声明代码，它在以下情况下非常有用：

  • 使用一个对象的多个属性。
  • 多次使用相同的属性。
  • 使用深度嵌套在对象中的属性。
const employee = {name: ‘ANE01’, email: ‘Anna@example.com’,
phone:’0112–345–6789'};
//使用对象解构
{name, email, phone} = employee;
//不使用对象解构
name = employee.name;
const email = employee.email;
const phone = employee.phone;

上面两个例子的结果是相同的。 但是，使用对象解构的代码更简单、更容易理解。

2.函数使用多个参数

在声明一个函数时，我们应该总是使用多个输入参数而不是单个对象。 这种方法可以帮助开发人员通过查看方法签名轻松了解需要传递的最少参数数量。此外，它提高了应用程序性能，因为不需要创建对象参数和收集垃圾。

//推荐
function CustomerDetail (CustomerName, CustomerType, Order){
    console.log('This is ${CustomerName} of ${CustomerType} 
    and need ${Order}');
} 

//不推荐
function CustomerDetail (User){      
    console.log('This is ${User.CustomerName} of 
    ${User.CustomerType} and need ${User.Order}');
}

但是，如果输入参数的数量很多，我们应该切换回使用对象参数以避免不必要的代码复杂性。

3.使用箭头函数

箭头函数提供了一种编写JavaScript 函数的简洁方法，同时解决了在回调中访问this的问题。 如果使用箭头函数，大括号、括号、函数和返回关键字将变为可选。 最重要的是，我们的代码变得更易于理解和清晰。 下面的示例显示了不带括号的单行箭头函数和常规函数之间的区别。

// 箭头 function
const myOrder = order => console.log(`Customer need ${order}`);

// 常规 Function
function(order){
   console.log(`Customer need ${order}`);
}

虽然箭头函数要简单得多，但我们必须知道何时以及如何使用它们。 例如，在处理对象原型、类或对象字面量时，使用箭头函数并不是最好的方法。 此外，箭头函数不能用作函数构造函数。 如果使用 new 关键字从箭头函数创建新对象，则会报错。

4.使用模板进行字符串连接

模板文字是用反引号 (`) 界定的文字。 它提供了一种创建多行字符串和执行字符串插值的简单方法。 例如，我们可以在字符串中定义一个占位符以去除所有不必要的连接代码。

//before
var name = 'Peter';
var message = 'Hi'+ name + ',';//after
var name = 'Peter';
var message = `Hi ${name},`;

5.扩展运算符

扩展扩展运算符 (...) 是 ES6 引入的另一个特性。 它能够使用一行代码将像数组这样类型的数据扩展为单个元素。 当我们需要将一个数组或对象放入一个新的数组或对象中或组合多个参数到数组中时，此运算符非常有用。 下面的代码显示了如何使用扩展运算符组合 2 个数组。它使代码干净且易于理解，因为我们不需要使用循环或条件。

let x = [car, bus,van];
let y = [bike, truck, ..x, lorry]console.log (y);// bike, truck, car, bus, van, lorry

6.尽量少使用回调函数

回调曾经是在 JavaScript 程序中处理异步函数最流行的方式。 你肯定已经知道处理多个嵌套回调的痛苦。 例如，下面的代码包含4个回调函数，随着代码的增长，它会变得更加困难。

function1(function (err, data) { 
  ...  
  function2(user, function (err, data) {
    ...
     function3(profile, function (err, data) {
      ...
      function4(account, function (err, data) {
        ....
      }); 
    }); 
  });
});

作为解决方案，ES6 和 ES7 引入了 Promises 和 Async/Await 来处理异步函数，它们更易于使用，并使代码易于他人理解。，如果使用 Promises 或 Async/Await，你的代码将变得干净且易于理解。

// Promises
function1() 
.then(function2) 
.then(function3) 
.then(function2) 
.catch((err) => console.error(err));
// Async/Await
async function myAsyncFunction() {  
try {    
  const data1= await function1();    
  const data2= await function2(data1);    
  const data3= await function3(data2);    
  return function4(data4);  
} 
catch (e) {    
  console.error(err);  
}}

7.尽可能使用简写法

在处理条件时，简写法可以节省大量时间和空间。 例如，如果编写一个条件来检查变量是否为empty, null and undefined，则必须在 if 语句中写 3 个条件。

if (x !== '' && x !== null && x !== undefined) { ... }

但是，如果使用简写法，则只需要编写一个如下所示的条件：

if ( !!x ) { ... }

总结

作为开发人员，我们应该始终编写干净的代码，因为它可以提高可读性并提高团队的生产力。

avatar
文章
阅读
粉丝