现代 JavaScript 最佳实践 - 第 1 部分

毫无疑问，JavaScript 是世界上最常用的编程语言，对我们日常生活中最重要的技术之一：互联网有着巨大的影响。这种力量伴随着巨大的责任，而 JavaScript 生态系统一直在快速发展，因此很难跟上最佳实践。

在本文中，我们将探索现代 JavaScript 中的一些最佳实践，以编写更清晰、可维护且高效的代码。

1、项目规则最重要

每个项目可能都有特定的规则来维护代码一致性。这些规则将始终优先于任何外部建议，包括本文中的建议。在项目中实施实践之前，请确保它符合既定规则并且所有团队成员都同意。

2.使用更新的JavaScript

自 1995 年创建以来，JavaScript 已经发生了巨大的发展。您在互联网上找到的许多旧做法可能已经过时了。在实施一项技术之前，请验证它是否与该语言的当前版本兼容。

3.使用let和const代替var

尽管 var 仍然有效，但它的使用被认为已过时，并且在许多情况下，由于其功能范围，可能会引入难以追踪的错误。另一方面，let 和 const 给我们一个更加可预测和安全范围，仅限于声明它们的块。

什么时候用let，什么时候用const？

• 只要变量不更改其引用或值，就使用 const。这使您的代码更易于理解，并通过保护不可变值来减少错误。
• 如果将来需要重新分配变量的值，请使用 let，但仅在必要的情况下。

黄金法则： 默认使用 const。如果稍后需要更改该值，请切换到 let。

实际例子

1. const 表示常量值：

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

1. let 用于更改值：

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

1. 范围比较（let 与 var）：

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

1. 避免循环和回调问题：

使用 var，你可能会在循环中出现意想不到的行为，尤其是在异步函数中：

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

让我们解决这个问题：

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

用 let 和 const 替换 var 不仅是一个好的实践，而且还有助于使你的代码更安全、更易读、更容易调试。让未来感谢你。

4. 选择类：JavaScript 的简单性

在 JavaScript 中使用 Function.prototype 进行面向对象编程是一种较旧且经常容易出错的方法。相反，ES6 中引入的 classes 提供了更直观的语法，更接近其他面向对象语言，有利于代码的可读性和可维护性。

类示例（现代且清晰）：

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

与 Function.prototype 的比较（复杂且不太直观）：

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

如您所见，基于原型的方法需要更多步骤来定义方法，并且对于经验不足的开发人员来说可能会更加混乱。类不仅更容易阅读，而且还可以促进更清晰、更模块化的代码。

为什么使用类？ ​​

• 更具可读性且不易出错。
• 它们通过扩展和 super 的使用促进继承。
• 与现代工具和 ES6 标准更兼容。

5. 在 JavaScript 中使用真正的私有字段

长期以来，JavaScript 开发人员使用下划线 (_) 等约定来模拟类中的私有字段。然而，这只是一种视觉约定，因为仍然可以从类外部访问这些属性。现在，多亏了真正的私有字段，我们可以保证某些属性完全无法从外部访问。

⚠️ 注意：此功能在某些浏览器的控制台中可能不可用。

为什么要使用真正的私有字段？

1. 真实封装：保护您的数据并确保它无法在类上下文之外被访问或修改。
2. 可读性：使用 # 前缀可以明确哪些属性是私有的，从而提高代码理解能力。
3. 数据安全：防止意外错误或无意访问内部属性。

基本示例：

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

高级示例：受保护的计数器

想象一下，您想要创建一个类来记录页面的访问次数，但您不希望任何人能够直接操作该计数器。

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

在这种情况下，#visits 计数器完全免受外部访问，这保证了其值不会被不当操纵。

注意事项

• 私有字段即使是子类也无法访问。
• 如果您需要与继承中的私有数据交互，请考虑使用受保护的方法而不是私有字段。

6.使用箭头功能

箭头函数是用 JavaScript 编写函数的一种现代而优雅的方式。它们提供更短的语法，并且与传统函数不同， 自动继承 this 的上下文，这避免了面向对象编程中的常见问题。

它们在高阶函数中特别有用，例如map、filter和reduce，我们需要将函数作为参数传递。

为什么要使用箭头函数？

1. 更短、更清晰的语法：非常适合保持代码更具可读性。
2. 此自动的上下文： 完美避免回调或方法中的错误。
3. 在内联函数中的理想用途： 就像我们在地图、过滤器或事件中使用的函数一样。

实际例子

1.用map来变换数组

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

2.带过滤器的滤芯

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

3.用reduce来加值

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

4. 在 DOM 事件中（注意上下文！）

当我们在事件中使用箭头函数时，this 上下文不会改变，这很有用：

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 0, 1, 2
}

提示：何时不使用它们

虽然箭头函数很棒，但它们并不适合所有情况。在需要访问函数上下文本身的情况下，例如在使用动态 this 的函数中或者需要在原型中编写方法时，请避免使用它们。

普通函数更好的示例：

class Persona {
  constructor(nombre) {
    this.nombre = nombre;
  }

  obtenerNombre() {
    return this.nombre;
  }
}

const persona = new Persona('Juan');
console.log(persona.obtenerNombre()); // 'Juan'

如果将 print 更改为箭头函数，您将丢失其上下文。

让我们改进该部分！我添加了一些上下文、更清晰的解释和一些额外的示例，以使其更加完整和有用。

7. 空合并运算符 (??)

空合并运算符 (??) 是逻辑运算符 || 的更精确替代方案分配默认值。而||认为“falsy”是诸如0、false或“”之类的值，运算符?? 仅将 null 或 undefined 评估为“缺失”值。这使其在许多情况下成为更安全、更具体的选项。

主要区别是什么？

使用||，任何“假”值都将被默认值替换。

与??，仅替换为空或未定义的值。这允许您保留“假”值，例如 0 或“”（如果它们在您的上下文中有效）。

基本示例：

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

另一方面，使用 ||:

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

实际案例与??

• 设置默认值而不覆盖有效值：

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

• 验证可选配置：

假设您有一个允许您自定义选项的系统：

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

• 使用可选属性时避免错误：

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 0, 1, 2
}

以上是现代 JavaScript 最佳实践 - 第 1 部分的详细内容。更多信息请关注PHP中文网其他相关文章！