web-dev-qa-db-ja.com

ES6のマップ機能を使用してオブジェクトの属性値を更新する

これをES6でコーディングしようとしています。以下は私が達成しようとしていることです。 schoolsというオブジェクトの配列があるとします。

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

ここで、editSchoolNameという関数を記述します。これは、schools（上で定義した配列）、oldName、nameの3つのパラメーターを取ります。

パラメーターoldNameで学校の名前を渡します。その名前は、パラメーターnameの値で更新する必要があります。

変数schoolsの状態を変更したくないので、変更した新しい配列を返すmap関数を使用しています。

editSchoolName関数は次のように呼び出されます-

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

ここでは、YorkTownという名前を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関数を変更する際に助けが必要です。

javascriptarraysecmascript-6es6-map
7
Rito

eS6 Object.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);
3
Rahul Sharma

更新されたオブジェクトを返す必要があります。

const editSchoolName = (schools, oldName, name) =>
  schools.map(item => {
      if (item.name === oldName) {
        return {...item, name};
      } else {
        return item;
      }
});
4
klugjo
   const editSchoolName = (schools, oldName, newName) =>
    schools.map(({name, ...school }) => ({ ...school, name: oldName === name ? newName : name }));

三項を使用して短縮できます。

3
Jonas Wilms

コメント部分のみを編集したい場合：

const editSchoolName = (schools, oldName, name) =>
    schools.map(item => {
        if (item.name === oldName) {
          var newItem = Object.assign({},item);
          newItem.name = name;
          return newItem;
        }
        else{
          return item;
        }
    });
1
Anurag Lal

どうして答えがどれも単純な解決策を与えないのか

const editSchoolName = (schools, oldName, newName) =>
      schools.map(school => { if (school.name === oldName) school.name = newName;
      return school; 
});
0
Sumer