Question

我正在使用几个选择器来获取设置我的Google地图的边界。他们基本上从数据中返回最低和最高的经度/纬度点。代码可以工作，但是我觉得这确实很麻烦，可以重构，但是我不太确定如何做。

代码如下：

const getMinLat = data =>
  data.reduce((prev, current) => {
    return prev.coords[0] < current.coords[0] ? prev : current
  })

const getMaxLat = data =>
  data.reduce((prev, current) => {
    return prev.coords[0] > current.coords[0] ? prev : current
  })

const getMinLng = data =>
  data.reduce((prev, current) => {
    return prev.coords[1] < current.coords[1] ? prev : current
  })

const getMaxLng = data =>
  data.reduce((prev, current) => {
    return prev.coords[1] > current.coords[1] ? prev : current
  })

const getBounds = data => [
  {
    lat: getMinLat(data).coords[0],
    lng: getMinLng(data).coords[1],
  },
  {
    lat: getMaxLat(data).coords[0],
    lng: getMaxLng(data).coords[1],
  },
]

Answer 1

也许是

"configuration"

Answer 2

您可以使用Array.map()使其更简洁：

const getCoordsArray = (data, index) =>
  data.map(o => o.coords[index]);

const getMin = (data, index) =>
  Math.min(...getCoordsArray(data, index));

const getMax = (data, index) =>
  Math.max(...getCoordsArray(data, index));

const getBounds = data => [getMin, getMax]
  .map(m => ({
    lat: m(data, 0),
    lng: m(data, 1),
  }));

Answer 3

只遍历一次列表：

const getBounds = data => 
    data.reduce(
        ([
             {lat: minLat, lng: minLng}, 
             {lat: maxLat, lng: maxLng}
         ], 
         {coords: [lat, lng]}
        ) =>
       [
            {
                lat: Math.min(minLat, lat), 
                lng: Math.min(minLng, lng)
            }, 
            {
                lat: Math.max(maxLat, lat), 
                lng: Math.max(maxLng, lng)
            }
      ], 
      [{lat: Infinity, lng: Infinity}, {lat: -Infinity, lng: -Infinity}]
    )

我事先同意，可读性不是这里的优势。但是它只通过列表一次。

在习惯于解构语法之后，很明显Math.max和maxLng/maxLat在一起可以减少使用错误变量的可能性

[UPD]，并且不需要使用Infinity/-Infinity作为初始值（我用它们来强调后面的想法）。对于经度/纬度，我们可以使用180/-180作为最极端的值

React JS：重构Redux选择器

3 个答案: