javascript - 如何在闭包中连接变量字符串-6ren

javascript - 如何在闭包中连接变量字符串

转载作者：行者123 更新时间：2023-11-29 18:45:55

正如您将看到的，我有一个函数，我正在用一个返回另一个函数的函数来练习闭包。它工作得很好，除了在下面的 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 个结果:

露西，你是如何画画的？
Richard 你是怎么卖东西的？
Karla 你唱歌怎么样？
鲍勃，你对什么职位感兴趣？

最佳答案

您覆盖了元素之前的值。要获得这两个字符串，您可以使用 += 将两个新值添加到它。

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

然后我更改了 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>

关于javascript - 如何在闭包中连接变量字符串，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53964068/