javascript - 添加/覆盖数组中的对象

Question

如果 title 属性存在，我试图覆盖数组中的对象，否则只需将其推送到数组中。我发现了两种方法，我想知道哪一种是首选。

性能并不是真正的问题，但我想知道可变性是否可能是问题，或者只是有更好的方法来做到这一点。

在此片段中，我使用 for 循环来编辑原始数组:

const data = [
  {
    title: 'AAA',
    people: [ 'John', 'Megan',]
  },{
    title: 'BBB',
    people: [ 'Emily', 'Tom']
  }
]

// If inputTitle is not on any of data's title it will append not overwrite
// e.g. const inputTitle = 'CCC'
const inputTitle = 'AAA'
const inputPeople = ['Peter', 'Jane']

for (const obj of data) {
  if (obj.title === inputTitle) {
    obj.people = inputPeople
    break
  } else {
    data.push({
      title: inputTitle,
      people: inputPeople
    })
    break
  }
}

console.log(data)

这里我使用高阶函数和展开来执行相同的操作:

const data = [
  {
    title: 'AAA',
    people: [ 'John', 'Megan',]
  },{
    title: 'BBB',
    people: [ 'Emily', 'Tom']
  }
]

// If inputTitle is not on any of data's title it will append not overwrite
// e.g. const inputTitle = 'CCC'
const inputTitle = 'AAA'
const inputPeople = ['Peter', 'Jane']

let res = []

if (data.some(({ title }) => title === inputTitle)) {
  res = data.map(obj => {
    if (obj.title === inputTitle) 
      obj.people = inputPeople
    return obj
  })
} else {
  res = [...data, { title: inputTitle, people: inputPeople}]
}

console.log(res)

在实际任务中，我使用节点从 json 文件中读取 data 数组，并将更改写回其中。

Answer 1

如果这是一个常见的用例，您将在同一数据结构上执行多次，那么您最好使用按标题键控的普通对象，因为这样操作就很简单了。您仍然可以将标题也保留为您拥有的属性。

const data = {
  AAA: {
    title: 'AAA',
    people: [ 'John', 'Megan',]
  },
  BBB: {
    title: 'BBB',
    people: [ 'Emily', 'Tom']
  }
};

const title = 'AAA';
const people = ['Peter', 'Jane'];

data[title] = { title, people };  // yes, it's that simple then...

console.log(data);

如果你确实需要数组结构，那么你可以考虑暂时切换，然后进行所有操作，然后再回到原来的格式:

let data = [
  {
    title: 'AAA',
    people: [ 'John', 'Megan',]
  },
  {
    title: 'BBB',
    people: [ 'Emily', 'Tom']
  }
];

const title = 'AAA';
const people = ['Peter', 'Jane'];

// switch to other data structure...
let map = Object.fromEntries(data.map(o => [o.title, o]));

// Manipulate
map[title] = { title, people };

// ...and back:
data = Object.values(map);

console.log(data);