javascript - polymer JS : How to Update all Items in an Array with set() and a forEach loop properly

Question

我有一个如下所示的数组:

items: [
    {title: 'First Title', completed: false}, 
    {title: 'Second Title', completed: false}, 
    {title: 'Third Title', completed: false}
];

我想将每个设置item设置为true。为此，我有一个按钮可以触发一个点击事件，该事件执行以下代码片段。

Polymer 团队使用 for 循环设置 bool 值:

for (var i = 0; i < this.items.length; ++i) {
    this.set(['items', i, 'completed'], true);
}

我个人更喜欢使用 forEach 循环，因为我想将 Polymer 与不同的框架进行比较，而我恰好在类似情况下使用 forEach 循环。

我的工作解决方案:

var that = this;
this.items.forEach(function(item) {
    var i = that.items.indexOf(item);

    that.set('items.' + i + '.completed', true);
    // or
    // that.set(['items', i, 'completed'], true);
});

特别是我使用 dots 与 i 连接的部分对我来说似乎很糟糕。

<小时/>

与 Vue 相同的代码:

this.items.forEach(function(item) {
    return item.completed = true;                   
});

<小时/>

Polymer API 指出:

set(path, value, root) path (string|Array<(string|number)>) Path to the value to read. The path may be specified as a string (e.g. foo.bar.baz) or an array of path parts (e.g. ['foo.bar', 'baz']). Note that bracketed expressions are not supported; string-based path parts must be separated by dots. Note that when dereferencing array indicies, the index may be used as a dotted part directly (e.g. users.12.name or ['users', 12, 'name']). value * Value to set at the specified path. root Object= Root object from which the path is evaluated.

<小时/>

问题:

因为我使用索引的部分似乎有点hacky，因为缺乏更好的术语，我想知道，是否有更方便的方法来使用 forEach 循环Polymer 更新数组中的所有项目。

谢谢。

Answer 1

forEach 的回调函数可以有第二个参数来引用当前索引。这也适用于 Array 的 map、every、some 和 filter 方法。

ES5 版本

this.items.forEach(function(item, index) {
  this.set('items.'+index+'.completed', true);
}.bind(this));

ES6 版本

this.items.forEach((item, index) => this.set(`items.${index}.completed`, true));

来源:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Parameters