使用rxjs筛选包含值时遇TypeError: value.includes is not a function问题求助

错误原因 #

你遇到的TypeError: value.includes is not a function，是因为Object.values(item)返回的数组中存在非字符串/非数组类型的值（比如数字、null、undefined、布尔值等），这些类型没有includes方法，直接调用就会抛出错误。

修复方案 #

方案1：统一转为字符串匹配（兼容所有可转字符串的类型） #

将任意类型的value转为字符串后再调用includes，确保不会因类型问题报错：

fetchPaginatedList(pageSize, searchTerm) {
    return this.list$
        .pipe(
            map((list) =>
                list.filter((item) =>
                    Object.values(item).some((value) =>
                        String(value).includes(searchTerm)
                    )
                )
            ),
            map((list) => ({
                size: list.length.toString(),
                list: list.slice(0, pageSize), // 用slice替代splice，避免修改原数组
            }))
        )
        .toPromise();
}

修改说明：

• String(value)：把数字、布尔值等类型转为字符串，确保includes能正常调用
• slice(0, pageSize)：替代splice，因为splice会直接修改原数组，slice返回新数组，符合RxJS无副作用的编程原则

方案2：仅针对字符串类型字段匹配（更严谨） #

如果只需要匹配对象中的字符串字段，可以先做类型校验，避免对非字符串字段进行无效匹配：

fetchPaginatedList(pageSize, searchTerm) {
    return this.list$
        .pipe(
            map((list) =>
                list.filter((item) =>
                    Object.values(item).some((value) =>
                        typeof value === 'string' && value.includes(searchTerm)
                    )
                )
            ),
            map((list) => ({
                size: list.length.toString(),
                list: list.slice(0, pageSize),
            }))
        )
        .toPromise();
}

修改说明：

• typeof value === 'string'：先判断值是否为字符串类型，只有字符串才执行includes匹配，跳过数字、null等类型

关于RxJS与includes结合的正确用法 #

你代码里的list.filter是数组的filter方法，而非RxJS操作符的filter。两者结合没有特殊限制，核心是确保调用includes的是字符串或数组类型。如果要使用RxJS的filter操作符（过滤整个数据流中的列表），可以参考以下示例（仅作拓展）：

fetchPaginatedList(pageSize, searchTerm) {
    return this.list$
        .pipe(
            // RxJS的filter操作符：仅处理非空列表
            filter(list => list.length > 0),
            map((list) =>
                list.filter((item) =>
                    Object.values(item).some((value) =>
                        String(value).includes(searchTerm)
                    )
                )
            ),
            map((list) => ({
                size: list.length.toString(),
                list: list.slice(0, pageSize),
            }))
        )
        .toPromise();
}

内容的提问来源于stack exchange，提问作者3gwebtrain