TypeScript中如何在Array.filter内使用传入参数作为对象访问字段？

你遇到的是JavaScript/TypeScript中对象动态属性访问的常见场景，核心错误原因有两个：

1. 点语法option.keyword会固定读取对象名为keyword的属性，无法读取变量keyword存储的属性名
2. 你调用时传入了带option.前缀的字符串，无法对应到对象的实际属性路径

正确实现步骤 #

1. 调用时只传入需要过滤的属性名字符串，不需要加option.前缀，比如要过滤数组项的name属性，写法如下：

this._filter(value, this.options, 'name')

2. 过滤函数内使用方括号语法动态读取属性，同时可以增加非空判断避免属性不存在时报错：

private _filter(value: string, array: any[], keywordField: string): any[] {
  const filterValue = value.toLowerCase();
  return array.filter(option => {
    // 若属性不存在直接跳过，可根据业务需求调整逻辑
    if (!option[keywordField]) return false;
    return option[keywordField].toLowerCase().includes(filterValue);
  });
}

扩展说明（可选） #

如果需要支持嵌套属性过滤，比如要读取option.user.info.name，可以把keywordField参数改为属性路径数组['user','info','name']，函数内递归读取属性即可。

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