javascript - Adding a new property to an Object that exists in an Array, using .map() - Stack Overflow

admin管理员组

文章数量:1402797

I'm trying to conditionally add a property to an object in an array using .map(), but I seem to be missing something. My array of objects remains unchanged after the map is plete. All of this is the result of trying to resolve the ESLint error 'no-param-reassign' if that helps understand why I'm doing this.

I've made a rudimentary example of what I'm trying to acplish here: 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, pleted: true })
    return { ...book, pleted: true };
  }
  console.log({ ...book, pleted: false })
  return { ...book, pleted: false };
});

console.log('after', aList);

I'm trying to conditionally add a property to an object in an array using .map(), but I seem to be missing something. My array of objects remains unchanged after the map is plete. All of this is the result of trying to resolve the ESLint error 'no-param-reassign' if that helps understand why I'm doing this.

I've made a rudimentary example of what I'm trying to acplish here: 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, pleted: true })
    return { ...book, pleted: true };
  }
  console.log({ ...book, pleted: false })
  return { ...book, pleted: false };
});

console.log('after', aList);

• javascript
• arrays
• object
• babeljs

Share Improve this question Follow asked Feb 14, 2017 at 18:04 Tyler HTyler H 47011 gold badge77 silver badges1818 bronze badges 1

• 3 .map() doesn't mutate the original. It creates a new Array, which is returned, so var newMap = aList.map(... – user1106925 Commented Feb 14, 2017 at 18:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You could use Array#forEach, because you are not using the result of Array#map.

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

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

console.log(aList);

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

For an all new array, you could use Array#map and use the result of it. For adding a new property to an object, you could use Object.assign, which mutates and returns the object at the first parameter.

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

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

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

I think, it could be written much cleaner and readable in that way.

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

本文标签： javascriptAdding a new property to an Object that exists in an Arrayusing map()Stack Overflow