Angular/JS动态指定this变量指针，避免重复编写data.filter逻辑

你遇到的核心问题是之前的代码只是让currentChart指向了this.c1/this.c2/this.c3，但后续给currentChart赋值data.filter的结果时，只是改变了currentChart变量本身的引用，并没有修改原有的this.c#属性。

要实现直接把过滤结果赋值给目标this.c#，完全可以不用写重复的if-else分支，利用JavaScript中对象的动态属性访问特性就能搞定：

// 直接通过方括号语法动态访问this的属性并赋值
this[chart] = data.filter(o => {
  // 这里写你的过滤逻辑，比如：
  return o.value > 10;
});

为什么这能生效？ #

在JavaScript里，对象的属性访问有两种方式：

• 点语法：this.c1，适合属性名是固定字符串的情况
• 方括号语法：this[chart]，适合属性名是变量的情况

这里chart变量的值是'c1'/'c2'/'c3'，所以this[chart]就等价于this.c1/this.c2/this.c3，直接赋值就能修改对应的属性。

可选：增加合法性校验 #

如果担心chart可能传入非预期的值（比如'c4'），可以先做个校验，避免意外修改其他属性：

const validChartKeys = ['c1', 'c2', 'c3'];
if (validChartKeys.includes(chart)) {
  this[chart] = data.filter(o => {
    // 过滤逻辑
  });
} else {
  console.error(`不支持的图表标识符：${chart}，仅支持${validChartKeys.join(', ')}`);
}

这种写法既简洁又符合DRY（Don't Repeat Yourself）原则，再也不用写重复的条件分支啦。

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