如何循环输入输入的数组并根据它们的类型进行分类？答案

【问题标题】：How to loop over array entered in an input and categorize based on their type?如何循环输入输入的数组并根据它们的类型进行分类？
【发布时间】：2019-02-22 15:03:10
【问题描述】：

我试图让用户在<input> 中输入一个数组。然后我会根据它们的数据类型将它们分类到不同的数组中；（数字、字符串和布尔值）。

但我不知道如何循环输入以对它们进行排序。 示例输入为：[1,"bad",false,3,"key"]

额外：如果你能帮助完成代码。这是源代码：Codepen

function sort() {
  const numbers = [];
  const strings = [];
  const booleans = [];
  const others = [];
  const inpArr = document.querySelectorAll(".input");
  //console.log(inpArr.value);
  for (let i = 0; i < inpArr.length; i++) {
    console.log(inpArr[i].value);
    switch (typeof inpArr[i].value) {
      case "Number":
        numbers.push(inpArr[i].value);
        break;

      default:
        console.log(typeof inpArr[i].value)
    }
  }

  const objectResult = {
    "Strings": strings,
    "Numbers": numbers,
    "Booleans": booleans,
    "Others": others

  };

  const JsonObj = JSON.stringify(objectResult)
  document.querySelector("#rawResult").innerText = JsonObj;

}

<div class="inputs">
  <input class="input" placeholder="Enter an Array" />
  <button onclick="sort()">SORT ARRAY</button>
</div>

<div class="result">
  <div id="rawResult"></div>
  <div id="tableResult"></div>
</div>

我需要如何遍历 inpArr 并将每个值排序到各自的数组中。并将用户显示为对象

【问题讨论】：

typeof inpArr[i].value 将始终返回 string
您只有一个 input 和 input 类，因此您的数组中只有一个值...
我很惊讶为什么我们要推送到常量变量，否则为什么我们在这里使用 const 变量
请问我该如何解决这个问题？
@adiga 我该如何解决这个问题>

标签： javascript html arrays loops

【解决方案1】：

您可以使用JSON.parse 执行类似的操作。我更改了objectResult 键的名称，并使其类似于typeof 返回的名称，以便使用[] 括号将它们分类到不同的类别中更容易。如果您想要像 Others 这样的自定义键，您可以改用 switch

function sort() {
  const numbers = [];
  const strings = [];
  const booleans = [];
  const others = [];
  const value = document.querySelectorAll(".input")[0].value;
  let inputArray

  try {
    inputArray = JSON.parse(value)
  } catch {
    alert("Please enter a valid JSON string")
    return;
  }

  const objectResult = {
    "string": strings,
    "number": numbers,
    "boolean": booleans,
  };

  inputArray.forEach(item => {
    objectResult[typeof item].push(item)
  });

  const JsonObj = JSON.stringify(objectResult)
  document.querySelector("#rawResult").innerText = JsonObj;
}

<div class="inputs">
  <input class="input" placeholder="Enter an Array" value='[1,"bad",false,3,"key"]' />
  <button onclick="sort()">SORT ARRAY</button>
</div>

<div class="result">
  <div id="rawResult"></div>
  <div id="tableResult"></div>
</div>

【讨论】：

我收到此错误：意外令牌，预期（（12:8）
究竟在哪一行？它在 sn-p 上运行良好。点击Run code snippet进行测试
你写的那一行 } catch {
抱歉回复晚了
@Pelumi 它可以在 sn-p 中正常工作。我发帖时在catch 之后还有一个()，但后来我删除了。

【解决方案2】：

你不能通过typeof 来做，你可以通过一些简单的方法来做，比如isNaN，对于布尔值，我认为你需要检查true or false 的确切字符串或其他字符串...

if(!isNaN(inpArr[i].value)) { //Number
　　numbers.push(inpArr[i].value);
} else if(inpArr[i].value == "true" || inpArr[i].value == "false") { // boolean
   booleans.push(inpArr[i].value);
} else { // String
   strings.push(inpArr[i].value);
}

【讨论】：

我认为我的 for 循环是问题