需要在js中避免的几个常见错误

需要在js中避免的10个常见错误

误解变量作用域

在我们的代码的特定区域中，变量的可访问性被称为变量范围，这是编程中的一个基本概念。对变量范围的误解是JavaScript中最常见的编程错误之一，它会导致意想不到的行为，使得调试非常困难。

让我们看看一些代码示例，以便更好地理解变量范围：

var x = 10;

function foo() {
  var x = 5;
  console.log(x);
}

foo();
console.log(x);
1
2
3
4
5
6
7
8
9

在本例中，全局变量 x 的值为10，函数foo()内有一个内部变量 x的值5。
在执行此代码时，会打印出5和10。

因为局部变量 x 在函数 foo() 内部优先于全局变量 x .当我们在函数foo()内部打印x时，使用的是局部变量。当我们在函数foo()外边打印x 时，使用的是全局变量的值。

我们可以使用不同的变量名称来防止全局和局部变量命名重复的问题。例如：

var x = 10;

function foo() {
  var y = 5;
  console.log(y);
}

foo();
console.log(x);
1
2
3
4
5
6
7
8
9

另一个常见的错误是没有使用适当的关键字来声明一个变量。比如：

function foo() {
  x = 5;
  console.log(x);
}

foo();
console.log(x);
1
2
3
4
5
6
7

在本例中，在局部变量的声明中略去了var、let或const关键字。导致在foo函数内定义了一个全局变量x。

我们应该始终使用适当的关键字声明变量来防止这个错误，例如：

function foo() {
  let x = 5;
  console.log(x);
}

foo();
console.log(x);
1
2
3
4
5
6
7

不使用严格模式

在JavaScript开发中，不使用严格的模式是一个经常出现的错误，它会产生意想不到的结果，使代码更难以调试。以下是一些未使用严格模式可能存在问题的情况：

无意中创建全局变量

function myFunction() {
  myVar = 10;
}
myFunction();
console.log(myVar); // 10
1
2
3
4
5

使用保留的关键字作为变量名称

function myFunction() {
  var let = "Hello";
  console.log(let);
}
myFunction();  // 在严格模式会报错
1
2
3
4
5

为只读属性分配值

var obj = {};
Object.defineProperty(obj, "x", { value: 0, writable: false });

obj.x = 1; // 在严格模式会报错
1
2
3
4

只需在我们的JavaScript代码的开头插入以下语句，就可以使用严格的模式：

'use strict';
1

不使用适当的变量命名

不使用适当的变量命名约定是JavaScript中的一个常见错误，可能会导致混淆、可读性问题，并使代码更难以维护。在JavaSoript中遵循命名约定，可以提高代码的可读性和清晰度以及整体质量。

下面是不适当使用命名的一些例子，以及它如何引起问题:

使用不常用的缩写或缩略语

// Bad example
function calcNum(num1, num2) {
  return num1 + num2;
}

// Good example
function calculateSum(number1, number2) {
  return number1 + number2;
}
1
2
3
4
5
6
7
8
9

使用过于简短的变量或函数名称

// Bad example
let x = 5;
function f(a, b) {
  return a + b;
}

// Good example
let counter = 5;
function sumValues(value1, value2) {
  return value1 + value2;
}
1
2
3
4
5
6
7
8
9
10
11

不使用驼峰命名

// Bad example
let firstname = "John";
function displayname(firstname) {
  console.log(firstname);
}

// Good example
let firstName = "John";
function displayName(firstName) {
  console.log(firstName);
}
1
2
3
4
5
6
7
8
9
10
11

遵循适当的命名标准使代码更容易理解和维护。这也可以提高团队的生产率和代码质量，使其他开发人员更容易理解和使用源代码。

不使用正确的错误处理

错误处理是预测和响应在代码执行期间可能发生的错误的过程。通过在JavaScript中实现正确的错误处理，开发人员可以提高代码的可靠性，并确保即使发生错误也能顺利运行。

以下是一些错误处理不当的事例及其潜在影响：

