Polymer中如何展开数组批量推送元素至filters属性以避免多次触发观察者？

嘿，这个场景我太熟悉了！刚好JavaScript里有个完美适配你需求的语法——扩展运算符（spread operator，也就是...），它就是用来展开数组元素的，完全能实现你想要的this.push('filters', filters*)这种效果。

核心问题拆解 #

你遇到的两个痛点：

• 循环里每次调用this.push('filters', value)会多次触发filters的观察者，不符合需求
• 直接this.push('filters', filters)会导致数组嵌套，数据结构混乱

而扩展运算符正好能解决这两个问题：它可以把数组里的所有元素“展开”成独立的参数，一次性传给this.push，既不会嵌套，又只会触发一次观察者。

具体实现代码 #

先把用户的查询处理成一个完整的value数组，再用扩展运算符一次性推送：

// 先处理所有查询单词，得到对应的value数组
const processedValues = this.query.split(" ").map(word => {
  // 这里替换成你原来的处理逻辑，生成每个word对应的value
  const value = /* 你的处理代码 */;
  return value;
});

// 用扩展运算符展开数组，一次性推送所有元素
this.push('filters', ...processedValues);

为什么这样可行？ #

• ...processedValues会把数组中的每个元素单独作为参数传入this.push，效果和你手动写this.push('filters', v1, v2, v3)完全一致，但不用关心元素的数量
• 因为是一次调用this.push，所以filters的观察者只会触发一次，完美解决多次触发的问题
• 不会产生嵌套数组，所有value都是直接添加到filters数组的顶层

兼容方案（极端场景） #

如果项目环境不支持ES6扩展运算符，也可以用Function.prototype.apply实现类似效果：

this.push.apply(this, ['filters'].concat(processedValues));

不过扩展运算符的写法更直观易读，优先推荐使用。

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