常见编写JavaScript代码时容易出现的错误（3）

---

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

---

前言

当编写JavaScript代码时，常常会出现一些容易犯的错误，这些错误可能导致程序运行失败或产生不符合预期的结果。以下是一些常见的JavaScript编程错误，以及如何识别和解决它们。

1.不合理的大型库依赖（Unwarranted Large Library Dependencies）

过于依赖庞大的JavaScript库或框架可能会导致性能问题和不必要的复杂性。

错误示例

// 引入大型框架，但只使用其中的一小部分功能
import * as React from 'react';

// 仅仅需要一个简单的DOM操作
1
2
3
4

解决方法

根据项目的需求和规模，选择合适的库或框架，并仅引入需要的部分，以减少项目的依赖和复杂性。

// 仅引入需要的部分
import React from 'react';

// 或者考虑不使用框架，使用纯JavaScript进行开发
1
2
3
4

2.缺乏注释和文档（Lack of Comments and Documentation）

缺乏注释和文档可能会导致代码难以理解，特别是对于其他开发人员或未来的自己。

错误示例

function calculateTotal(price, quantity) {
  return price * quantity;
}
1
2
3

解决方法

在关键部分的代码上添加注释，以解释代码的用途和工作原理，并创建文档来描述函数、模块和API的用法和参数。

/**
 * 计算总价
 * @param {number} price - 商品价格
 * @param {number} quantity - 商品数量
 * @returns {number} - 总价
 */
function calculateTotal(price, quantity) {
  return price * quantity;
}
1
2
3
4
5
6
7
8
9

3.魔法数字和硬编码（Magic Numbers and Hardcoding）

魔法数字和硬编码是指在代码中直接使用数字或值而没有进行命名或注释。这会降低代码的可读性和维护性，并使代码更难以理解。

错误示例

function calculateArea(radius) {
  return 3.141592653589793238 * radius * radius;
}
1
2
3

解决方法

将数字和值命名为常量或变量，并为它们提供有意义的名称。这样可以提高代码的可读性和维护性。

const PI = 3.141592653589793238;

function calculateArea(radius) {
  return PI * radius * radius;
}
1
2
3
4
5

4.不合理的代码分块（Unwarranted Code Churning）

频繁地修改代码而没有充分的理由可能会引入错误和不稳定性。过多的代码更改会增加维护成本。

错误示例

// 没有充分理由的频繁代码修改
function someFunction() {
  // ...
}

// 后续代码修改
function someFunction() {
  // 修改了一些东西
}
1
2
3
4
5
6
7
8
9

解决方法

在对代码进行更改之前，确保有充分的理由和明确的目标。遵循版本控制最佳实践，使用版本控制工具（如Git）来跟踪和记录代码更改。

5.遗留代码未删除（Unused or Legacy Code）

保留未使用的或遗留的代码可能会增加代码库的复杂性，降低可维护性，而且可能会引入不必要的错误。

错误示例

function oldFunction() {
  // 遗留的未使用代码
}

function mainFunction() {
  // 主要功能代码
}
1
2
3
4
5
6
7

解决方法

定期审查代码库，删除未使用的或遗留的代码，以确保代码库的清晰性和简洁性。

6.忽略错误边界处理（Ignoring Error Boundaries）

在React等框架中，忽略错误边界可能导致应用程序的崩溃，而不提供有用的错误信息。

错误示例

class MyComponent extends React.Component {
  render() {
    // 渲染代码
  }
}
1
2
3
4
5

解决方法

在合适的地方使用错误边界（Error Boundaries），以捕获和处理组件中的错误，确保应用程序的稳定性。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, errorInfo) {
    // 处理错误
    this.setState({ hasError: true });
    // 记录错误到服务器
    logErrorToServer(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 显示错误界面或提示
      return <ErrorFallback />;
    }
    return this.props.children;
  }
}

class MyComponent extends React.Component {
  render() {
    // 渲染代码
  }
}

// 在使用 MyComponent 的地方包装 ErrorBoundary
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

7.不足的测试覆盖率（Insufficient Test Coverage）

不足的测试覆盖率可能导致潜在的代码问题未被发现，增加了代码的风险。缺乏测试通常会导致代码在生产环境中出现不稳定的行为。

错误示例

function add(a, b) {
  return a + b;
}
1
2
3

解决方法

编写足够的单元测试，覆盖代码的各个部分，以确保代码在不同情况下都能正确工作。

// 单元测试示例
test('add function', () => {
  expect(add(2, 3)).toBe(5);
  expect(add(-1, 1)).toBe(0);
  expect(add(0, 0)).toBe(0);
});
1
2
3
4
5
6

8.不合理的代码复杂度（Unwarranted Code Complexity）

过于复杂的代码结构和逻辑会增加代码的维护成本，降低可读性，并使代码更容易出错。

错误示例

function complexFunction(data) {
  for (var i = 0; i < data.length; i++) {
    if (data[i].isActive) {
      if (data[i].value > 10) {
        data[i].result = doSomething(data[i].value);
      } else {
        data[i].result = doAnotherThing(data[i].value);
      }
    }
  }
  // 更多复杂的代码...
}
1
2
3
4
5
6
7
8
9
10
11
12

解决方法

将代码分解为更小、更简单的函数或模块，遵循单一职责原则，以提高可读性和维护性。

function processItem(item) {
  if (item.isActive) {
    if (item.value > 10) {
      item.result = doSomething(item.value);
    } else {
      item.result = doAnotherThing(item.value);
    }
  }
}

function complexFunction(data) {
  data.forEach(processItem);
  // 更多简化的代码...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

9.不合理的异步操作管理（Unwarranted Asynchronous Complexity）

在处理异步操作时，过多的嵌套回调或过多的async/await可能会导致代码变得复杂和难以理解。

错误示例

async function fetchData() {
  try {
    const data1 = await fetchData1();
    const data2 = await fetchData2(data1);
    const data3 = await fetchData3(data2);
    // 更多异步操作...
  } catch (error) {
    console.error("Async error:", error);
  }
}
1
2
3
4
5
6
7
8
9
10

解决方法

使用Promise.all或其他异步控制流工具来处理并发异步操作，以减少嵌套和提高代码的可读性。

async function fetchData() {
  try {
    const [data1, data2, data3] = await Promise.all([
      fetchData1(),
      fetchData2(data1),
      fetchData3(data2),
      // 更多异步操作...
    ]);
  } catch (error) {
    console.error("Async error:", error);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

10.遗漏错误处理（Missing Error Handling）

在JavaScript代码中，遗漏错误处理可能导致未捕获的异常，使应用程序不稳定。

错误示例

try {
  // 可能会出错的代码
} catch (error) {
  // 没有错误处理
}
1
2
3
4
5

解决方法

始终在可能抛出异常的代码块中添加适当的错误处理，以防止未捕获的异常。

try {
  // 可能会出错的代码
} catch (error) {
  // 错误处理
  console.error("Error:", error);
}
1
2
3
4
5
6