遵循这些 JavaScript 最佳实践来编写更好的代码 7. 使用 for...of 代替 for 循环

2025-06-07

遵循这些 JavaScript 最佳实践来编写更好的代码

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

无论您是经验丰富的开发人员，正在寻找改进编码风格的方法，还是渴望掌握基本知识的初学者，这篇博文都适合您。在本指南中，我们将探讨各种最佳实践，帮助您将 JavaScript 技能提升到新的水平。

1.采用一致的编码风格

改进 JavaScript 游戏的第一步是采用一致的编码风格。为什么这很重要？一致的编码风格可以增强代码的可读性和可维护性。你可以把它想象成一份蓝图，为你的脚本提供结构和一致性。

您可以遵循几种流行的编码风格指南：

选择符合您的编程风格的指南并在整个项目中坚持使用，即使许多其​​他开发人员在同一个项目上工作，您的项目也应该看起来只有一个人编写了代码。

2. 变量和函数的命名

接下来我们要讨论的是变量、函数和其他代码结构的命名约定。这种做法不仅关乎美观或语义，还关乎代码的可读性和高效的调试。

请记住，在 JavaScript 中，标准是对变量和函数使用驼峰式命名（如myVariableName），对类使用 Pascal 式命名（如MyClassName）。

// ❌ Poorly named variables:
let a = 'John';
let fn = () => console.log('Hello');

// ✅ Descriptive variable names:
let firstName = 'John';
let sayHello = () => console.log('Hello');
Enter fullscreen mode Exit fullscreen mode

3. 使用简写但要谨慎

简写是编写更快、更简洁代码的好方法，但要小心，因为它们可能会返回意想不到的结果。为了避免这种意外结果，请务必始终查看文档，查找相关的 JavaScript 代码示例，并测试结果。

// ❌ Traditional function declaration:
function square1 (num) {
  return num * num
}
// ✅ Using arrow functions (shorthand):
const square2 = num => num * num

// ❌ Very long code:
let x

if (y) {
  x = y
} else {
  x = 'default'
}

// ✅ A more succinct way to achieve the same result using logical OR:
let x = y || 'default'
Enter fullscreen mode Exit fullscreen mode

4. 在代码中添加有意义的注释

为代码添加注释就像为未来的自己或其他开发人员留下面包屑一样。它有助于理解代码的流程和目的，尤其是在团队项目中。

但是，请记住保持您的评论简短、简洁，并且只包含关键信息。

// ❌ Over-commenting or not commenting at all:
function convertCurrency (from, to) {
  // Conversion logic goes here
}

// ✅ Using appropriate comments:
/**
 * Converts currency from one type to another
 *
 * @description Converts one currency to another
 * @param {string} from - The currency to convert from
 * @param {string} to - The currency to convert to
 * @returns {number} - The converted amount
 * */
function convertCurrency (from, to) {
  // Conversion logic goes here
}
Enter fullscreen mode Exit fullscreen mode

在这个例子中，第一个例子没有告诉开发人员什么是from和什么是to，但是第二个例子让程序员很容易理解参数是什么，并描述了函数的作用。

5.遵循SoC原则

为了保持简洁有序，最好不要使用 JavaScript 直接添加样式。这被称为关注点分离 (SoC)。相反，请使用classListAPI 添加和删除类，并使用 CSS 定义样式规则。

这样，CSS 完成所有样式设置，而 JavaScript 处理应用程序的所有其他功能。

这种编程概念并非 JavaScript 独有，（SoC）关注点分离是一种分离功能且不混淆不同技术的实践。

简而言之：CSS 应该做 CSS 的事情，但 JavaScript 不应该做 CSS 的事情。

// ❌ Avoid using JavaScript for styling:
let element = document.getElementById('my-element')
element.style.color = 'red'

// ✅ Changing styles by adding/removing classes:
let element = document.getElementById('my-element')
element.classList.add('my-class')
Enter fullscreen mode Exit fullscreen mode

