当我尝试从提示框中获取用户输入并在数组中显示这些输入值时，我得到了重复的输入值作为输出

Question

在示例 - 1 中，我得到了从提示框中输入的所有值。

//示例 - 1

  document.getElementById("btn").onclick = () => {

            let cars = new Array(5);

            for(let get = 0 ; get <= 5 ; get++){

                cars[get] = prompt("Enter Any Values");
            }

            for(let show = 0 ; show <= 5 ; show++ ){

                document.getElementById("data1").innerHTML += `You have Entered : ${cars[show]}<br>`;
            }

            document.getElementById("data2").innerHTML = `The Total Values are : ${cars}`;

        }

<button id="btn">Click Here</button>
    <div id="data1"></div>
    <div id="data2"></div>

我在示例 - 2 中遇到问题。请告诉我哪里做错了。谢谢..！

//示例 - 2

 document.getElementById("btn").onclick = () => {

            let cars = new Array(5);

            for(let get of cars){
                cars[get] = prompt("Enter Any Values");
            }
            for(let show of cars){

                document.getElementById("data1").innerHTML += `You have Entered : ${cars[show]}<br>`;
            }

            document.getElementById("data2").innerHTML = `The Total Values are : ${cars}`;

        }

<button id="btn">Click Here</button>
    <div id="data1"></div>
    <div id="data2"></div>

Answer 1

for of 用于像 objectd 这样的数组的值（ 而不是它们的索引 ）。 MDN website.

您使用 for in 作为索引：

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

for (const element in array1) {
  console.log(element);
}

现在回答你的第二个代码中发生的事情：

get 每次在循环内都是 undefined，因为 cars 数组是空的。 所以没有值。 每次在循环中都会发生这种情况：

cars[undefined] = (your prompt answer)

cars[undefined] 的值也被覆盖

此时 cars 是一个具有键 undefined 和值 YOURLASTENTEREDVALUE 的对象。稍后 for of 循环再次在 cars 数组上运行以显示值。现在再次 show 是 undefined 在循环中， 因为 cars 仍然是空的。

所以每次你都在做 cars[undefined]。但是这次你有一个值，这将是你最后回答并显示的值。

document.getElementById("btn").onclick = () => {

            let cars = new Array(3);

            for(let get of cars){
                console.log(get);
                cars[get] = prompt("Enter Any Values");
            }

            console.log(Object.keys(cars));
            console.log(Object.values(cars));
            
            console.log(cars[undefined]);
            for(let show of cars){

              console.log(show);  document.getElementById("data1").innerHTML += `You have Entered : ${cars[show]}<br>`;
            }

            document.getElementById("data2").innerHTML = `The Total Values are : ${cars}`;

        }

<button id="btn">Click Here</button>
    <div id="data1"></div>
    <div id="data2"></div>

编辑根据 OP 的要求，一种修复方法：

document.getElementById("btn").onclick = () => {

            let cars = new Array(3).fill(0);
              for(let get in cars){
                cars[get] = prompt("Enter Any Values");
            }

            for(let show in cars){
 document.getElementById("data1").innerHTML += `You have Entered : ${cars[show]}<br>`;
            }

            document.getElementById("data2").innerHTML = `The Total Values are : ${cars}`;

        }

<button id="btn">Click Here</button>
    <div id="data1"></div>
    <div id="data2"></div>

最初使用默认 0 填充数组，以便可以使用 for in 对其进行迭代是一种方法。

当我尝试从提示框中获取用户输入并在数组中显示这些输入值时，我得到了重复的输入值作为输出

I am getting repeated input values as an Output when I am trying to get User Input from Prompt box and showing those input values in an Array

javascript

arrays

for-in-loop

arrow-functions

for-of-loop