javascript - 如何遍历输入中输入的数组并根据其类型进行分类？

Question

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

但我不知道如何循环输入以将它们分类。 示例输入是:[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 并将每个值排序到各自的数组中。并将用户显示为对象

Answer 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>