使用ES6中的map函数更新对象的属性值

Question

我正在尝试在ES6中对此进行编码。以下是我要实现的目标。假设我有一个名为的对象数组schools。

let schools = [
    {name: 'YorkTown', country: 'Spain'},
    {name: 'Stanford', country: 'USA'},
    {name: 'Gymnasium Achern', country: 'Germany'}
];

现在，我想编写一个函数editSchoolName，该函数将带有3个参数schools（这是我在上面定义的数组）oldName和name。

我将在参数中传递学校的名称，oldName并且该名称应使用参数中的值进行更新name。

我不想更改变量的状态，schools因此我正在使用一个map函数，该函数将返回具有更改的新数组。

该editSchoolName函数将这样调用-

var updatedSchools = editSchoolName(schools, "YorkTown", "New Gen");

在此，名称YorkTown应替换为name New Gen。因此，数组的期望值updatedSchools应为-

let updatedSchools = [
    {name: 'New Gen', country: 'Spain'},
    {name: 'Stanford', country: 'USA'},
    {name: 'Gymnasium Achern', country: 'Germany'}
];

这就是我的editSchoolName函数的样子-

const editSchoolName = (schools, oldName, name) =>
    schools.map(item => {
        if (item.name === oldName) {
          /* This is the part where I need the logic */
        } else {
          return item;
        }
    });

需要帮助进行editSchoolName功能更改以实现上述期望结果。

Answer 1

试试这个，ES6Object.assign()创建数组元素的副本并更新新对象。

let schools = [{
        name: 'YorkTown',
        country: 'Spain'
    },
    {
        name: 'Stanford',
        country: 'USA'
    },
    {
        name: 'Gymnasium Achern',
        country: 'Germany'
    }
];

const editSchoolName = (schools, oldName, name) => {
    return schools.map(item => {
        var temp = Object.assign({}, item);
        if (temp.name === oldName) {
            temp.name = name;
        }
        return temp;
    });
}

var updatedSchools = editSchoolName(schools, "YorkTown", "New Gen");
console.log(updatedSchools);
console.log(schools);

Answer 2

您需要返回更新后的对象：

const editSchoolName = (schools, oldName, name) =>
  schools.map(item => {
      if (item.name === oldName) {
        return {...item, name};
      } else {
        return item;
      }
});

Answer 3

   const editSchoolName = (schools, oldName, newName) =>
    schools.map(({name, ...school }) => ({ ...school, name: oldName === name ? newName : name }));

您可以通过使用三元来缩短它。