[英]Dynamic Variable names Javascript
我一直听说我应该如何使用数组和对象来实现动态变量名称。 我不确定如何让它与我当前的项目一起工作。
我需要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;
孔 1、孔 2、孔 3、孔 4、孔 5 都是为了提示用户,询问他们的分数是多少。 然后将它们全部放入 html 输入框中,所有的 id 都与变量、hole1、hole2、hole3、holr4 和hole5 相同。 由于会有多人输入分数,如何为每个 html 框 id 和 javascript 提示变量生成/迭代动态名称,以便我可以在任意数量的框中添加尽可能多的分数?
您可以将所有代码简化为:
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 ' + i + 1 + ' score:'
它将输出Enter Hole 01 score: 、 Enter Hole 11 score: 、 Enter Hole 21 score ,依此类推。 这是因为操作顺序。 当数字被添加到字符串时,它被转换为字符并连接起来。
使用对象文字符号: 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
我写了一个小的 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/
我希望这可以帮助您了解将来如何使用数组。
您实际上不必使用数组来完成这项工作,只需使用以下代码:
window['your_variable_name']
它将返回该变量的内容。
您也可以使用此方法设置变量。
如果您需要“let”而不是“var”,则无法从 window 对象中获取它。
你可以使用评估
这是一个例子:
let a1 = "string 1";
let a2 = "string 2";
let i = 1;
console.log(eval(`a${i}`));// output: "string 1"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.