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

See filter docs. 您必须在过滤器回调中返回布尔值。如果函数返回false，它将过滤掉数组中的元素，如果返回true，则保留它。由于您不是返回布尔值而是一个字符串，因此由于javascript将非空值或未定义的值视为true，因此它将返回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），因此您的代码将不会返回商品类型，而是返回商品列表中的选定商品。您可能想做更多这样的事情

package com.katika;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.oblador.vectoricons.VectorIconsPackage;
import com.android.freshchatSdk.FreshChatReactPackage;
import com.amazonaws.amplify.pushnotification.RNPushNotificationPackage;
import com.robinpowered.react.Intercom.IntercomPackage;
import io.intercom.android.sdk.Intercom;
import com.masteratul.RNAppstoreVersionCheckerPackage;
import io.xogus.reactnative.versioncheck.RNVersionCheckPackage;
import com.microsoft.codepush.react.CodePush;
import io.invertase.firebase.RNFirebasePackage;
import com.ocetnik.timer.BackgroundTimerPackage;
import io.underscope.react.fbak.RNAccountKitPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import io.underscope.react.fbak.RNAccountKitPackage;
import io.invertase.firebase.analytics.RNFirebaseAnalyticsPackage;
import io.invertase.firebase.notifications.RNFirebaseNotificationsPackage;
import io.invertase.firebase.functions.RNFirebaseFunctionsPackage;
import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;
import io.invertase.firebase.fabric.crashlytics.RNFirebaseCrashlyticsPackage; // <-- Add this line
import io.invertase.firebase.crash.RNFirebaseCrashPackage; // <-- Add this line
import io.invertase.firebase.firestore.RNFirebaseFirestorePackage; // <-- Add this lin.util.Arrays;e
import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage ;  // <--- Import Package

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        @Override
        protected String getJSBundleFile() {
        return CodePush.getJSBundleFile();
        }

    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new VectorIconsPackage(),
            new FreshChatReactPackage(),
            new RNPushNotificationPackage(),
            new IntercomPackage(),
            new RNAppstoreVersionCheckerPackage(),
            new RNVersionCheckPackage(),
            new CodePush("bySq16a9P0d2pIdf9ZZvyaRJbzcOSJ8Sg7bHX", getApplicationContext(), BuildConfig.DEBUG),
            new RNFirebasePackage(),
            new BackgroundTimerPackage(),
            new RNAccountKitPackage(),
            new RNFirebaseAnalyticsPackage(),
            new RNFirebaseNotificationsPackage(),
            new RNFirebaseFunctionsPackage(),
            new RNFirebaseMessagingPackage(),
            new RNFirebaseCrashlyticsPackage(),
            new RNFirebaseFirestorePackage(),
            new RNFirebaseCrashPackage(),
            new ReactNativePushNotificationPackage () // <-- Add this line
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    Intercom.initialize(this, "android_sdk-83be2abcbbe01abc199897d691de1c8b47f703d3", "tduveiqw");
  }

 /* @Override
  public boolean canOverrideExistingModule(){
    return true;
  }*/
}

（findIndex docs）

或者，您可以使用reduce函数，但是该函数将返回并围绕所选项目类型进行排列，看起来您似乎主要想执行查找操作。您甚至可能要考虑将var selectedType = complexObject. itemDetails[complexObject.itemList.findIndex(elm => elm == selectedOption)];转换成这样的对象

itemDetails

这样，您只需检查

就可以找到类型。

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

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 个答案: