写好 Javascript 的 14 个技巧

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为 false，在非严格相等运算符的情况下会错误地等于 false。

// ❌ 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.尽早 return

嵌套条件使代码难以理解，但您可以通过提前返回来使用 guard 子句轻松避免它。

Guard 子句将允许您删除大部分 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 在数组、对象、字符串上提供了许多内置函数。

查找并学习它们，以享受提供的全部功能。

// ❌ 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. 为人编写代码，而不是为计算机编写代码

让我们假设一下，我们大多数人都不善于注意到差异，我们可能需要几秒钟才能注意到逻辑非（！

让我们举个例子：

对象篇

模块化编程-自研模块加载器