js便利数组，得到个二维数组[[最小值，最小值],[最大值，最大值]]？

Question

var newArr = [
{
    "imgUrl":"http://jcyj.mem.cegn.cn/gw/dwa-micro-file-simple/api/file/download/ae8dbd89-252d-4fd7-9cb2-098fb92e454b",
    "arr":[[39.867638888888884,116.39333333333333],[50.97152777777777,110.31527777777778]]
},
{
    "imgUrl":"http://jcyj.mem.cegn.cn/gw/dwa-micro-file-simple/api/file/download/ae8dbd89-252d-4fd7-9cb2-098fb92e454b",
    "arr":[[40.867638888888884,115.39333333333333],[40.97152777777777,120.31527777777778]]
},
{
"imgUrl":"",
"arr":[[],[]]
},{
"imgUrl":"",
"arr":[[],[]]
},
{
"imgUrl":"",
"arr":[[],[]]
},
{
"imgUrl":"",
"arr":[[],[]]
}
];

计算newArr数组所有对象中arr二维数组，比较后返回其中的[[最小值，最小值],[最大值，最大值]]；
要这种结果[[39.867638888888884, 115.39333333333333], [50.97152777777777, 120.31527777777778]]

Answer 1

const allArr = newArr.flatMap(({ arr }) => arr);
const allX = allArr.map(([x]) => x);
const allY = allArr.map(([_, y]) => y);
const result = [[Math.min(...allX), Math.min(...allY)], [Math.max(...allX), Math.max(...allY)]];

或者用 lodash

const result = _(newArr).flatMap(({ arr }) => arr)
    .unzip()
    .map(list => [_.min(list), _.max(list)])
    .unzip()
    .value();

---

下面是原答案，理解错了，以为是要分别计算每组里的最大/最小。留着供参考

看原数据 arr 中只有两个点坐标，其实是不需要遍历的。但是既然要遍历，可以先把所有横坐标和纵坐标分别分组，方便计算最大最小值

const result = newArr.map(({ imgUrl, arr }) => {
    const xx = arr.map(([x]) => x);
    const yy = arr.map(([_, y]) => y);

    return {
        imgUrl,
        arr: [
            [Math.min(...xx), Math.min(...yy)],
            [Math.max(...xx), Math.max(...yy)]
        ]
    };
});

当然，计算 xx 和 yy 分别遍历了两次，可以用一个 reduce 来完成一次遍历，但这不一定会更快

    const [xx, yy] = arr.reduce(([xx, yy], [x, y]) => {
        xx.push(x);
        yy.push(y);
        return [xx, yy];
    }, [[], []]);

也可以把后面的最大小最值一并算出来，在一个 reduce/for 完成

const result = newArr.map(({ imgUrl, arr }) => {
    let [minx, miny] = arr[0];
    let [maxx, maxy] = arr[0];
    for (let i = 1; i < arr.length; i++) {
        const [x, y] = arr[i];
        if (x < minx) { minx = x; }
        if (x > maxx) { maxx = x; }
        if (y < miny) { miny = y; }
        if (y > maxy) { maxy = y; }
    }

    return {
        imgUrl,
        arr: [[minx, miny], [maxx, maxy]]
    };
});

如果每组数据的 arr 都只有两个坐标（我就当是坐标了），那就不用去遍历，直接给值就好

const result = newArr.map(({ imgUrl, arr }) => {
    const [p1, p2] = arr;

    return {
        imgUrl,
        arr: [
            [Math.min(p1[0], p2[0]), Math.min(p1[1], p2[1])],
            [Math.max(p1[0], p2[0]), Math.max(p1[1], p2[1])],
        ]
    };
});

甚至可以应用更复杂一点的解构：

const result = newArr.map(({ imgUrl, arr }) => {
    const [[x1, y1], [x2, y2]] = arr;

    return {
        imgUrl,
        arr: [
            [Math.min(x1, x2), Math.min(y1, y2)],
            [Math.max(x1, x2), Math.max(y1, y2)],
        ]
    };
});

Answer 2

个人理解第一列中求最最小，第二列中求最大

const newArr = [
  {
    arr: [
      [39.867638888888884, 116.39333333333333],
      [50.97152777777777, 110.31527777777778]
    ]
  },
  {
    arr: [
      [40.867638888888884, 115.39333333333333],
      [40.97152777777777, 120.31527777777778]
    ]
  }
]

const result = newArr
  .map(item => item.arr)
  .reduce(
    (prev, curr) => {
      const [minArr, maxArr] = prev
      const [col1, col2] = curr

        // 第一列求最小值
      ;[minArr[0], minArr[1]] = [
        Math.min(minArr[0] || Infinity, col1[0]),
        Math.min(minArr[1] || Infinity, col1[1])
      ]
        // 第二列求最大值
      ;[maxArr[0], maxArr[1]] = [
        Math.max(maxArr[0] || -Infinity, col2[0]),
        Math.max(maxArr[1] || -Infinity, col2[1])
      ]
      return [minArr, maxArr]
    },
    [[], []]
  )

console.log(result)
/*
[ [ 39.867638888888884, 115.39333333333333 ],
  [ 50.97152777777777, 120.31527777777778 ] ]
*/