Javascript-重构if.else语句(ES6)

Question

我正在尝试重构if.else语句。

我的代码：

let condition = 'hi';
if(condition === 'hi'){
commonFunction('hi');
console.log('hi is called');
}else if(condition === 'bye'){
commonFunction('bye');
console.log('bye is called');
}else if(condition.includes('happy')){
commonFunction('happy');
console.log('happy is called');
}else if(condition === 'greeting'){
commonFunction('greeting');
console.log('greeting is called');
}

重构代码：

if(condition === 'hi'){
hi();
}else if(condition === 'bye'){
bye();
}else if(condition.includes('happy')){
happy();
}else if(condition === 'greeting'){
greeting();
}
function hi(){
commonFunction('hi');
console.log('hi is called');
}
function bye(){
commonFunction('bye');
console.log('bye is called');
}
function happy(){
commonFunction('happy');
console.log('happy is called');
}
function greeting(){
commonFunction('greeting');
console.log('greeting is called');
}

像我重构的代码一样，按条件声明每个函数更好吗？？？

或者，通过构造函数生成类并调用commonFunction怎么样？(我认为switch..case没有用，因为我有一个包含((的条件(

Answer 1

一个选项是使用包含函数的对象，而不是使用多个独立函数。然后，只需使用属性查找。

不过，对于这个确切的代码，您可以使用Proxy来检查访问了哪个属性，而不是具有多个属性(因为您的所有属性/函数都有通用功能(，从而使其更加干燥：

const condition = 'hi';
const fns = new Proxy({}, { get: (_, prop) => {
console.log(prop + ' is called');
}});
const props = ['hi', 'bye', 'greeting'];
if (condition.includes('happy')) {
fns.happy();
} else if (fns[condition]) {
fns[condition]();
}

这非常枯燥，但很奇怪——在大多数情况下，你会使用一个对象：

const fns = {
hi() {
console.log('hi is called');
},
bye() {
console.log('bye is called');
},
greeting() {
console.log('greeting is called');
},
happy() {
console.log('happy is called');
}
}
const condition = 'hi';
if (condition in fns) {
fns[condition]();
} else if (condition.includes('happy')) {
fns.happy();
}

Answer 2

我建议将所有这些if-elses移动到commonFunction本身中(如果它不再包含相同的if-elses，如果您需要更复杂的重构(：

const commonFunction = (condition) => {
let f = ['hi', 'bye', 'happy', 'greeting'].find(e => condition.includes(e))
console.log(f + ' is called');
if (!f) return;
// do something
// return the result if needed
}
commonFunction('greeting')
commonFunction('die')

Answer 3

对此可以做的一件事是使用condition将object中的函数声明为keys。

let objFunc = {
'hi': function() {
commonFunction('hi');
console.log('hi is called');
},
'happy': function() {
commonFunction('happy');
console.log('happy is called');
},
'bye': function() {
commonFunction('bye');
console.log('bye is called');
},
'greeting': function() {
commonFunction('greeting');
console.log('greeting is called');
},
};

objFunc[condition]();

Answer 4

在您的原始代码中，您编写了多个if-else语句，只是为了用不同的预定义参数调用同一个函数，所以您不需要进行重构，我认为这是一个容易得多的小代码。

let predefinedArgs = {
hi: 'hi',
bye: 'bye'
...
}
let condition = 'hi'
commonFunction(predefinedArgs[`condition`]);

Answer 5

您有一组条件，要为这些条件调用一个公共函数。做到这一点的最好方法是简单地测试您是否能够处理该条件(这就是您可以使用includes的地方(。然后调用该函数。

const allowed = ['hi', 'bye', 'happy', 'greeting']
let condition = 'happy'
if (allowed.includes(condition)) {           // do you know how to deal with condition? 
commonFunction(condition)                 // if so call the function
} else {
console.log(`unknown condition ${condition}`) // otherwise log an error
}
// not sure what commonFunction does, so this is just for the example
function commonFunction(condition) {
console.log(`${condition} is called`);
}

Answer 6

我认为所有的解决方案都应该运行良好。对于包含的条件，也许您可以尝试添加一个新参数。我的意思是，正如前面的回答所说：

let f = ['hi', 'bye', 'happy', 'greeting'].find(e => condition.includes(e))
console.log(f + ' is called');
if (!f) return;
// do something
// return the result if needed
}
commonFunction('greeting')
commonFunction('die')```
This could be converted to :
```const commonFunction = (condition, functionName) => {
// ... other code
// and then use can use the following link to call the function which you want to execute`
https://stackoverflow.com/questions/53492013/javascript-refactoring-if-else-statements-es6/53492079
const young = () => {//...}
and the calling could be:
commonFunction('greeting', slice)
commonFunction('die', young)```
Hope this makes sense!