如何編寫干凈的JavaScript代碼？
今天來分享幾個(gè)編寫干凈的JavaScript代碼的技巧！
1. 更好的命名
在 JavaScript 中，良好命名的關(guān)鍵不在于最短的變量名，而在于最具描述性的變量名。
（1）減少幻數(shù)
將代碼中的一些數(shù)字定義為一個(gè)常量，以使它更有意義，也便于后期的維護(hù)。
?
for (i=0; i < 8765; i++)
?
const HOURS_IN_A_YEAR = 8765
for (i=0; i < HOURS_IN_A_YEAR; i++)
（2）語義化命名
盡可能語義化變量和函數(shù)的名稱。
?
onst expired = true;
const e = true;
?
const hasExpired = true; // 布爾值應(yīng)該有一個(gè)類似于is、has或was的前綴
const expiredDate = new Date()
let expiredElementsAmount = 0
let allExpiredElemnts =
2. 保持簡(jiǎn)潔
（1）避免重復(fù)
為了更好地實(shí)現(xiàn)簡(jiǎn)潔的代碼，應(yīng)該遵循DRY（Don't Repeat Yourself）原則。減少代碼的重復(fù)。
?
async function notifyUsers(userIds, message)
userIds.foreach(userId =>
const user = await User.findByPk(userId)
if(user.isSubscribed)
const Notification = await Notifications.create(
datenew Date()
user_iduserId
message
emailNotifytrue );
Notification.save();
else
const Notification = await Notifications.create(
datenew Date()
user_iduserId
message
emailNotifytrue );
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(
datenew Date()
user_iduserId
message
emailNotifyisSubscribed );
Notification.save();
（2）使用遞歸
有些情況下，使用遞歸的代碼會(huì)比迭代更加簡(jiǎn)潔。
?
const stepsToHundred = (number) =>
let steps = 0
while(number < 100)
number *= 2
steps++
return steps
?
const stepsToHundred = (number, steps) =>
number < 100 ? stepsToHundred(number * 2, steps + 1) steps
（3）字符串連接
ES6中新增了模板字符串功能使我們可以在拼接字符串時(shí)代碼更短、更簡(jiǎn)潔。
?
const welcomeMessage = "你好" + user1 + ", 我是" + user2;
?
const welcomeMessage = `你好 $user1, 我是 $user2`
3. 減少多層嵌套
（1）條件語句
不要將 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"
也可以使用三元表達(dá)式來寫：
const getUSTime = (time) =>
return time + (time <= 12 ? "AM" "PM")
（2）async/await
當(dāng)使用鏈?zhǔn)降?Promise 時(shí)，代碼的可讀性就會(huì)變差?？梢允褂胊sync/await來優(yōu)化異步嵌套的代碼。
?
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. 干凈的函數(shù)
（1）處理大量參數(shù)的函數(shù)
當(dāng)函數(shù)的參數(shù)很多時(shí)，需要按照順序傳遞參數(shù)就很麻煩，可以使用對(duì)象包裝所有的參數(shù)，這樣傳遞參數(shù)時(shí)就可以亂序傳遞，避免傳參時(shí)出錯(cuò)。
?
function addUser(firstName, lastName, age, city, state, zipCode)
// ...
?
function addUser( firstName lastName age city state zipCode )
// ...
（2）單一責(zé)任原則
使用單一職責(zé)原則，可以輕松的命名函數(shù)，每個(gè)函數(shù)只做一件事?？梢酝ㄟ^它的名稱確切地知道該函數(shù)的作用，并且該函數(shù)不會(huì)是冗長(zhǎng)的。
?
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 "已注冊(cè)" email)
?
const logSignup(email) => Log.add(new Date(), "已注冊(cè)", 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）回調(diào)中首選箭頭函數(shù)
在 JavaScript 中，map、filter等方法都需要一個(gè)匿名函數(shù)作為參數(shù)，在這些情況下，使用箭頭函數(shù)是最方便和優(yōu)雅的方式
?
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;
});
