时间戳

首页 > 解决方案 > 为什么过滤器函数在 Javascript 中不返回正确的值

javascript - 为什么过滤器函数在 Javascript 中不返回正确的值

问题描述

我是 Javascript 新手，因此以下错误可能来自新手。

我有下面的复杂对象，根据 first 的值array，我想select从“对象数组”中填充一个选项。从filter函数返回的值不是我所期望的，所以我请求你的帮助。

var complexObject = {
  itemList: ["Item1", "Item1", "Item1", "Item1", "Item2", "Item2"],
  itemDetails: [{
      itemList: "List1",
      itemType: "Type1"
    },
    {
      itemList: "List2",
      itemType: "Type2"
    },
    {
      itemList: "List3",
      itemType: "Type3"
    },
    {
      itemList: "List4",
      itemType: "Type4"
    },
    {
      itemList: "ListH",
      itemType: "TypeH",
    },
    {
      itemList: "ListZ",
      itemType: "TypeZ",
    }
  ]

};

function populateItems() {
  var itemListArray = complexObject.itemList.slice();
  var itemCount = itemListArray.length;
  var i = 0;
  while (i < itemCount) {
    if (itemListArray[i] == itemListArray[i + 1]) {
      itemListArray.splice(i, 1);
    } else
      i++;
    itemCount = itemListArray.length;
  }

  var option1List = document.getElementById("option1");
  for (i = 0; i < itemListArray.length; i++) {
    var newOption = new Option(itemListArray[i]);
    option1List.add(newOption);
  }
}

function changeOption2() {
  var selectedOption = document.getElementById("option1").value;
  var selectedType = complexObject.itemList.filter(function(value, index) {
    if (value == selectedOption)
      return (complexObject.itemDetails[index].itemType);
  });

  var option2List = document.getElementById("option2");
  var i = 1;
  while (i < option2List.length)
    option2List.remove(i);

  option2List = document.getElementById("option2");
  for (i = 0; i < selectedType.length; i++) {
    var newOption = new Option(selectedType[i]);
    option2List.add(newOption);
  }
}
<body onload="populateItems()">
  <p>Option 1:</p>
  <select id="option1" onchange="changeOption2()">
    <option>Select</option>
  </select>
  <br><br>

  <p>Option2:</p>
  <select id="option2">
    <option>Select</option>
  </select>
<body>

感谢您的时间和耐心。

标签： javascript

解决方案

请参阅过滤器文档。 您必须在过滤器回调中返回一个布尔值。如果函数返回 false，它将过滤掉数组的元素，如果返回 true，则保留它。由于您返回的不是布尔值而是字符串，因此它将返回 true，因为 javascript 将非 null 或非未定义值视为true.

您可能想改用Array.reduce()。

尝试这个：

var selectedType=complexObject.itemList.reduce(function(accumulator, value, index) {
  if (value==selectedOption) accumulator.push(complexObject.itemDetails[index].itemType);
  return accumulator;
}

, []);

推荐阅读