企业网站推广策划书,搜索引擎环境优化,wordpress+大附件,iis7 多个网站 80端口以下是我最喜欢的一些编写更干净的 Javascript 代码的技巧#xff0c;跳过聪明的保持简单。
1. 忘掉 var
使用 const 或 let 声明所有变量。根据经验#xff0c;默认情况下使用 const#xff0c;否则如果需要重新赋值变量#xff0c;请使用 let。
应避免使用 var 关键字…以下是我最喜欢的一些编写更干净的 Javascript 代码的技巧跳过聪明的保持简单。
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 Anonymousif (user.role ADMIN) return Administratorreturn 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. 为人编写代码而不是为计算机编写代码
让我们假设一下我们大多数人都不善于注意到差异我们可能需要几秒钟才能注意到逻辑非
让我们举个例子 const users [{username: JohnDoe,admin: falseenabled: true},{username: Todd,admin: trueenabled: 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) members 和 admins 分配的区别仅在逻辑非 如果您需要更改一个分配则还需要更改另一个分配。
另一个例子不要使用魔法数字。请改用显式变量 // ❌ 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还是为票证写 t 都不会提高你的工作效率但它确实会降低可读性并降低即时理解力。 // ❌ 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}})})
} 在这里您不必猜测 e 和 t 代表什么您只需阅读它即可。 编码非常复杂足以让你的大脑变得异常复杂。这也适用于变量、类、方法......
不过也有少数例外可以在 for 循环中使用像 i 这样广泛使用的缩写。
12.避免无用和否定的条件
条件就像你大脑的备忘录因为你需要在逐步执行每一行代码时记住它们以便了解发生了什么。
幸运的是由于我最喜欢的 ES6 运算符 optional它们中的大多数都可以简化。 // ❌ Avoid this
function doSomething(params) {if (params params.filter) return Fooreturn Bar
}// ✅ Do this
function doSomething(params) {if (params?.filter) return Fooreturn Bar
} 我不知道你是怎么想的但每次我看到一个逻辑非它都会让我的大脑停顿一秒钟对我来说阅读这样的东西感觉更自然
如果用户是管理员那么我们会这样做
而不是
如果用户不是管理员那么我们会这样做。 // ❌ 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 循环
使用 for...of 语句而不是经典的 for 循环就是这样一种 JavaScript 改进。
ES6 引入了这种语法它包含一个内置的迭代器因此您不必定义自己的变量而是将其递增直到达到某个长度值 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(user);
} 请注意它的可读性有多强而且你不必关心所有这些笨拙的逻辑let i 0;i usersCount;i尽管你可能需要它来处理某些特定的用例比如不规则的间隔。
14. 可读代码胜过聪明代码
永远记住你是在与其他开发人员以及你未来的自己一起编写代码。您不希望创建比编写代码时要解决的问题更多的问题。
不要为了炫耀自己的技能而编写代码要编写每个人都能理解和调试的代码。
Keep it simple!
