删除方法中的冗余代码

Question

我正在使用以下代码，但在阅读了关于 JS（我相当新）之后，我注意到了 3 件事。

1. 在方法开头使用return

2. 使用ternary条件（不知道在这种情况下如何使用）

3. 使用reduce（对此不确定，但可能代替forEach）

是否可以在下面的代码中使用它？

 get: function(document, oData) {
        var self = this;
        var oInnerHTML;
        if (oData) {
            var oParsedHTML = this._parseHtml(document);
            oInnerHTML = oParsedHTML;
            oData.forEach(function(configEntry) {
                oInnerHTML = self._routeExtentionTypes(configEntry, oInnerHTML);
            });
            oInnerHTML = this._convertBackToHtml(oInnerHTML);
        } else {
            oInnerHTML = document;
        }
         return oInnerHTML
    }

代码在做什么

1. 获取 HtmlString 并解析它
2. 根据cofigEntry和原HTML进行扩展
3. 完成配置条目后，它会转换回 HTML

Answer 1

在方法开头使用return

当您的对象准备好所需的值时，请使用 return。尽早返回是一个好习惯。这样，最少的代码被执行和评估。

在上面的示例中，“oInnerHTML”变量在满足某些条件的情况下准备好值，因此在这种情况下，您可以在对象/变量准备好值后立即返回它。

使用三元条件

当您基于一个简单的条件为变量赋值或者您正在做出具有非常简短结果的多个决策时，三元运算符很常见。例如

x ? y: z

在上面的例子中，三元运算符可以如下使用：（请执行代码并仔细检查）

get: function(document, oData) {
  var self = this;      
  return (oData) ? document : get_oInnerHTML(oData);
}      

function get_oInnerHTML (oData){
  var oInnerHTML;
  oData.forEach(function(configEntry) { oInnerHTML = self._routeExtentionTypes(configEntry, this._parseHtml(document)); });
  return oInnerHTML;
}  

以上代码在三元条件下使用了一个函数。由于有很多行需要在条件内执行，所以我为它创建了单独的函数并在条件下使用。

使用reduce

reduce() 方法对累加器和数组的每个值（从左到右）应用一个函数，以将其减少为单个值。

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, currentIndex, array) { return previousValue + currentValue; });

Answer 2

我想，你可以试试Array#reduce()。

基本上，reduce 正在做你想做的事。它需要一个起始值并迭代一个数组并根据需要返回一些值。

以前的代码

var oParsedHTML = this._parseHtml(document);
    oInnerHTML = oParsedHTML;
oData.forEach(function(configEntry) {
    oInnerHTML = self._routeExtentionTypes(configEntry, oInnerHTML);
});

转换为

this._convertBackToHtml(oData.reduce(function (r, configEntry) {
    return self._routeExtentionTypes(configEntry, r);
}, this._parseHtml(document))) :

因为现在开始值是this._parseHtml(document)，不需要额外的变量，并且返回值成为下一次迭代的新输入值。

get: function (document, oData) {
    var self = this;
    return oData ?
        this._convertBackToHtml(oData.reduce(function (r, configEntry) {
            return self._routeExtentionTypes(configEntry, r);
        }, this._parseHtml(document))) :
        document;
}