6. 避免使用全局变量

声明局部变量时，请使用let和const来防止覆盖全局变量。两者都会创建块级作用域的局部变量，但关键区别在于let可以重新声明，而const不能。因此，请根据您的具体需求明智地使用它们。

// ❌ Using var for variable declaration:
var x = 1

// ✅ Using let and const for variable declaration:
let x = 1
const y = 2
Enter fullscreen mode Exit fullscreen mode

7.使用for...of循环for

for...ofECMAScript 6 中引入的 语句是传统循环的更高效替代方案。for它内置了迭代器，无需定义变量和长度值。这使得你的代码更简洁，性能也更高。

// ❌ Using traditional for loop:
let cities = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix']
for (let i = 0; i < cities.length; i++) {
  const city = cities[i]
  console.log(city)
}

// ✅ Using for of loop:
let cities = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix']
for (const city of cities) {
  console.log(city)
}
Enter fullscreen mode Exit fullscreen mode

8. 坚持单一职责原则

遵守单一责任原则的一种方法是创建针对常见任务的辅助函数。

这些函数应该与上下文无关，以便可以从任何模块调用它们，从而增强代码的可重用性和模块性。

// ❌ Doing multiple tasks in one function:
function calculateOrderTotal (order) {
  let total = 0

  for (let i = 0; i < order.items.length; i++) {
    total += order.items[i].price * order.items[i].quantity
  }

  let tax = total * 0.07

  return total + tax
}

// ✅ Doing one task in one function:
function calculateSubTotal (items) {
  let total = 0

  for (let i = 0; i < items.length; i++) {
    total += items[i].price * items[i].quantity
  }

  return total
}

function calculateTax (total) {
  return total * 0.07
}

function calculateOrderTotal (order) {
  let subTotal = calculateSubTotal(order.items)
  let tax = calculateTax(subTotal)

  return subTotal + tax
}
Enter fullscreen mode Exit fullscreen mode

9. 理解类中缺少提升

与函数不同，JavaScript 中的类不会被提升，这意味着你需要在调用类之前声明它。乍一看，这可能有点违反直觉，尤其是如果你已经习惯了函数提升，但这是在 JavaScript 中使用类时必须理解和遵循的基本原则。

// ❌ Calling a class before declaration:
const hat = new Hat('Red', 1000)
hat.show()
class Hat {
  constructor (color, price) {
    this.color = color
    this.price = price
  }
  show () {
    console.log(`This ${this.color} hat costs $${this.price}`)
  }
}

// ✅ Calling a class after declaration:
class Hat {
  constructor (color, price) {
    this.color = color
    this.price = price
  }
  show () {
    console.log(`This ${this.color} hat costs $${this.price}`)
  }
}

const hat = new Hat('Red', 1000)
Enter fullscreen mode Exit fullscreen mode

10. 避免改变函数参数

直接修改对象的属性或作为函数参数传递的数组的值可能会导致不良的副作用和难以追踪的错误。请考虑返回一个新的对象或数组。这种做法非常符合函数式编程的原则，即不变性是关键。

// ❌ Mutating function arguments:
function updateName (user) {
  user.name = 'bob'
}

let user = { name: 'alice' }
updateName(user)
console.log(user) // { name: 'bob' }

// ✅ Avoid mutating function arguments, return new object instead:
function updateName (user) {
  return { ...user, name: 'bob' }
}

let user = { name: 'alice' }
let updatedUser = updateName(user)
console.log(user) // { name: 'alice' }
console.log(updatedUser) // { name: 'bob' }
Enter fullscreen mode Exit fullscreen mode

11.正确处理承诺

在 JavaScript 的异步世界中，Promise 是一个普遍的概念。然而，必须正确处理它们才能防止出现意外行为。JavaScript 提供了一个try...catch块，可用于处理异步代码执行期间可能出现的异常。

