Question

对此我真的很陌生，因此我的术语可能很差，如果需要，请问我是否需要澄清。抱歉，这是一个基本问题。这是我的问题的一个示例：

var post1title = "example title 1";
var post1text = "example text 1";
var post2title = "example title 2";
var post2text = "example text 2";

function update() {
    setText("titleBox", post1title);
    setText("bodyBox", post1text);

我的目标是使函数update（）具有一个参数，该参数允许文本框中的文本为post1title或post2title。

当涉及变量时，我想做与字符串相似的事情，如下所示：

console.log("User has set the variable post1title to: " + post1title);
// prints "User has set the variable post1title to: example title 1" to the debug console

但是，似乎在调用变量时您不能做同样的事情。我已经尝试过和字符串一样（“ n”是1-2）：

var post1title = "example title 1";
var post1text = "example text 1";
var post2title = "example title 2";
var post2text = "example text 2";

function update(n) {
    setText("titleBox", post + n + title);
    setText("bodyBox", post + n + text);

这显然是将三个变量加在一起。这样可能吗？

Answer 1

您可以使用带有bracket notation的对象来执行类似的操作。这样，您的对象将按住指向其关联值的键。

请参见以下示例：

var options = {
  post1title: "example title 1",
  post1text: "example text 1",
  post2title: "example title 2",
  post2text: "example text 2"
}

function update(n) {
  setText("titleBox", options["post"+ n + "title"]);
  setText("bodyBox", options["post" + n + "text"]);
}

function setText(id, txt) {
  document.getElementById(id).textContent = txt;
}

update(1)

<h2 id="titleBox"></h2>
<p id="bodyBox" ></p>

或者，另一种方法是使用类似如下的构造函数：

var post1title = "example title 1";
var post1text = "example text 1";
var post2title = "example title 2";
var post2text = "example text 2";

function update(n) {
  setText("titleBox", Function("return post"+ n + "title")());
  setText("bodyBox", Function("return post"+ n + "text")());
}

function setText(id, txt) {
  document.getElementById(id).textContent = txt;
}

update(1);

<h2 id="titleBox"></h2>
<p id="bodyBox" ></p>

Answer 2

至少可以说是一种反模式，但是如果您真的想要这样做（并且您不愿意，可惜）：

function update(n) {
  setText("titleBox", eval("post" + n + "title"));
  ...

...并且has higher performance than using a Function() constructor。尽管如此，eval()仍然是不好的做法。

Answer 3

您可以将值存储为普通对象或Map的属性，并使用计算出的属性名称或方括号表示法获取相应的值。

您还可以调整期望参数的顺序。

const o = {
  post1title: "example title 1",
  post1text: "example text 1",
  post2title: "example title 2",
  post2text: "example text 2"
}

function update(p, t, n) {
  console.log(o[p + n + t])
}

update('post', 'title', 1);

Answer 4

将变量转换为对象可能会更好。例如，此结构对从数据库中获取的现实数据进行了最佳模拟。而且我正在console.log内使用Template Literals，以更简单的方式组合字符串和变量

var posts = {  	
     "title": {
        "1": "example title 1",
       "2": "example title 2",
      },
    
      "text": {
        "1": "example text 1",
        "2": "example text 2",
      }    
}

function update(part, n) {
  /* setText("titleBox", post1title);
  setText("bodyBox", post1text); */
  console.log(`User has set the variable post${n}${part} to: ${posts[part][n]} `); 
}

update('title', '1')
update('title', '2')
update('text', '1')
update('text', '2')

JS：是否可以根据函数的参数来使变量的一部分？

4 个答案: