forEachで回したobjectの値を空の配列にpushしたい。

投稿者: Anonymous

forEachで回す配列のobject

[
    {
      value: 'ja', label: '日本語', locale: 'ja-JP'
    },
    {
      value: 'en', label: 'English', locale: 'en-US'
    },
    {
      value: 'cn', label: '简体中文', locale: 'zh-CN'
    },
  ];

引数で指定したlangの配列オブジェクトの値に{cv.label}ではアクセスできません。

  const emptyArr = [];
const arr = lang.forEach((cv) => (
  emptyArr.push({label: {cv.label}, value: {cv.value} })
));

欲しい結果

const arr = [
    { label: '日本語', value: 'ja' },
    { label: 'English', value: 'en' },
    { label: '简体中文', value: 'cn' },
  ];

解決

オブジェクト初期化子でオブジェクトを生成する場合には、オブジェクトのプロパティ名と、それに関連する値の組み合わせのリストとする必要があり、 {cv.label}{cv.value} はエラーを発生させます。これは期待される出力結果を考慮すると、以下のように修正出来ます。

_x000D_

_x000D_

const lang = [{_x000D_
    value: 'ja',_x000D_
    label: '日本語',_x000D_
    locale: 'ja-JP'_x000D_
  },_x000D_
  {_x000D_
    value: 'en',_x000D_
    label: 'English',_x000D_
    locale: 'en-US'_x000D_
  },_x000D_
  {_x000D_
    value: 'cn',_x000D_
    label: '简体中文',_x000D_
    locale: 'zh-CN'_x000D_
  },_x000D_
];_x000D_
_x000D_
_x000D_
const emptyArr = [];_x000D_
const arr = lang.forEach((cv) => (_x000D_
  emptyArr.push({_x000D_
    label: cv.label,_x000D_
    value: cv.value_x000D_
  })_x000D_
));_x000D_
console.log(emptyArr);

_x000D_

_x000D_

_x000D_

また、今回の場合は forEach メソッドと push メソッドの代わりに map メソッドと分割代入を使い、以下のようにすることが出来ます。

_x000D_

_x000D_

const lang = [{_x000D_
    value: 'ja',_x000D_
    label: '日本語',_x000D_
    locale: 'ja-JP'_x000D_
  },_x000D_
  {_x000D_
    value: 'en',_x000D_
    label: 'English',_x000D_
    locale: 'en-US'_x000D_
  },_x000D_
  {_x000D_
    value: 'cn',_x000D_
    label: '简体中文',_x000D_
    locale: 'zh-CN'_x000D_
  },_x000D_
];_x000D_
_x000D_
const arr = lang.map(({label, value}) => ({label, value}));_x000D_
_x000D_
console.log(arr);

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *