将参数传递给函数而不将其添加到函数调用中

Question

我试过你的解决方案，它似乎在堆栈溢出中工作正常 "code run environment"。我可能需要将它与我的原始代码进行比较。

$.getJSON("https://teamtreehouse.com/chalkers.json", function(result){

    var buildHtml = ""; 

    function buildLi(language){
        buildHtml += "<li>" + "<h4> language </h4> | <span>" + result.points[language] + "</span></li>";
    }

    buildHtml += "<ul>";
    buildLi("HTML");
    buildLi("CSS");
    buildLi("JavaScript");
    buildLi("PHP");
    buildHtml += "</ul>";

    $(".skill-ul-container").append(buildHtml);             
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>The Score</h1>
<div class="skill-ul-container"></div>

我目前正在寻找一种将参数传递给函数而不实际将其添加到函数调用的解决方案。在这种情况下，我想构建一个简单的 <ul> 列表，其中包含从 json 文件获取内容的 <li> 项。如您所见，我反复将 result 和 buildHtml 包含在函数调用中。但我想我不必那样做，对吧？有没有办法默认将它们包含在函数调用中？（因为它们在函数调用期间没有改变）

$.getJSON("that/nice/json/file/that/stores/my/score.json", function(result){

    var buildHtml = ""; 

    function buildLi(language, result, buildHtml){
        buildHtml += "<li>" + "<h4> language </h4> | <span>" + result.points[language] + "</span></li>"; //builds <li> that contains the programming language title and a number that is stored in result.points[language]
        return(buildHtml);
    }

    buildHtml += "<ul>";
    buildHtml = buildLi("HTML", result, buildHtml); //i want to get rid of "result and buildHtml" because these values are not supposed to be changed during the function call.
    buildHtml = buildLi("CSS", result, buildHtml);
    buildHtml = buildLi("JavaScript", result, buildHtml);
    buildHtml = buildLi("PHP", result, buildHtml);
    buildHtml += "</ul>";
    $(".skill-ul-container").append(buildHtml);             
});

对于有关此问题的任何提示、解决方案或提示，我将不胜感激。

Answer 1

您不需要包含这两个参数，如果您在此回调函数中定义 buildLi，因为这两个变量都在函数的 scope 中，您可以毫无问题地使用它们

Answer 2

您实际上可以在函数声明和所有调用中将它们作为参数删除，因为这两个变量都在整个代码段的范围内...

$.getJSON("that/nice/json/file/that/stores/my/score.json", function(result){

    var buildHtml = ""; 

    function buildLi(language){
        buildHtml += "<li>" + "<h4> language </h4> | <span>" + result.points[language] + "</span></li>";
    }

    buildHtml += "<ul>";
    buildLi("HTML");
    buildLi("CSS");
    buildLi("JavaScript");
    buildLi("PHP");
    buildHtml += "</ul>";

    $(".skill-ul-container").append(buildHtml);             
});

Answer 3

除了将这两个参数作为全局变量访问外，您还可以使用 bind 函数来创建函数的新版本并修复分配给 this 关键字的值以及任意数量的调用新函数时提供的任何前面的参数。

将参数传递给函数而不将其添加到函数调用中

pass argument into a function without adding it to the function call

javascript

arguments

default

function