Question

我正在尝试让用户在<input>中输入数组。然后根据它们的数据类型将它们分类为不同的数组。（数字，字符串和布尔值）。

但是我想不通如何遍历输入来对它们进行排序。 示例输入为：[1，“坏”，false，3，“密钥”]

额外：如果您可以帮助完成代码。这是源代码：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返回的键相似，以便使用[]括号将它们分类为不同类别更加容易。如果您想要switch之类的自定义键，可以改用Others

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>

Answer 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);
}

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

2 个答案: