javascript - indexOf 不是一个函数——Angular 2/Typescript

Question

这让我摸不着头绪......

我有一个名为 filterProducts 的函数，只要用户单击复选框，它就会在我的 Angular 2 组件中调用。现在，该方法查找所有使用特定类名选中的复选框，获取它们的值，然后尝试对数组进行排序。相当简单...

// Called when any checkbox is checked or unchecked

filterProducts() {

// Grab all "Program" checkboxes that are checked
var programsToInclude = $(".programCheckbox:checkbox:checked").map(function () { return this.value; });

// If any "Program" checkboxes are checked, filter the list accordingly
if (programsToInclude)
    this.filteredProducts = this.filteredProducts.filter(x => programsToInclude.indexOf(x.programName) > -1);
}

为什么会出现以下错误？

ORIGINAL EXCEPTION: TypeError: programsToInclude.indexOf is not a function

programsToInclude肯定是字符串数组，应该有这个功能吧？

Answer 1

programsToInclude 不是一个数组，它是一个 jQuery 对象。 jQuery 对象有很多数组方法，但不是全部。

要在使用 jQuery#map 后得到一个数组，你需要在最后添加一个 .get():

var programsToInclude = $(".programCheckbox:checkbox:checked").map(function () { return this.value; }).get();
// ---------------------------------------------------------------------------------------------------^^^^
if (programsToInclude) { // <== This check is pointless, see below the fold for why
    this.filteredProducts = this.filteredProducts.filter(x => a.indexOf(x.programName) > -1);
}

或者，尽早使用 get 获取 native 数组，这需要调整您的 filter 调用:

var programsToInclude = $(".programCheckbox:checkbox:checked").get().map(function(e) { return e.value; });
// -----------------------------------------------------------------^^^^----------^-----------^
if (programsToInclude) { // <== Again, see below the fold
    this.filteredProducts = this.filteredProducts.filter(x => programsToInclude.indexOf(x.programName) > -1);
}

不过，在这两种情况下，programsToInclude 最终都是一个数组。如果以后想再次将其用作 jQuery 对象，则必须将其转换回来。如果您确实想稍后使用它，您可以将数组分开:

var programsToInclude = $(".programCheckbox:checkbox:checked").map(function(e) { return e.value; });
if (programsToInclude) { // <== Same note
    let a = this.programsToInclude.get();
    this.filteredProducts = this.filteredProducts.filter(x => a.indexOf(x.programName) > -1);
}

---

为什么检查毫无意义:一个 jQuery 对象，即使是一个空对象，也总是真实的。如果要检查是否为空，请使用 if (obj.length)。但是，如果您要执行 filter，这样的检查没有多大意义，无论如何，当对象为空时，filter 是空操作。