如何编写干净的JavaScript代码？

发布时间：2025-11-05 07:36:50 来源：创站工坊 作者：IT科技

今天来分享几个编写干净的何编JavaScript代码的技巧！

1. 更好的写干命名

在 JavaScript 中，良好命名的代码关键不在于最短的变量名，而在于最具描述性的何编变量名。

将代码中的写干一些数字定义为一个常量，以使它更有意义，代码也便于后期的何编维护。

❌

✅

const HOURS_IN_A_YEAR = 8765

尽可能语义化变量和函数的写干名称。

❌

onst expired = true;

✅

const hasExpired = true; // 布尔值应该有一个类似于is、代码has或was的何编前缀

const expiredDate = new Date()

let expiredElementsAmount = 0

2. 保持简洁

为了更好地实现简洁的代码，应该遵循DRY（Dont Repeat Yourself）原则。源码库写干减少代码的代码重复。

❌

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();

}

}

✅

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();

有些情况下，使用递归的写干代码会比迭代更加简洁。

❌

const stepsToHundred = (number) => {

let steps = 0

while(number < 100) {

number *= 2

steps++

}

return steps

✅

const stepsToHundred = (number,代码 steps) =>

ES6中新增了模板字符串功能使我们可以在拼接字符串时代码更短、更简洁。

✅

❌

3. 减少多层嵌套

不要将 return 语句嵌套到 if-else 中。

❌

const getUSTime = (time) => {

if(time <= 12){

return time + "AM"

} else {

return time + "PM"

}

✅

const getUSTime = (time) => {

if(time <= 12) return time + "AM"

return time + "PM"

也可以使用三元表达式来写：

const getUSTime = (time) => {

return time + (time <= 12 ? "AM" : "PM")

当使用链式的 Promise 时，代码的可读性就会变差。可以使用async/await来优化异步嵌套的代码。

❌

const sharePost = () => {

getPost().then(post => {

sendTweet(post.url, `分享一篇文章: ${post.title}`)

.then(() => {

console.log("分享成功");

});

});

✅

const sharePost = async () => {

const post = await getPost();

await sendTweet(post.url, `分享一篇文章: ${post.title}`)

console.log("分享成功");

4. 干净的函数

当函数的参数很多时，需要按照顺序传递参数就很麻烦，服务器租用可以使用对象包装所有的参数，这样传递参数时就可以乱序传递，避免传参时出错。

❌

function addUser(firstName, lastName, age, city, state, zipCode) {

// ...

✅

function addUser({ firstName, lastName, age, city, state, zipCode }) {

// ...

使用单一职责原则，可以轻松的命名函数，每个函数只做一件事。可以通过它的名称确切地知道该函数的作用，并且该函数不会是冗长的。

❌

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)

✅

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();

在 JavaScript 中，map、filter等方法都需要一个匿名函数作为参数，在这些情况下，使用箭头函数是最方便和优雅的方式

❌

[1, 2, 3].forEach(function (x) {

const y = x ** 2;

return x + y;

✅

[1, 2, 3].forEach((x) => {

const y = x ** 2;

return x + y;

相关文章