wordpress自动分页,吴江seo,佛山企业做网站,基础微网站开发公司作为一个编程4年的的前端工程师#xff0c;一路走来踩过许多坑。希望我的经验能让你少踩些坑#xff0c;在编程的路上走的更顺些#xff01; 1. 禁用var声明
只使用const或let声明变量。并且首选const#xff0c;当一个变量需要重新赋值时#xff0c;才使用let。并且在创…作为一个编程4年的的前端工程师一路走来踩过许多坑。希望我的经验能让你少踩些坑在编程的路上走的更顺些 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; // true0; // 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 amulti-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 Anonymousif (user.role ADMIN) return Administratorreturn 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 Fooreturn Bar
}// ✅ 正确做法
function doSomething(params) {if (params?.filter) return Fooreturn 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。 不要为了炫技而写代码我们要写出每个人都能理解和调试的代码。
