JS：是否可以根據函數的參數來使變量的一部分？

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

您可以使用帶有方括號符號的對象執行類似的操作。 這樣，您的對象將持有指向其關聯值的鍵。

請參見下面的示例：

 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"));
  ...

---

...並且， 與使用Function（）構造函數相比 ，它具有更高的性能 。 但是， 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內使用模板文字以更簡單的方式組合字符串和變量

 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')