如何在闭包中连接变量字符串答案

【问题标题】：How to Concatenate Variable Strings in Closures如何在闭包中连接变量字符串
【发布时间】：2018-12-28 20:41:16
【问题描述】：

如你所见，我有一个函数，我正在练习闭包，其中一个函数返回另一个函数。它工作得很好，除了在下面的 5 个示例中调用函数 interviewQuestion(job) 时，else 条件只打印他调用的函数中的最后一个，我想知道如何让它们都打印.我有以下代码：

function interviewQuestion(job) {
  return function(name) {
    if (job === 'painter') {
      return document.getElementById("demo1").innerHTML = name + ' how do you paint images?';
    } else if (job === 'salesman') {
      return document.getElementById("demo2").innerHTML = name + ' how do you sale things?';
    } else if (job === 'singer') {
      return document.getElementById("demo3").innerHTML = name + ' how do you sing?';
    } else {
      var string = '';
      string = document.getElementById("demo0").innerHTML = name + ' what position are you interested in?' + '<br>';
      return string;
    }
  }
}

//Function is called:
interviewQuestion('painter')('Lucy');
interviewQuestion('salesman')('Richard');
interviewQuestion('singer')('Juliana');
/*else*/
interviewQuestion('window washer')('Pepe');
/*else*/
interviewQuestion('bootshiner')('Bob');

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Section 5: Advanced JavaScript: Objects and Functions</title>
</head>

<body>
  <h1>Section 5: Advanced JavaScript: Objects and Functions</h1>

  <h3>Practice on Closures:</h3>

  <p id="demo1"></p>
  <p id="demo2"></p>
  <p id="demo3"></p>
  <p id="demo0"></p>

</body>

</html>

如何修复我的 else 部分的退货声明？我希望，如果函数的该部分有超过 1 次调用，则能够一个接一个地打印所有结果。

截至目前，对函数进行了 5 次调用，我只得到 4 个结果：

Lucy 你是如何绘制图像的？
Richard 你是怎么卖东西的？
Karla 你唱得怎么样？
Bob 您对哪个职位感兴趣？

【问题讨论】：

标签： javascript closures concatenation

【解决方案1】：

您覆盖了元素的先前值。要获取这两个字符串，您可以使用 += 向其中添加两个新值。

我将所有输出更改为带有换行符的输出。

然后我将return 语句更改为提前退出，这意味着您不需要else 语句，因为return 语句会退出函数。

function interviewQuestion(job) {
    return function(name) {
        if (job === 'painter') {
            document.getElementById("demo1").innerHTML += name + ' how do you paint images?' + '<br>';
            return;
        }

        if (job === 'salesman') {
            document.getElementById("demo2").innerHTML += name + ' how do you sale things?' + '<br>';
            return;
        }

        if (job === 'singer') {
            document.getElementById("demo3").innerHTML += name + ' how do you sing?' + '<br>';
            return;
        }

        document.getElementById("demo0").innerHTML += name + ' what position are you interested in?' + '<br>';
    };
}

interviewQuestion('painter')('Lucy');
interviewQuestion('salesman')('Richard');
interviewQuestion('singer')('Juliana');
interviewQuestion('window washer')('Pepe');
interviewQuestion('bootshiner')('Bob');

<h1>Section 5: Advanced JavaScript: Objects and Functions</h1>
<h3>Practice on Closures:</h3>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo0"></p>

为了完整性，您可以将所有信息移动到一个对象中，并为未知作业定义一个默认函数。

function interviewQuestion(job) {
    var data = {
            painter: name => document.getElementById("demo1").innerHTML += name + ' how do you paint images?' + '<br>',
            painter: name => document.getElementById("demo1").innerHTML += name + ' how do you paint images?' + '<br>',
            salesman: name => document.getElementById("demo2").innerHTML += name + ' how do you sale things?' + '<br>',
            singer: name => document.getElementById("demo3").innerHTML += name + ' how do you sing?' + '<br>',
            default: name => document.getElementById("demo0").innerHTML += name + ' what position are you interested in?' + '<br>'
         };

    return data[job] || data.default;
}

interviewQuestion('painter')('Lucy');
interviewQuestion('salesman')('Richard');
interviewQuestion('singer')('Juliana');
interviewQuestion('window washer')('Pepe');
interviewQuestion('bootshiner')('Bob');

<h1>Section 5: Advanced JavaScript: Objects and Functions</h1>
<h3>Practice on Closures:</h3>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo0"></p>

【讨论】：

我知道这将是一件非常简单的事情，我只是想不通。谢谢！
我看到在您的更正中，您将 += 包含在所有条件中，因为它也适用。而且看起来更干净。 ;))