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

Posted 2023-02-22

【中文标题】更新数组中对象的更简洁方法

【英文标题】：Cleaner way to update object in array

【发布时间】：2017-10-04 12:27:36

【问题描述】：

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

  "_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？

【问题讨论】：

为什么要使用settimeout？如果你想在 setState 完成后运行代码：setState(notes, ()=>//your code)

其实很好。我忘了我应该在 setState 回调上设置计时器

【参考方案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 变量？

【讨论】：

或if (key in note)。

【参考方案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，你可以转换成地图，它可以更轻更快地获取所需的对象。

希望有帮助。

【参考方案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 文档）。