大家好，我是宝哥
翻译一篇DEV社区上写的比较好的文章，欢迎指正。
译者：宝哥，公众号：前端开发博客
原文作者：Melvinvmegen
https://dev.to/melvinvmegen/14-tips-to-write-better-javascript-gj0
以下为译文：
这里介绍了我最喜欢的一些技巧来写更好的JavaScript代码,跳过聪明保持简单。
1.忘记var
声明所有的变量使用const或let。一般情况下使用const,如果变量需要重新赋值则使用let。
应避免使用var关键字,因为它几乎没有作用域,很容易产生作用域问题。
//编辑:qdkfweb.cn 公众号：前端开发博客
// ❌ 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.严格比较等值性
使用===运算符进行绝对等值比较,而不要使用==操作符,因为===运算符会认真对待数据类型。
//编辑:qdkfweb.cn 公众号：前端开发博客
// ❌ Avoid this
1 == "1"; // true
0 == false; // true
// ✅ Do this
1 === 1; // true
1 === "1"; // false
0 === false; // false
3.避免基本类型值的构造器
避免为基本类型值如字符串、数字、布尔值使用构造器,这会产生对象而不是基本类型值。
//编辑:qdkfweb.cn 公众号：前端开发博客
// ❌ 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.使用对象字面量
对象字面量比 new Object() 更清晰,创建数组也使用数组字面量[]而不是new Array()。
//编辑:qdkfweb.cn 公众号：前端开发博客
// ❌ 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.使用模板字符串连接字符串
避免使用+操作符连接字符串,而使用模板字符串${}。
//编辑:qdkfweb.cn 公众号：前端开发博客
const firstname = "John";
// ❌ Avoid this
let greeting = "Hello, " + firstname; // Hello, John
// ✅ Do this
greeting = `Hello, ${firstname}`; // Hello, John
6.使用分号结束语句
JavaScript会自动插入分号,但明确结束语句更好。
以for循环为例：
//编辑:qdkfweb.cn 公众号：前端开发博客
// ✅ Do this
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
您将无法执行以下操作，因为解析器认为它是一个表达式，而实际上它是三个独立的表达式：
//编辑:qdkfweb.cn 公众号：前端开发博客
// ❌ Not this
for (let i = 0 i < numbers.length i++) {
console.log(numbers[i]);
} // Uncaught SyntaxError: Unexpected identifier
7.使用对象参数代替多个参数
避免定义太多参数,而使用一个对象参数更清晰。
例如：
//编辑:qdkfweb.cn 公众号：前端开发博客
// ❌ Avoid this
function avatarUrl(avatar, format = "small", caption = true) {
// Does something
}
avatarUrl(user.avatar, 'thumb', false)
当您使用此函数时，很难知道使用了哪些参数以及如何使用。最后一个参数false在这里代表什么？
不知道，我们必须打开函数定义才能知道。 如果您需要更改参数的顺序会发生什么？那么您必须更改所有函数调用。
对于对象来说，顺序并不重要：
//编辑:qdkfweb.cn 公众号：前端开发博客
// ✅ Do this
function avatarUrl(avatar, options={format: 'small', caption: true}) {
// Does something
}
avatarUrl(user.avatar, {
format: "thumb",
caption: false
})
8.尽早返回
使用guard clause提前返回,避免使用嵌套的if/else。
//编辑:qdkfweb.cn 公众号：前端开发博客
// ❌ 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内置函数
学习并利用数组、对象、字符串等的数据类型的内置方法,可简化操作。
//编辑:qdkfweb.cn 公众号：前端开发博客
// ❌ 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.考虑可读性
避免魔数、缩写以及不必要的逻辑非,让代码更易于理解。
//编辑:qdkfweb.cn 公众号：前端开发博客
const users = [
{
username: "JohnDoe",
admin: false
enabled: true
},
{
username: "Todd",
admin: true
enabled: true
},
];
// ❌ Avoid this
const members = users.filter(u => u.enabled).map(u => !u.admin)
const admins = users.filter(u => u.enabled).map(u => u.admin)
// ✅ Do this
const enabledUsers = users.filter(u => u.enabled)
const members = enabledUsers.map(u => !u.admin)
const admins = enabledUsers.map(u => u.admin)
使用变量定义而不是一个常量
//编辑:qdkfweb.cn 公众号：前端开发博客
// ❌ Avoid this
function price_with_taxes(price) {
return price * 1.2
}
// ✅ Do this
const taxRate = 1.2
function price_with_taxes(price) {
return price * taxRate
}
11.避免缩写
缩写难以理解,使用完整名称更清晰。无论您将“e”写为“event”，还是将“t”写为“ticket”，都不会提高您的工作效率，但会降低可读性并降低即时理解能力。
//编辑:qdkfweb.cn 公众号：前端开发博客
// ❌ Avoid this
function someFunction() {
events.forEach(e => {
e.tickets.forEach(t => {
`${e.name} for ${t.full_name}`
})
})
}
// ✅ Do this
function someFunction() {
events.forEach(event => {
event.tickets.forEach(ticket => {
`${event.name} for ${ticket.full_name}`
})
})
}
12.避免无用的&&否定条件
条件就像大脑的备忘录，因为您需要在逐步执行每一行代码时记住它们，以便了解发生了什么。
幸运的是，由于我最喜欢的 ES6 操作符可选链接，其中大多数都可以得到简化。
//编辑:qdkfweb.cn 公众号：前端开发博客
// ❌ Avoid this
function doSomething(params) {
if (params && params.filter) return 'Foo'
return 'Bar'
}
// ✅ Do this
function doSomething(params) {
if (params?.filter) return 'Foo'
return 'Bar'
}
//编辑:qdkfweb.cn 公众号：前端开发博客
// ❌ Avoid this
function doSomething(user) {
if (!user || !user.admin) {
// Case where no user or not admin
} else {
// Case where user and user is admin
}
}
// ✅ Do this
function doSomething(user) {
if (user && user.admin) {
// Case where user and user is admin
} else {
// Case where no user or not admin
}
}
13.使用for…of循环
for…of比for更清晰易读。
这个语法是 ES6 引入的，它包含一个内置的迭代器，这样你就不必定义自己的变量，将其递增直到某个长度值：
//编辑:qdkfweb.cn 公众号：前端开发博客
let users = ["Fedor Emelianenko", "Cyril Gane", "Conor McGregor"];
// ❌ Avoid this
// This avoids length behind reavaluated at every iteration
let usersCount = users.length;
for (let i = 0; i < usersCount; i++) {
console.log(users[i]);
}
// ✅ Do this
for(let user of users) {
console.log(users);
}
请注意它的可读性有多强！而且您不必关心所有这些 (let i = 0; i < usersCount; i++) 笨拙的逻辑，尽管您可能需要它用于某些特定的用例，例如不规则的间隔。
14.可读性胜过聪明
可维护性是首要考虑,聪明的代码难以理解且难以维护。
永远记住，您正在与其他开发人员以及未来的自己一起编写代码。您不想制造比编写代码要解决的更多问题。
不要编写代码来炫耀你的技能，编写每个人都可以理解和调试的代码。
如果您有更多提示，我很乐意在评论中向您学习！
把事情简单化！
译文完