不捕捉和处理错误

// Bad example
try {
  // 异常代码
} catch (e) {
  // 不处理
}

// Good example
try {
 // 异常代码
} catch (e) {
  console.error(e);
  // 错误处理
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

错误示例中的代码抛出一个错误，但是它没有被检测到或以任何方式处理，这可能导致不稳定的行为甚至崩溃。另一方面，通过将错误打印到控制台并采取必要的操作来管理错误，能更好的识别和正确处理错误。

不提供信息错误消息

// Bad example
function divide(a, b) {
  return a / b;
}

// Good example
function divide(a, b) {
  if (b === 0) {
    throw new Error('Divide by zero error');
  }
  return a / b;
}
1
2
3
4
5
6
7
8
9
10
11
12

如果b参数是0，函数将返回一个NaN，这并不是很有帮助。

不使用finally块

// Bad example
try {
  // some code
} catch (e) {
  // handle error
} finally {
  // some more code
}

// Good example
try {
  // some code
} catch (e) {
  // handle error
} finally {
  // cleanup code
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在糟糕的示例中,最后一个块–它不是设计来这样做的–被用来运行尝试和捕获块之后的附加代码。好示例中的最后一个块用于执行清除代码，无论是否发生错误,都应该始终执行清除代码。

通过正确地使用finally块,捕捉和处理错误，给出具有启发性的错误信息，实现有效的错误处理，这些问题是可以避免的。开发人员可以通过合并有效的错误处理，使他们的代码可靠，可维护，并避免出人意料的错误。

错误使用回调函数

对回调函数的不当使用可能会导致内存泄漏和过度嵌套等问题。

使用同步代码代替异步代码

// Bad example
function getData() {
  const data = fetchData();
  return data;
}

// Good example
function getData(callback) {
  fetchData(function(data) {
    callback(data);
  });
}
1
2
3
4
5
6
7
8
9
10
11
12

getData以同步方式检索数据,这可能会减缓应用程序的速度并导致阻塞困难。因此在获取数据的时候应该使用一个回调函数异步检索数据。

过度使用嵌套回调

// Bad example
function loadData(callback) {
  fetchData1(function(data1) {
    fetchData2(function(data2) {
      fetchData3(function(data3) {
        callback(data1, data2, data3);
      });
    });
  });
}

// Good example
function loadData(callback) {
  const results = {};
  const handleResult = (key, data) => {
    results[key] = data;
    if (Object.keys(results).length === 3) {
      callback(results);
    }
  };
  fetchData1(data => handleResult('data1', data));
  fetchData2(data => handleResult('data2', data));
  fetchData3(data => handleResult('data3', data));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在糟糕的示例中，嵌套回调被使用，这可能导致"回调地狱"–过度的分层，使代码难以理解和维护。这个好例子中的loaData()函数避免嵌套回调,，更好地利用promise设计模式。

不处理回调中的错误

// Bad example
function processData(data, callback) {
  try {
    // 异常代码
  } catch (e) {
    console.error(e);
  }
  callback(data);
}

// Good example
function processData(data, callback) {
  try {
    // 异常代码
  } catch (e) {
    console.error(e);
    callback(null, e);
    return;
  }
  callback(data);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

正确地使用JavaScript中的回调函数来防止这些问题是至关重要的。这包括在适当的时候使用异步代码，避免过度嵌套，以及管理回调中的错误。开发人员可以通过有效地使用回调函数来提高程序的稳定性和可维护性。

不使用 ===

使用==操作符而不是使用===操作符是开发人员经常犯的一个错误。==操作符比较值，但也进行类型转换，或在执行比较之前试图将值转换为普通类型。代码中的意外结果和缺陷可能由此产生。

例如：

let x = "5";
let y = 5;
if (x == y) {
  console.log("x = y");
} else {
  console.log("x != y");
}
1
2
3
4
5
6
7

尽管x是一个字符串，y是一个数字,但是这个代码的输出将是"x=y"。这是因为在执行比较之前，==操作符将字符串"5"转换为一个数字。

如果想避免这种错误的话，使用===操作符进行严格比较是一个理想的选择。

不了解异步编程

JavaScript的一个关键难点是异步编程，它使我们能够创建在后台运行的程序，因为我们的程序的其他部分将继续运行。对于发送网络请求或处理大量数据等耗时任务的管理，这可能非常有帮助。如果不能正确理解，也会导致误解和错误。

有时我们会尝试编写同步代码，而没有使用异步编程。异步代码的操作方式不同于同步代码，在进入下一个步骤之前不会等待任务完成。同步代码是线性处理，一次一个语句.

以下代码使用fetch发送异步http请求：

console.log("Before fetch");

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

console.log("After fetch");
1
2
3
4
5
6
7

当我们第一次看这个代码时，可能会觉得打印是：

Before fetch
{data}
After fetch
1
2
3

然而,由于获取请求的异步性质，实际输出将是:

Before fetch
After fetch
{data}
1
2
3

如果不正确理解,这可能是混乱和错误的来源,因为开发人员可能试图在异步上下文中创建同步代码,这可能导致问题和意外行为。

了解JavaScript的异步编程模型是避免这种常见错误的关键。异步的任务应该通过回调、async/await以及·promise·等方法正确地处理。密切关注语句执行的顺序,，确保代码适当地处理异步响应，也是至关重要的。

不回避全局性

全局变量的使用是JavaScript开发人员所犯的最大错误之一。全局变量可以从代码中的任何地方访问，因为它们是在任何函数或块之外定义的。虽然全局变量可能是有用的，但它们也可能导致一些问题,如名称冲突、安全性缺陷等。

比如：

let counter = 0;

function increment() {
  counter++;
}

function decrement() {
  counter--;
}

increment();
decrement();
console.log(counter);
1
2
3
4
5
6
7
8
9
10
11
12
13

在这个例子中，counter变量被定义为一个全局变量，可在 increment()和 decrement()方法中使用。虽然这个代码看起来是无害的，但是如果代码的其他部分用相同的名称定义变量，可能会引起问题,导致命名冲突和意外行为。

为了避免这种常见的错误，至关重要的是要尽可能缩小变量的范围。我们应该在函数或块的范围内定义使用的变量，而不是使用全局变量。这可以通过使用let和const关键词定义块局部变量，或者通过将我们的代码封装到立即调用的函数表达式中来建立一个作用域。

(function() {
  let counter = 0;

  function increment() {
    counter++;
  }

  function decrement() {
    counter--;
  }

  increment();
  decrement();
  console.log(counter);
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这个例子定义的变量counter，能在 increment() 和 decrement()函数中使用。这防止名称与代码的其他部分发生冲突，并确保变量不能从作用域之外访问。

不使用const定义常量

一些程序员在编写JavaScript代码时犯的另一个常见错误是没有使用const关键字来定义常量。

常量应始终使用const声明，以避免无意中改变不应该改变的值。例如,以下代码：

let PI = 3.14;
PI = 3.14159;
console.log(PI);
1
2
3

在此代码中，使用let声明变量PI。在这种情况下的值是可以改变的。如果我们想确保圆周率不能被修改,我们应该使用相应的方法，就像下面的代码一样：

const PI = 3.14;
PI = 3.14159;
console.log(PI);
1
2
3
4

我们试图重新分配一个常量值，如果我们尝试运行这个代码,我们将会遇到错误。

使用const定义常量能让人们明白一个值不应该被更改，有助于避免无意的改变。

总结

总之，JavaScript是一种强有力的语言，它为开发人员提供了大量的灵活性和多样性。然而，巨大的力量也伴随着巨大的责任，我们在本文中谈到的错误是很简单的。这些错误无论是由于缺乏对变量范围的理解，错误处理不当，还是我们讨论过的任何其他错误，都可能严重损害我们的代码。不过我们可以了解并坚持最佳实践来避免这些陷阱，并开发出更清洁、更有效和无错误的代码。