今天来分享几个编写干净的JavaScript代码的技巧！
1. 更好的命名
在 JavaScript 中，良好命名的关键不在于最短的变量名，而在于最具描述性的变量名。
（1）减少幻数
将代码中的一些数字定义为一个常量，以使它更有意义，也便于后期的维护。
:x:
for (i=0; i < 8765; i++){}:white_check_mark:
const HOURS_IN_A_YEAR = 8765
for (i=0; i < HOURS_IN_A_YEAR; i++){}（2）语义化命名
尽可能语义化变量和函数的名称。
:x:
onst expired = true;
const e = true;:white_check_mark:
const hasExpired = true; // 布尔值应该有一个类似于is、has或was的前缀
const expiredDate = new Date()
let expiredElementsAmount = 0
let allExpiredElemnts = []2. 保持简洁
（1）避免重复
为了更好地实现简洁的代码，应该遵循DRY（Don't Repeat Yourself）原则。减少代码的重复。
:x:
async function notifyUsers(userIds, message) {
userIds.foreach(userId => {
const user = await User.findByPk(userId)
if(user.isSubscribed) {
const Notification = await Notifications.create({
date: new Date(),
user_id: userId,
message,
emailNotify: true });
Notification.save();
} else {
const Notification = await Notifications.create({
date: new Date(),
user_id: userId,
message,
emailNotify: true });
Notification.save();
}
}
}:white_check_mark:
async function notifyUsers(userIds, message) {
userIds.foreach(userId => {
const user = await User.findByPk(userId)
notifyUsers(userId, message, user.isSubscribed)
}
}
async function createNotification(userId, message, isSubscribed) {
const Notification = await Notifications.create({
date: new Date(),
user_id: userId,
message,
emailNotify: isSubscribed });
Notification.save();
}（2）使用递归
有些情况下，使用递归的代码会比迭代更加简洁。
:x:
const stepsToHundred = (number) => {
let steps = 0
while(number < 100) {
number *= 2
steps++
}
return steps
}:white_check_mark:
const stepsToHundred = (number, steps) =>
number < 100 ? stepsToHundred(number * 2, steps + 1) : steps（3）字符串连接
ES6中新增了模板字符串功能使我们可以在拼接字符串时代码更短、更简洁。
:white_check_mark:
const welcomeMessage = "你好" + user1 + ", 我是" + user2;:x:
const welcomeMessage = `你好 ${user1}, 我是 ${user2}`3. 减少多层嵌套
（1）条件语句
不要将 return 语句嵌套到 if-else 中。
:x:
const getUSTime = (time) => {
if(time <= 12){
return time + "AM"
} else {
return time + "PM"
}
}:white_check_mark:
const getUSTime = (time) => {
if(time <= 12) return time + "AM"
return time + "PM"
}也可以使用三元表达式来写：
const getUSTime = (time) => {
return time + (time <= 12 ? "AM" : "PM")
}（2）async/await
当使用链式的 Promise 时，代码的可读性就会变差。可以使用async/await来优化异步嵌套的代码。
:x:
const sharePost = () => {
getPost().then(post => {
sendTweet(post.url, `分享一篇文章: ${post.title}`)
.then(() => {
console.log("分享成功");
});
});
}:white_check_mark:
const sharePost = async () => {
const post = await getPost();
await sendTweet(post.url, `分享一篇文章: ${post.title}`)
console.log("分享成功");
}4. 干净的函数
（1）处理大量参数的函数
当函数的参数很多时，需要按照顺序传递参数就很麻烦，可以使用对象包装所有的参数，这样传递参数时就可以乱序传递，避免传参时出错。
:x:
function addUser(firstName, lastName, age, city, state, zipCode) {
// ...
}:white_check_mark:
function addUser({ firstName, lastName, age, city, state, zipCode }) {
// ...
}（2）单一责任原则
使用单一职责原则，可以轻松的命名函数，每个函数只做一件事。可以通过它的名称确切地知道该函数的作用，并且该函数不会是冗长的。
:x:
async function signupUser(email) {
const user = await User.create({ email });
await user.save();
const notifcation = await Notification.create({ email });
await notifcation.save();
const date = new Date()
Log.add(date, "已注册", email)
}:white_check_mark:
const logSignup(email) => Log.add(new Date(), "已注册", email)
async function signupUser(email) {
createUser(email)
notifyUser(email)
logSignup(email)
}
async function createUser(email) {
const user = await User.create({ email });
await user.save();
}
async function notifyUser(email) {
const notifcation = await Notification.create({ email });
await notifcation.save();
}（3）回调中首选箭头函数
在 JavaScript 中，map、filter等方法都需要一个匿名函数作为参数，在这些情况下，使用箭头函数是最方便和优雅的方式
:x:
[1, 2, 3].forEach(function (x) {
const y = x ** 2;
return x + y;
});:white_check_mark:
[1, 2, 3].forEach((x) => {
const y = x ** 2;
return x + y;
});本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！