作为一个编程4年的的前端工程师，一路走来踩过许多坑。希望我的经验能让你少踩些坑，在编程的路上走的更顺些！
1. 禁用var声明
只使用const或let声明变量。并且首选const，当一个变量需要重新赋值时，才使用let。并且在创建变量时就应该给变量赋值。
原因：
-
- var缺乏作用域的限制，很容易导致全局作用域污染，引发“命名冲突”和“错误赋值”等问题。
-
- var存在变量提升，可能导致在变量声明之前就使用变量，产生未定义的情况。
-
- var允许重复声明同一变量，容易导致意外修改已有变量的值，引发代码错误。
-
注意：我们最好在创建变量时就进行赋值，这样可以防止我们的代码出现，声明了变量但未赋值的情况。
代码示例：
var old = "";
const immutable = "John";
let counter = 1;
counter++;
const user = {firstname: "John", lastname: "Doe"};
const users = ["Mac", "Roe"];
2.使用严格相等运算符（===）
在进行相等比较时，只使用严格相等运算符（===）进行比较。
原因：
-
- 双等号（==）在进行类型比较时会默认进行类型转换，导致不同类型的值也可能被判定为相等。
-
- 严格相等运算符（===）不仅比较两个值的值，还会比较它们的数据类型。只有值和类型都相同时才会返回 true。
-
注意：在使用双等号进行0作为假值会错误地等于false，
代码示例：
1 == "1";
0 == false;
"" == 0;
null == undefined;
[1] == true;
"false" == false;
1 === 1;
1 === "1";
0 === false;
3.使用模板字符串来拼接内容
使用模板字符串（反引号标记）来拼接字符串，而不是使用加号（+）。
原因：
-
- 模板字符串允许在字符串中插入变量或表达式，使得代码更加清晰易读。
-
代码示例：
const name = 'Alice';
const age = 30;
const greeting = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';
console.log(greeting);
const multiLineString = 'This is a\nmulti-line\nstring.';
console.log(multiLineString);
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);
const multiLineString = ` This is a
multi-line
string. `;
console.log(multiLineString);
4.在语句末尾使用分号
在行末使用分号结尾是一种很好的习惯，虽然不使用分号，编译器也不会进行报错，但在我们项目越来越庞大代码越来越复杂时，分号可以帮助我们更好的理解代码。维护起来也会更加轻松。
以for循环为例：
代码示例：
for (let i = 0 i < numbers.length i++) {
console.log(numbers[i]);
}
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函数。我们需要精通并掌握它们，这样让我们写起代码时来事半功倍。
代码示例：
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. 可读性代码胜过聪明代码
：给前端小白的11个建议（少走弯路）
400 186 1886
