更新数组中对象的更简洁方法

Question

我有一个对象数组，格式如下：

{
  "_id": "590cbcd9bf2b9b18ab3c3112",
  "title": "",
  "content": "Create Notes Webapp",
  "checked": true,
  "listID": "590cbc61bf2b9b18ab3c3110"
},
{
  "_id": "590cfe5a86fe0908c560c2b0",
  "title": "A Note 01",
  "content": "My first note.",
  "checked": false,
  "listID": "590cbe15bf2b9b18ab3c3114"
}

这是我必须更新每个项目的代码：

  onTextChange = (key, note, value) => {
    clearTimeout(timeoutID);
    switch (key) {
      default:
        break;
      case 'title':
        note.title = value;
        break;
      case 'checked':
        note.checked = value;
        break;
      case 'content':
        note.content = value;
        break;
    }
    var notes = this.state.notes;
    var id;
    for (var i in notes) {
      if (notes[i]._id === note._id) {
        notes[i] = note;
        id = i;
        break;
      }
    }
    this.setState({ notes }, () => { timeoutID = setTimeout(() => this.updateNote(this.state.notes[id]), 3000); });

  }

这是这样称呼的：

onChange={(e, value) => this.onTextChange('title', note, value)}

有没有比使用 switch 语句更新对象中的指定项更好的方法？另外，有没有比 for 循环更简单的方法来扫描数组中的 id？

Answer 1

有没有比使用 switch 语句更新对象中的指定项更好的方法？

您可以使用此语法来更新便笺对象。这也确保它不会将新属性插入到笔记中。

if (note.hasOwnProperty(key) {
  note[key] = value
}

为了更简洁的语法来更新你可以做的笔记

var newNotes = this.state.notes.map(n => n._id === note._id ? note : n);
this.setState({notes: newNotes});

这将创建一个与当前状态相同的 newNotes 数组，除了它将替换传入的 ._id 等于数组中的那个。

您还必须调整 updateNote 调用，因为您不再保存索引，但您可能只使用 note 变量？

Answer 2

你可以这样做而不是 switch，但你必须检查它是否存在于对象中。

 onTextChange = (key, note, value) => {
clearTimeout(timeoutID);
if(note[key]){
    note[key] = value;
}
var notes = this.state.notes;
var id;

}

至于循环，大多数标准（如 airbnb 和 google）都首选它。 如果你想要一个更好的方法，你可以根据情况对对象数组做几件事，如果你使用的是 es5、es6，但你的选择是： 1. 将对象数组变成一个对象，其中键（属性名称）是您的 id（它们可以是任何字符串）。 2.如果使用es6，你可以转换成地图，它可以更轻更快地获取所需的对象。

希望有帮助。

Answer 3

正如 noveyak 所说，您可以使用括号语法访问 Javascript 中的属性，其中键是包含属性名称的字符串（就像您现在拥有的那样）。

Javascript 有几种不同的访问对象属性的方法：

note[key] = value;

// if key is 'title', it will be the same as:
note.title = value;

// also the same as:
note['title'] = value;

对于您的第二个问题，您可以将这些对象存储在另一个对象中，并将 id 作为属性值（本质上将其用作映射），而不是循环遍历数组。这样您就可以通过 id 直接访问注释条目。例如：

allNotes = {}; // create a new object
someNotes = {
 'title': '',
 'content': 'Create Notes Webapp',
 'checked': true,
 'listID': '590cbc61bf2b9b18ab3c3110'
};
allNotes[idOfNote] = someNote; // where idOfNote holds the actual id of the note as a string

您可以在 Mozilla 的参考网站 here 上阅读有关 Javascript 属性访问器的更多信息。

Javascript 也有适当的映射，你可以使用它来代替对象，如果你被允许使用 ES2015，它会更安全、更快。您可以通过 here 了解它（还有 Mozilla 文档）。