javascript - ES6中如何简化对象映射？

Question

我目前正在使用以下代码，从 action.payload 中获取一些属性并分配给对象weather。

我想知道在 ES6 中是否有更优雅、更简洁的方法来执行相同的操作。

let weather = {}
weather.name = action.payload.name
weather.country = action.payload.sys.country
weather.temperature = action.payload.main.temp
weather.temperatureMin = action.payload.main.temp_min
weather.temperatureMax = action.payload.main.temp_max
weather.weatherMain = action.payload.weather[0].main
weather.weatherDescription = action.payload.weather[0].description
weather.weatherIcon = action.payload.weather[0].icon
weather.updatedTime = new Date().toString()
weather.windDegree = action.payload.wind.deg
weather.windSpeed = action.payload.wind.speed
weather.visibility = action.payload.visibility

Answer 1

这里没有特定的语言级别的魔法。您正在从 action 对象的多个级别进行拉取，并动态重命名许多属性。如果名称保持不变，对象解构和结构化赋值可能会彻底解决问题。但就目前情况而言，您可以获得的最大清晰度是不要重复这么多名称。例如:

let payload = action.payload
let weather = {
  name:           payload.name,
  country:        payload.sys.country,
  temperature:    payload.main.temp,
  temperatureMin: payload.main.temp_min,
  temperatureMax: payload.main.temp_max,
  weatherMain:    payload.weather[0].main,
  weatherDescription: payload.weather[0].description,
  weatherIcon:    payload.weather[0].icon,
  updatedTime:    new Date().toString(),
  windDegree:     payload.wind.deg,
  windSpeed:      payload.wind.speed,
  visibility:     payload.visibility
} 

当然可以使用更多 ES2015 解构功能作为此作业的一部分。例如:

const { payload } = action
const { main, weather, wind, sys } = payload
let weather = {
  name:           payload.name,
  country:        sys.country,
  temperature:    main.temp,
  temperatureMin: main.temp_min,
  temperatureMax: main.temp_max,
  weatherMain:    weather[0].main,
  weatherDescription: weather[0].description,
  weatherIcon:    weather[0].icon,
  updatedTime:    new Date().toString(),
  windDegree:     wind.deg,
  windSpeed:      wind.speed,
  visibility:     payload.visibility
}

我通常不建议采取进一步的步骤。在我看来，这并不一定能让事情变得更清楚。至少，需要考虑一些权衡。原始物体与其多层结构之间的自然对应关系变得更加隐藏；人们需要记住并解释诸如 wind、weather、main 和 sys 等子对象的起源。但从好的方面来说，它在 ES2015 的使用中更简洁、更激进。您必须判断这是更好还是更奇特。