作为一个编程4年的的前端工程师，一路走来踩过许多坑。希望我的经验能让你少踩些坑，在编程的路上走的更顺些！
image.png
1. 禁用var声明
只使用const或let声明变量。并且首选const，当一个变量需要重新赋值时，才使用let。并且在创建变量时就应该给变量赋值。
原因：
- var缺乏作用域的限制，很容易导致全局作用域污染，引发“命名冲突”和“错误赋值”等问题。
- var存在变量提升，可能导致在变量声明之前就使用变量，产生未定义的情况。
- var允许重复声明同一变量，容易导致意外修改已有变量的值，引发代码错误。
注意：我们最好在创建变量时就进行赋值，这样可以防止我们的代码出现，声明了变量但未赋值的情况。
代码示例：
// ❌ 错误做法
var old = "";
// ✅ 正确做法
const immutable = "John";
let counter = 1;
counter++; // counter === 2;
// 将对象和数组声明为const，以防止类型更改
const user = {firstname: "John", lastname: "Doe"};
const users = ["Mac", "Roe"];
2.使用严格相等运算符（===）
在进行相等比较时，只使用严格相等运算符（===）进行比较。
原因：
- 双等号（==）在进行类型比较时会默认进行类型转换，导致不同类型的值也可能被判定为相等。
- 严格相等运算符（===）不仅比较两个值的值，还会比较它们的数据类型。只有值和类型都相同时才会返回 true。
注意：在使用双等号进行0作为假值会错误地等于false，
代码示例：
// ❌ 错误做法
1 == "1"; // true
0 == false; // true
"" == 0; // true
null == undefined; // true
[1] == true; // true
"false" == false; // false
// ✅ 正确做法
1 === 1; // true
1 === "1"; // false
0 === false; // false
3.使用模板字符串来拼接内容
使用模板字符串（反引号标记）来拼接字符串，而不是使用加号（+）。
原因：
- 模板字符串允许在字符串中插入变量或表达式，使得代码更加清晰易读。
代码示例：
const name = 'Alice';
const age = 30;
// ❌ 错误做法
// 字符串拼接
const greeting = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';
console.log(greeting); // Hello, my name is Alice and I am 30 years old.
// 多行字符串（使用\n换行）
const multiLineString = 'This is a\nmulti-line\nstring.';
console.log(multiLineString); // This is a // multi-line // string.
// ✅ 正确做法
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // Hello, my name is Alice and I am 30 years old.
// 多行字符串
const multiLineString = ` This is a
multi-line
string. `;
console.log(multiLineString);
//This is a
// multi-line
// string.
4.在语句末尾使用分号
在行末使用分号结尾是一种很好的习惯，虽然不使用分号，编译器也不会进行报错，但在我们项目越来越庞大代码越来越复杂时，分号可以帮助我们更好的理解代码。维护起来也会更加轻松。
以for循环为例：
代码示例：
// ❌ 错误做法
for (let i = 0 i < numbers.length i++) {
console.log(numbers[i]);
} // 报错：Uncaught SyntaxError: Unexpected identifier
// ✅ 正确做法
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
在上面的示例中，缺少分号会导致编译器认为它是一个表达式，但是它实际上是三个独立不同的表达式，这样的结果就是会引起报错。
5. 使用对象代替多个参数
在定义函数时，给函数定义多个参数的做法是很愚蠢的一种写法，因为，当需要传的参数变的很多很复杂时，代码的阅读和维护就变的很困难，而使用对象参数是一种很好的替代方案。
代码示例：
// ❌ 错误做法
function avatarUrl(avatar, format = "small", caption = true,) {
//函数内容
}
avatarUrl(user.avatar, 'thumb', false)
当我们在使用上面这个函数时，很难知道哪些参数被使用了以及他的含义是什么。例如上面avatarUrl的最后一个参数false，就很难让人理解它代表的是什么意思呢？
所以我们在维护时，必须要阅读完函数的定义才能知道他的每个参数代表什么意思。而且当我们需要改变参数的顺序时，不得不改变所有地方的函数调用。
但是如果我们使用对象来传参，一个顺序的改变并不会影响到所有地方的调用：
// ✅ 正确做法
function avatarUrl(avatar, options={format: 'small', caption: true}) {
// 函数内容
}
avatarUrl(user.avatar, {
caption: false ,
format: "thumb"
})
6. 利用提前返回简化逻辑
在编写代码时，我们经常会用到if/else来进行判断，而且可能会进行多层嵌套，但是过多过深的嵌套会使的我们的代码可读性变差并且很难维护，所以我们使用return来解决这个问题。
提前返回可以减少大量的不必要的else条件，提高代码的可读性
代码示例：
// ❌ 错误做法
function doSomething() {
if (user) {
if (user.role === "ADMIN") {
return 'Administrator';
} else {
return 'User';
}
} else {
return 'Anonymous';
}
}
// ✅ 正确做法
function doSomething() {
if (!user) return 'Anonymous'
if (user.role === "ADMIN") return 'Administrator'
return 'User'
}
7. 熟练掌握内置函数
JavaScript给我们提供了许多内置的Array、Object、String函数。我们需要精通并掌握它们，这样让我们写起代码时来事半功倍。
代码示例：
//我们要过滤掉admin属性值为false的对象
// ❌ 错误做法
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
}
// ✅ 正确做法
function getAdmins() {
return users.filter((user) => user.admin)
}
8.禁止使用缩写
当初学者在刚开始编写代码时，很容易为了贪图方便和快，就用缩写来进行命名，虽然这样是方便的当时的工作，但是却为后期的维护埋下了定时炸弹。让后续的代码阅读和维护变的难上加难。
// ❌ 错误做法
function someFunction() {
events.forEach(e => {
e.tickets.forEach(t => {
`${e.name} for ${t.full_name}`
})
})
}
// ✅ 正确做法
function someFunction() {
events.forEach(event => {
event.tickets.forEach(ticket => {
`${event.name} for ${ticket.full_name}`
})
})
}
很明显的是，在下面的例子中我们在阅读和维护时都不用猜测参数e和t代表什么意思和作用，根据命名就可以知道它的作用和含义。极大的提高了代码的可读性和后期的维护。
9. 使用可选链操作符(?.)来代替&&的前置非空判断
在遇到对象的某个属性可能为空(null)或者不存在(undefined)时，我们都要提前对对象进行判空，很多人第一时间都会想到使用&&进行前置非空判断，但是其实遇到这种情况，我们使用可选链操作符(?.也能达到一样的效果，并且可读性更强。
示例1：
// ❌ 错误做法
function doSomething(params) {
if (params && params.filter) return 'Foo'
return 'Bar'
}
// ✅ 正确做法
function doSomething(params) {
if (params?.filter) return 'Foo'
return 'Bar'
}
10. 用for...of代替for循环
传统的for循环需要我们手动创建索引变量并且需要根据条件判断来进行递增/递减操作，而for...of内置了一个迭代器可以自动帮我们遍历数组中的所有值，这样我们的代码可以变的更加简洁，也可以减少手动操作出差的情况。
let users = ["Fedor Emelianenko", "Cyril Gane", "Conor McGregor"];
// ❌ 错误做法
// 这样可以避免在每次迭代时重新评估长度
let usersCount = users.length;
for (let i = 0; i < usersCount; i++) {
console.log(users[i]);
}
// ✅ 正确做法
for(let user of users) {
console.log(user);
}
11. 可读性代码胜过聪明代码
- 永远记住，我们写的代码是给其他开发人员以及未来的自己看的。我们编写的代码的目的是为了解决某个问题，而不是让我们的代码成为一个问题（bug）。
- 不要为了炫技而写代码，我们要写出每个人都能理解和调试的代码。
该文章在 2024/3/29 23:57:28 编辑过
