pojin (ID: 1)
头衔：论坛坛主
等级：究级天王[荣誉]
积分：1301
发帖：99 篇
来自：保密
注册：2022-08-28 23:20:57
造访：2025-03-23 21:18:24
[ 第 1 楼 ]
回复
1、使用默认参数代替短路或条件
默认参数通常比短路更干净。
例如：
function Method(a = 2) {
a =
}
声明：Falsy值，如''，""，false，null，0，和NaN将不会被默认值替代：
SomeMethod(null) // will not Default Value, will null Instead
SomeMethod("SomeValue") // SomeValue
2023-01-31 16:34:02
IP：已设置保密
pojin (ID: 1)
头衔：论坛坛主
等级：究级天王[荣誉]
积分：1301
发帖：99 篇
来自：保密
注册：2022-08-28 23:20:57
造访：2025-03-23 21:18:24
[ 第 2 楼 ]
回复
2、处理多个条件
const conditions = ["Condition 2","Condition String2"];
someFunction(str){
if(str.includes("someValue1") || str.includes("someValue2")){
return true
}else{
return false
}
}
一种更干净的方法是：
someFunction(str){
const conditions = ["someValue1","someValue2"];
return conditions.some(condition=>str.includes(condition));
}
2023-01-31 16:43:12
IP：已设置保密
pojin (ID: 1)
头衔：论坛坛主
等级：究级天王[荣誉]
积分：1301
发帖：99 篇
来自：保密
注册：2022-08-28 23:20:57
造访：2025-03-23 21:18:24
[ 第 3 楼 ]
回复
3、用动态键值对替换开关（即对象文字）
开关版本（或将开关替换为if / else）：
const UserRole = {
ADMIN: "Admin",
GENERAL_USER: "GeneralUser",
SUPER_ADMIN: "SuperAdmin",
};
function getRoute(userRole = "default role"){
switch(userRole){
case UserRole.ADMIN:
return "/admin"
case UserRole.GENERAL_USER:
return "/GENERAL_USER"
case UserRole.SUPER_ADMIN:
return "/superadmin"
default:
return "/"
}
}
console.log(getRoute(UserRole.ADMIN)) // return "/admin"
console.log(getRoute("Anything")) // return Default path
console.log(getRoute()) // return Default path
console.log(getRoute(null)) // return Default path
// More cases if new arrive
// You can think if else instead of switch
动态键值对版本：
const UserRole = {
ADMIN: "Admin",
GENERAL_USER: "GeneralUser",
SUPER_ADMIN: "SuperAdmin",
};
function getRoute(userRole = "default role"){
const appRoute = {
[UserRole.ADMIN]: "/admin",
[UserRole.GENERAL_USER]: "/user",
[UserRole.SUPER_ADMIN]: "/superadmin"
};
return appRoute[userRole] || "Default path";
}
console.log(getRoute(UserRole.ADMIN)) // return "/admin"
console.log(getRoute("Anything")) // return Default path
console.log(getRoute()) // return Default path
console.log(getRoute(null)) // return Default path
// No more switch/if-else here.
// Easy to Further expansion
2023-01-31 16:43:58
IP：已设置保密
pojin (ID: 1)
头衔：论坛坛主
等级：究级天王[荣誉]
积分：1301
发帖：99 篇
来自：保密
注册：2022-08-28 23:20:57
造访：2025-03-23 21:18:24
[ 第 4 楼 ]
回复
4、避免过多的函数参数
function myFunction(employeeName,jobTitle,yrExp,majorExp){
return `${employeeName} is working as ${jobTitle} with ${yrExp} years of experience in ${majorExp}`
}
//output be like John is working as Project Manager with 12 year of experience in Project Management
// you can call it via
console.log(myFunction("John","Project Manager",12,"Project Management"))
// ***** PROBLEMS ARE *****
// Violation of 'clean code' principle
// Parameter sequencing is important
// Unused Params warning if not used
// Testing need to consider a lot of edge cases.
这是一种更清洁的方法：
function myFunction({employeeName,jobTitle,yrExp,majorExp}){
return `${employeeName} is working as ${jobTitle} with ${yrExp} years of experience in ${majorExp}`
}
//output be like John is working as Project Manager with 12 year of experience in Project Management
// you can call it via
const mockTechPeople = {
employeeName:"John",
jobTitle:"Project Manager",
yrExp:12,
majorExp:"Project Management"
}
console.log(myFunction(mockTechPeople))
// ES2015/ES6 destructuring syntax is in action
// map your desired value to variable you need.
2023-01-31 16:44:25
IP：已设置保密
pojin (ID: 1)
头衔：论坛坛主
等级：究级天王[荣誉]
积分：1301
发帖：99 篇
来自：保密
注册：2022-08-28 23:20:57
造访：2025-03-23 21:18:24
[ 第 5 楼 ]
回复
5、使用Object.assign设置默认对象
这看起来很繁琐：
const someObject = {
title: null,
subTitle: "Subtitle",
buttonColor: null,
disabled: true
};
function createOption(someObject) {
someObject.title = someObject.title || "Default Title";
someObject.subTitle = someObject.subTitle || "Default Subtitle";
someObject.buttonColor = someObject.buttonColor || "blue";
someObject.disabled = someObject.disabled !== undefined ? someObject.disabled : true;
return someObject
}
console.log(createOption(someObject));
// Output be like
// {title: 'Default Title', subTitle: 'Subtitle', buttonColor: 'blue', disabled: true}
这种方法看起来更好：
const someObject = {
title: null,
subTitle: "Subtitle",
buttonColor: null,
disabled: true
};
function creteOption(someObject) {
const newObject = Object.assign({
title: "Default Title",
subTitle: "Default Subtitle",
buttonColor: "blue",
disabled: true
},someObject)
return newObject
}
console.log(creteOption(someObject));
2023-01-31 16:44:49
IP：已设置保密
