编写更好的 JavaScript 的 14 个技巧

14. 可读性代码胜过巧妙的代码

以下是我最喜欢的一些编写更简洁的 Javascript 代码的技巧，跳过巧妙的技巧，保持简单。

1. 忘记 var

使用const或let声明所有变量。根据经验，默认使用const ，否则，如果需要重新赋值，请使用let。

应避免使用var关键字，因为它几乎没有作用域，从而导致潜在的作用域错误，请参阅我的提升指南。

奖励：最佳做法是在创建时初始化变量，以便您和您的团队可以确保没有遗漏任何变量。

// ❌ Avoid this
var old = "";

// ✅ Do this
const immutable = "John";
let counter = 1;
counter++; // counter === 2;

// Declare objects and arrays as const to prevent type change
const user = {firstname: "John", lastname: "Doe"};
const users = ["Mac", "Roe"];

2. 严格平等

严格相等运算符(===)与相等运算符相同，检查两个操作数是否相等，并返回布尔值。但与相等运算符 ( ==)不同，严格相等运算符(===)始终将不同类型的操作数视为不同。

奖励：在非严格相等运算符的情况下，0 为假，将错误地等于假。

// ❌ Avoid this
1 == "1"; // true
0 == false; // true

// ✅ Do this
1 === 1; // true
1 === "1"; // false
0 === false; // false

3. 避免使用原始值的构造函数

原始对象与它们的原始对应物严格不同，这使得
它们更难检查严格相等性，因为它们被包裹在对象中。

它们基本上是等价的，但并不相等。

// ❌ Avoid this
const stringObject = new String("Charly");

// ✅ Do this
const stringPrimitive = "Charly";

// Equality check
stringPrimitive === stringObject; // false 
new Number(1) === 1; // false
new Boolean(true) === true; // false

4. 使用对象字面量

对象文字是一种简写符号，允许您动态定义对象或数组。

从而避免重复，提高可读性并防止错误，因为我们无法推断其背后的逻辑，我们当前是在初始化变量还是更新它？

// ❌ Avoid this
const user = new Object(); // {}
user.firstname = "John"; // { firstname: "John" }
user.lastname = "Doe"; // { firstname: "John", lastname: "Doe" }

// ✅ Do this
const user = { 
  firstname: "John", 
  lastname: "Doe" 
};

// ❌ Avoid this
const fruits = new Array(); // []
fruits.push("banana"); // ["banana"]
fruits.push("mango"); // ["banana", "mango"]

// ✅ Do this
const fruits = ["banana", "mango"];

5. 使用模板字面量来组合字符串

将字符串放在一起很麻烦，尤其是组合字符串和变量时。

为了使这个过程更简单，您可以使用模板文字（用反引号标记），只要它被插值(${})包围，它就可以同时接受字符串和变量。

const firstname = "John";

// ❌ Avoid this
let greeting = "Hello, " + firstname; // Hello, John

// ✅ Do this
greeting = `Hello, ${firstname}`; // Hello, John

6. 使用分号作为行终止符

使用分号作为行终止始终是一个好的做法。

如果你忘记了它，你不会收到警告，因为大多数情况下它会被 JavaScript 解析器插入。但是如果没有它，你怎么知道表达式何时结束呢？

以 for 循环为例：

// ✅ Do this
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

您将无法执行以下操作，因为解析器认为它是一个表达式，而实际上它是三个独立的表达式：

// ❌ Not this
for (let i = 0 i < numbers.length i++) {
  console.log(numbers[i]);
} // Uncaught SyntaxError: Unexpected identifier

7. 使用对象参数代替多个参数

我认为在函数中定义太多参数是一种代码异味。即使参数有默认值或可选，我们来看这个例子：

// ❌ Avoid this
function avatarUrl(avatar, format = "small", caption = true) {
  // Does something
}

avatarUrl(user.avatar, 'thumb', false)

使用这个函数时，很难知道使用了哪些参数以及如何使用。最后一个参数false代表什么？

不知道，得打开函数定义才能知道。
而且，如果你需要更改参数的顺序怎么办？那你就得修改所有函数调用了。

对于对象来说，顺序并不重要：

// ✅ Do this
function avatarUrl(avatar, options={format: 'small', caption: true}) {
  // Does something
}

avatarUrl(user.avatar, {
  format: "thumb", 
  caption: false
})

8.尽快返回

嵌套条件使代码难以理解，但您可以通过提前返回，使用保护子句轻松避免这种情况。

保护子句将允许您删除大多数 else 条件，使您的代码像纯英语一样可读。

// ❌ Avoid this
function doSomething() {
  if (user) {
    if (user.role === "ADMIN") {
      return 'Administrator';
    } else {
      return 'User';
    }
  } else {
    return 'Anonymous';
  }
}

// ✅ Do this
function doSomething() {
  if (!user) return 'Anonymous'
  if (user.role === "ADMIN") return 'Administrator'

  return 'User'
}

9. 学习并利用工具的力量

Javascript 在Array、Object、String上提供了很多内置函数。

找到并学习它们以充分发挥堆栈的威力。

// ❌ Avoid this
const users = [
  {
    username: "JohnDoe",
    admin: false
  },
  {
    username: "Todd",
    admin: true
  },
];
const admins = [];

function getAdmins() {
  users.forEach((user) => {
    if (user.admin) admins.push(user)
  })

  return admins
}

// ✅ Do this
function getAdmins() {
  return users.filter((user) => user.admin)
}

10. 为人编写代码，而不是为计算机编写

让我们假设一下，我们大多数人都不擅长注意差异，我们可能需要几秒钟才能注意到逻辑上的不符（！）。

让我们来看这个例子：

const users = [
  {
    username: "JohnDoe",
    admin: false
    enabled: true
  },
  {
    username: "Todd",
    admin: true
    enabled: true
  },
];

// ❌ Avoid this
const members = users.filter(u => u.enabled).map(u => !u.admin)
const admins = users.filter(u => u.enabled).map(u => u.admin)

// ✅ Do this
const enabledUsers = users.filter(u => u.enabled)
const members = enabledUsers.map(u => !u.admin)
const admins = enabledUsers.map(u => u.admin)

成员和管理员的分配仅在逻辑非（！）上有所不同，如果您需要更改一个分配，那么您还需要更改另一个分配。

另一个例子是，不要使用魔法数字。而是使用显式变量：

// ❌ Avoid this
function price_with_taxes(price) {
  return price * 1.2
}

// ✅ Do this
const taxRate = 1.2
function price_with_taxes(price) {
  return price * taxRate
}

11.避免使用缩写

无论您将事件写成e ，还是将票写成t，都不会提高您的工作效率，反而会降低可读性并降低即时理解能力。

// ❌ Avoid this
function someFunction() {
  events.forEach(e => {
    e.tickets.forEach(t => {
      `${e.name} for ${t.full_name}`
    })
  })
}

// ✅ Do this
function someFunction() {
  events.forEach(event => {
    event.tickets.forEach(ticket => {
      `${event.name} for ${ticket.full_name}`
    })
  })
}

在这里，你无需猜测 e 和 t 代表什么，直接读出来就行了。
代码本身就够复杂的，额外的复杂性会让你的大脑膨胀。变量、类、方法也一样。

不过也有少数例外，在 for 循环中使用广泛使用的缩写（如 i）是可以的。

12. 避免无用的 && 否定条件

条件就像大脑的备忘录，您需要在逐步执行每一行代码时记住它们，以便了解正在发生的事情。

幸运的是，借助我最喜欢的 ES6 运算符可选链，其中大部分都可以简化。

// ❌ Avoid this
function doSomething(params) {
  if (params && params.filter) return 'Foo'

  return 'Bar'
}

// ✅ Do this
function doSomething(params) {
  if (params?.filter) return 'Foo'

  return 'Bar'
}

我不知道你是怎么想的，但每次我看到一个逻辑上的“不”时，我的大脑就会停顿一下，对我来说，读到这样的内容感觉更自然：

如果用户是管理员，那么我们会这样做

而不是：

如果用户不是管理员，那么我们就会这样做。

// ❌ Avoid this
function doSomething(user) {
  if (!user || !user.admin) {
    // Case where no user or not admin
  } else {
    // Case where user and user is admin
  }
}

// ✅ Do this
function doSomething(user) {
  if (user && user.admin) {
    // Case where user and user is admin
  } else {
    // Case where no user or not admin
  }
}

13. 使用 for...of 代替 for 循环

使用for...of语句代替传统的for 循环是 JavaScript 的一项改进。

此语法由 ES6 引入，它包含一个内置迭代器，这样您不必定义自己的变量，只需将其递增直到达到一定的长度值：

let users = ["Fedor Emelianenko", "Cyril Gane", "Conor McGregor"];

// ❌ Avoid this
// This avoids length behind reavaluated at every iteration
let usersCount = users.length;
for (let i = 0; i < usersCount; i++) {
    console.log(users[i]);
}

// ✅ Do this
for(let user of users) {
  console.log(user);
}

看看它的可读性有多强！你不用再关心这些 (let i = 0; i < usersCount; i++) 笨拙的逻辑了，虽然在某些特定情况下，比如不规则间隔，你可能需要它们。

14. 可读性代码胜过巧妙的代码

永远记住，你正在与其他开发人员以及未来的自己一起编写代码。你不想制造比你正在解决的问题更多的问题。

不要为了炫耀自己的技能而编写代码，而要编写每个人都能理解和调试的代码。

如果您有更多建议，我很乐意在评论中向您学习！

保持简单！

鏂囩珷鏉ユ簮锛�https://dev.to/melvinvmegen/14-tips-to-write-better-javascript-gj0