在函数中使用 map 正在改变主数组

2022-01-19 00:00:00 frontend javascript ecmascript-6

我是 JS 新手，并试图在我的代码中使用 map array.prototype.map() 函数.我需要在不更改主对象结构的情况下向数组的每个元素添加一个属性.我有这个对象数组

I'm new to JS and trying to use map array.prototype.map() function in my code. I need to add one property to the array's each element without changing the main object structure. I have this array of objects

const nav = [
  {
    name: 'Home',
    title: 'Dashboard',
    icon: 'home',
  },
  {
    name: 'About',
    icon: 'layout-auto',
    title: 'About',
  },
  {
    name: 'Applications',
    icon: 'applications',
    title: 'Applications',
  },
];

通过此数组映射后，它还会更改主导航数组的对象.

after mapping through this array it also chaging main nav array's objects.

const mappedNav = (arr) => {
  let newArr = arr.map(nav => {
    nav.title = 'test';
    return element;
  });
}

mapNav(nav);

console.table(nav);

如何向新数组的对象添加属性而不改变它们?

How can I add properties to the new array's objects wihout mutating them?

推荐答案

您可以使用 扩展语法 (...).在对象字面量内使用扩展会将对象的(自己的可枚举)键复制到新创建的对象字面量({})中.这样，您将每个对象映射到一个新对象，该对象具有与当前对象相同的键和值，以及覆盖/新的 title 属性.

You can use the spread syntax (...). Using spread inside of an object literal will copy the (own enumerable) keys of the object into the newly created object literal ({}). This way you're mapping each object to a new object, which has the same keys and values as the current object, along with an overwritten/new title attribute.

const nav = [ { name: 'Home', title: 'Dashboard', icon: 'home', }, { name: 'About', icon: 'layout-auto', title: 'About', }, { name: 'Applications', icon: 'applications', title: 'Applications', } ];

const res = nav.map(obj => {
  return {...obj, title: "test"};
});
console.log(res);

注意对象传播是ES9，如果你想要ES6，你可以使用Object.assign() 代替，它将一个(或多个)对象的属性相互合并.

Note that object spread is ES9, if you want ES6, you can use Object.assign() instead, which will merge the properties of one (or more) objects into each other.

const nav = [ { name: 'Home', title: 'Dashboard', icon: 'home', }, { name: 'About', icon: 'layout-auto', title: 'About', }, { name: 'Applications', icon: 'applications', title: 'Applications', } ];

const res = nav.map(obj => {
  return Object.assign({}, obj, {title: "test"});
// merge -------------(1^)-(2^)--(3^)
// (1) - the new object to return (used to make a shallow copy)
// (2) - merge obj (2) into (1)
// (3) - merge keys from {title: "test"} into the result of (2) above 
});
console.log(res);

相关文章