动态变量名称 Javascript

Question

我不断听到我应该如何使用数组和对象来实现动态变量名。我不确定如何让它与我当前的项目一起使用。

我需要html 框的动态变量名称，以及输入分数的动态名称。如何使用我当前的代码完成此操作？

以下是每个玩家的 5 个单独分数中的每一个的 Javascript 提示。

var hole1 = prompt("Enter Hole 1 score:");
var hole2 = prompt("Enter Hole 2 score:");
var hole3 = prompt("Enter Hole 3 score:");
var hole4 = prompt("Enter Hole 4 score:");
var hole5 = prompt("Enter Hole 5 score:");

下面是声明一个变量来存储所有 6 个框，它将保存分数和总分。

var makeScoreBoxes ='<input type ="text" placeholder="Hole 1" id="hole1" /> <input type ="text" placeholder="Hole 2" id="hole2" /> <input type ="text" placeholder="Hole 3" id="hole3" /> <input type ="text" placeholder="Hole 4" id="hole4" /> <input type ="text" placeholder="Hole 5" id="hole5" /> <input type ="text" placeholder="Total Score" id="totalScore" />'
newdiv.innerHTML = makeScoreBoxes;
ni.appendChild(newdiv); 

然后将它们全部加起来，并将总数存储在 totalScore 变量中：

totalScore = parseInt(parseFloat(hole1) +
             parseFloat(hole2) +
             parseFloat(hole3) +
             parseFloat(hole4) +
             parseFloat(hole5));

然后取hole1、hole2、hole3、hole4和hole5，以及它们的总和，然后将它们全部放入我的index.html输入框中，如下所示：

addTotal = document.getElementById('totalScore').value=totalScore;
addhole1 = document.getElementById('hole1').value=hole1;
addhole2 = document.getElementById('hole2').value=hole2;
addhole3 = document.getElementById('hole3').value=hole3;
addhole4 = document.getElementById('hole4').value=hole4;
addhole5 = document.getElementById('hole5').value=hole5;

hole1、hole2、hole3、hole4、hole5，所有这些都是为了提示用户，询问他们的分数是多少。然后将它们全部放入与变量相同的id的html输入框中，hole1、hole2、hole3、holr4和hole5。由于会有多人输入分数，我如何为每个 html 框 id 和 javascript 提示变量生成/迭代动态名称，以便我可以在任意数量的框中添加尽可能多的分数？

Answer 1

您可以将所有代码简化为：

var holePrompts = [];
for (var i = 0; i < 5; i++) {
    holePrompts[i] = prompt('Enter Hole ' + (i + 1) + ' score:');
}

var totalScore = 0;
for (var i = 0; i < 5; i++) {
    totalScore += parseFloat(holePrompts[i]);
}

document.getElementById('totalScore').value = parseInt(totalScore);
for (var i = 0; i < 5; i++) {    
    document.getElementById('hole' + (i + 1) ).value = holePrompts[i];
}

如果您不对分数进行任何其他操作，甚至更短：

var totalScore = 0;
for (var i = 0; i < 5; i++) {
    score = prompt('Enter Hole ' + (i + 1) + ' score:');
    document.getElementById('hole' + (i + 1) ).value = score;
    totalScore += parseFloat(score);
}
document.getElementById('totalScore').value = parseInt(totalScore);

快速说明，因为您是 JavaScript 新手。当您使用数组并使用i 打印消息时。注意括号：'Enter Hole ' + (i + 1) + ' score:'.

如果你这样输入：'Enter Hole ' + i + 1 + ' score:' 它将输出 Enter Hole 01 score:, Enter Hole 11 score:, Enter Hole 21 score 等等。这是因为操作顺序。将数字添加到字符串时，它会转换为字符并连接起来。

Answer 2

使用对象字面量表示法：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

var scoreByHole = new Object();
scoreByHole['hole1'] = document.getElementById('hole1').value;
scoreByHole['hole2'] = document.getElementById('hole2').value;

...等等。然后您可以稍后像这样引用该对象：

var firstTwoHoles = scoreByHole.hole1 + scoreByHole.hole2

Answer 3

我写了一个小 jsfiddle 来解释数组是如何工作的：

var data = [];
var enteredValue = 1;
var i = 0;
while (enteredValue) {
    enteredValue = prompt("Enter score of hole " + ++i);
    if (enteredValue) {
        data.push(parseFloat(enteredValue));
    }
}

var sum = 0;
for (var i = 0; i < data.length; i++) {
    sum = sum + parseFloat(data[i]);
}
alert("Entered score of " + data.length + " holes. Sum is: " + sum);

首先我们在变量data 中创建一个新数组[]。接下来我们有一个while循环，每次输入值时都会重复。如果按取消或不输入任何内容，while 循环将被取消。

在while循环内部，我们触发提示，如果它包含一个值，我们将这个值推送到数组data。如果我们输入一些值，数组可能如下所示：

[1, 2, 1.5]

在最后一步中，我们使用 for 循环对数组中的所有内容求和并输出结果。其他编程语言如 PHP 有一个 array_sum() 函数，它的作用与现在的 for 循环相同。但是javascript没有原生包含这样的功能。

为了解决数组中的单个值，我们可以使用键。在数组中，键是从零开始的整数。所以这个数组中的第一个值得到了键 0。第二个值，键 1，...

for 循环为我们执行此操作，从零开始，以比数组长度小 1 个数字结束。因为在上面的示例中，数组包含 3 个值。 data.length 将是 3。但最后一项的键是 2（因为它从零开始计数，而不是从一开始）。

你会在这里找到小提琴：http://jsfiddle.net/fXgv4/1/

我希望这可以帮助您了解将来如何使用数组。

Answer 4

您实际上不必使用数组来完成这项工作，只需使用以下代码：

window['your_variable_name']

它会返回那个变量的内容。

您也可以使用此方法设置变量。

Answer 5

如果您需要“let”而不是“var”，则无法从窗口对象中获取它。

你可以使用 eval

这是一个例子：

let a1 = "string 1";
let a2 = "string 2";

let i = 1;

console.log(eval(`a${i}`));// output: "string 1"