javascript - 对象解构 - 如何以更短的方式重写此函数？

Question

我正在使用 babel 和 ES6，我想知道是否可以用更短的方式编写以下代码，特别是我不喜欢在 return 语句中手动重新映射 pf 属性。

  const locations = action.payload.list.map(location => {
    return {
      id: location.id,
      name: location.name,
      country: location.sys.country
    }
  })

Answer 1

您可以利用对象解构在迭代时从当前对象获取 "id"、"name" 和 "sys" 属性。由于我们要从 "sys" 对象获取 "country" 属性，因此我们对 "sys" 属性执行额外的解构以获取 "country" 属性，语法为 propertyNameOfObjectReference:{propertyNameOfNestedObjectToGet}；请注意下一个大括号 { 之前的冒号 :，其中 propertyNameOfNestedObjectToGet 被对象文字大括号 {、} 包围。

另请注意，“name” 的值是 stacksnippets 中的字符串，其中应该是数字；在某些环境中，name 可以全局定义为字符串 window.name。为了防止可能出现的值类型转换问题，您可以在解构时将 "name" 属性设置为 name 以外的变量名称，然后在返回的对象中将属性设置为 "name" 。

const action = {payload:{list:[{name:123,id:456,sys:{country:789}}]}};

const locations = action.payload.list.map(({id, name:_name, sys:{country}}) =>
                    ({id, name:_name, country}));
   
console.log(locations);