这样，您可以确保捕获错误并进行适当的处​​理，从而保持代码的稳健性。

// ❌ Not handling promises correctly:
async function fetchData () {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  const data = await response.json()

  return data
}

// ✅ Handling promises correctly:
async function fetchData () {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
    const data = await response.json()

    return data
  } catch (error) {
    // Handle your errors here...
    throw new Error(error)
  }
}
Enter fullscreen mode Exit fullscreen mode

12. 避免代码过度嵌套

这是初学者最常犯的错误之一，他们将一个块嵌套到另一个块中，一个循环套for loop着另一个循环，如此反复。if.elsetry catch

一旦你知道了，你就会发现情况相当混乱，你不知道代码到底起什么作用，也不知道在哪里可以找到负责你所寻找的代码。

调试这种类型的代码可能相当困难和繁琐，当其他程序员看到它时，你也会让他们感到困惑，更不用说你会散发出“不专业”的感觉。

// ❌ Nesting code blocks too much and not using the return keyword
function checkNumber (num) {
  if (num > 0) {
    console.log('Number is positive.')
  } else {
    if (num < 0) {
      console.log('Number is negative.')
    } else {
      console.log('Number is zero.')
    }
  }
}

// ✅ Using the return keyword instead of the else statement
function checkNumber (num) {
  if (num > 0) {
    console.log('Number is positive.')
    return
  }

  if (num < 0) {
    console.log('Number is negative.')
    return
  }

  console.log('Number is zero.')
}
Enter fullscreen mode Exit fullscreen mode

13. 优化 for 循环

JavaScript 中有一种常见的编写 for 循环的方式，下面是大多数开发人员在 JavaScript 中编写循环的示例

var languages = ['Python', 'JavaScript', 'C++', 'Ruby'];
for(var i=0;i<languages.length;i++){
  codeIn(languages[i]);
}
Enter fullscreen mode Exit fullscreen mode

对于像这样的小数组，这种循环效率很高并且运行没有任何问题，但是当涉及更大的数据集和具有数千个索引的数组时，这种方法会减慢循环过程。

发生的情况是，当你运行时languages.length，每次循环运行时都会重新计算数组的长度，并且数组越长，每次循环运行时重新计算数组长度的效率就越低，尤其是当数组的长度是静态的时候，在大多数情况下都是如此。

您应该做的是将数组长度存储在不同的变量中，并在循环中使用该变量，例如：

var languages = ['Python', 'JavaScript', 'C++', 'Ruby'];
var langCount = languages.length;
for(var i=0;i<langCount;i++){
  codeIn(languages[i]);
}
Enter fullscreen mode Exit fullscreen mode

通过此调整，“length”属性仅被访问一次，并且我们将存储的值用于后续迭代。这提高了性能，尤其是在处理大型数据集时。

另一种优雅的方法是在循环前语句中声明第二个变量：

var languages = ['Python', 'JavaScript', 'C++', 'Ruby'];
for(var i=0, n=languages.length; i<n; i++){
  codeIn(languages[i]);
}
Enter fullscreen mode Exit fullscreen mode

在这种方法中，第二个变量“n”在循环前语句中捕获数组的长度，从而更简洁地实现相同的结果。

结论

请记住，这些实践不仅是为了编写更清晰、结构更好的代码，也是为了生成更易于维护和调试的代码。

软件开发是一个持续的过程。创建开发代码只是软件生命周期的第一步。在生产阶段持续监控、调试和改进代码至关重要。

好了，以上就是提升你编程水平的 13 条 JavaScript 最佳实践。无论你是初学者还是经验丰富的开发者，养成这些习惯都能帮助你编写出更好、更高效、更易于维护的代码。祝你编程愉快！

文章来源：https://dev.to/dcodes/write-better-code-by-following-these-javascript-best-practices-25mp
Devto 翻译
PREV
抓取一切！用 Python 和 Go 构建 Web 爬虫
NEXT
使用 Node.js 和 Express 构建后端