为什么筛选器函数无法在Javascript中返回正确的值

Question

我是Java语言的新手，因此以下错误可能来自新手。

我有下面的复杂对象，并根据第一个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>

感谢您的时间和耐心等待。

Answer 1

请参阅过滤器文档。 您必须在过滤器回调中返回布尔值。 如果函数返回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; } , []);

Answer 2

据我了解，过滤器功能会进行测试，然后返回所有通过测试的元素。 （ docs ），因此您的代码不会返回商品类型，而是返回商品列表中的选定商品。 您可能想做更多这样的事情

var selectedType = complexObject.
    itemDetails[complexObject.itemList.findIndex(elm => elm == selectedOption)];

（ findIndex docs ）

另外，您可以使用reduce函数，但是它将返回并围绕所选项目类型进行排列，看起来您似乎主要想执行查找操作。 您甚至可能要考虑将itemDetails转换成这样的结构的对象

{ 
    "Item1": {
      itemList: "List1",
      itemType: "Type1"
    }
}

这样，您可以通过检查来找到类型

return complexObject.itemDetails[selectedOption].itemType

Answer 3

您需要“ itemDetails”数组中的对象，但要过滤“ itemList”，在JavaScript过滤器函数中，仅从同一数组中返回对象，这就是您看到结果的原因（“ Item1”，“ Item1”，“ Item1”，“ Item1”）而不是（“ Type1”，“ Type2”，“ Type3”，“ Type4”），我的建议是使用通用的for循环，如下所示：

var selectedType=[];

for(var i=0;i<complexObject.itemList.length;i++){
    var value = complexObject.itemList[i];
    if (value == selectedOption){
        selectedType.push(complexObject.itemDetails[i].itemType);
    }
}

为什么筛选器函数无法在Javascript中返回正确的值

问题描述

3 个解决方案

解决方案1
0 2018-10-08 13:05:02

解决方案2
0 2018-10-08 13:05:38

解决方案3
0 2018-10-08 13:37:29

为什么筛选器函数无法在Javascript中返回正确的值

问题描述

3 个解决方案

解决方案1 0 2018-10-08 13:05:02

解决方案2 0 2018-10-08 13:05:38

解决方案3 0 2018-10-08 13:37:29

解决方案1
0 2018-10-08 13:05:02

解决方案2
0 2018-10-08 13:05:38

解决方案3
0 2018-10-08 13:37:29