使用.map()向存在于数组中的对象添加新属性

Question

我正在尝试使用.map()有条件地向数组中的对象添加属性，但我似乎漏掉了什么。在.map()完成后，我的对象数组保持不变。所有这些都是为了解决ESLint错误“no-param-reassign”，如果这有助于理解我为什么要这样做。

我已经制作了一个简单的示例来说明我想要实现的内容: jsfiddle。

var aList = [{
    Title: "Enders Game",
    Rating: 8
  },
  {
    Title: "Harry Potter",
    Rating: 10
  }];

console.log('before', aList);

aList.map(function(book) {
    if(book.Title == "Enders Game"){
    console.log({ ...book, completed: true })
    return { ...book, completed: true };
  }
  console.log({ ...book, completed: false })
  return { ...book, completed: false };
});

console.log('after', aList);

- Tyler H

---

.map()不会改变原来的数组，它会创建一个新的数组并返回。因此，使用.map()时需要将返回的新数组存储在一个新的变量中，例如：var newMap = aList.map(...。 - user1106925

Answer 1

你可以使用 Array#forEach，因为你并没有使用 Array#map 的结果。

var aList = [{ Title: "Enders Game", Rating: 8 }, { Title: "Harry Potter", Rating: 10 }];

aList.forEach(function(book) {
    book.completed = book.Title == "Enders Game";
});

console.log(aList);

.as-console-wrapper { max-height: 100% !important; top: 0; }

对于一个全新的数组，你可以使用 Array#map 并使用其结果。如果要添加一个新属性到一个对象中，你可以使用 Object.assign，它会改变并返回第一个参数所表示的对象。

var aList = [{ Title: "Enders Game", Rating: 8 }, { Title: "Harry Potter", Rating: 10 }],
    newList = aList.map(book => Object.assign({}, book, {completed: book.Title == "Enders Game"}));

console.log(aList);
console.log(newList);

.as-console-wrapper { max-height: 100% !important; top: 0; }

- Nina Scholz

Answer 2

我认为，用那种方式编写代码会更加简洁易读。

  const aList = [{ Title: 'Enders Game', Rating: 8 }, { Title: 'Harry Potter', Rating: 10 }];
  const newList = aList.map((book) => (
    {
      ...book,
      completed: book.Title === 'Enders Game',
    }));

- ce.arifemre