在 JavaScript 中显示分组的项目

Question

我找到了这段代码，我想知道如何在表格中以以下方式显示它们：

    Males | Name   | occupation
    ---------------------------
          | Jeff   | x
          | Taylor | x
   Females| Name   | occupation
   -----------------------------
          | Megan  | x
          | Madison| x

代码：

  function groupArrayOfObjects(list, key) {
      return list.reduce(function(rv, x) {
        (rv[x[key]] = rv[x[key]] || []).push(x);
        return rv;
      }, {});
    };

    var people = [
        {sex:"Male", name:"Jeff"},
        {sex:"Female", name:"Megan"},
        {sex:"Male", name:"Taylor"},
        {sex:"Female", name:"Madison"}
    ];
    var groupedPeople=groupArrayOfObjects(people,"sex");
    console.log(groupedPeople.Male);//will be the Males 
    console.log(groupedPeople.Female);//will be the Females

Answer 1

这只是计算每列的最大字符数

 //copy pasted function groupArrayOfObjects(list, key) { return list.reduce(function(rv, x) { (rv[x[key]] = rv[x[key]] || []).push(x); return rv; }, {}); }; var people = [ {sex:"Male", name:"Jeff"}, {sex:"Female", name:"Megan"}, {sex:"Male", name:"Taylor"}, {sex:"Female", name:"Madison"} ]; var groupedPeople=groupArrayOfObjects(people, "sex"); //-------- const headers = { name: 'name', occupation: 'occupation' } const out = Object.keys(groupedPeople).flatMap(k => groupedPeople[k].flatMap((p, i) => { p.occupation = p.occupation || 'x' const sex = p.sex p.sex = '' return i === 0 ? [{ sex, ...headers }, p] : p })) function dump (arr) { // count each column maximum char const counts = arr.reduce((counts, p) => { Object.keys(p).forEach(f => (counts[f] = Math.max(counts[f], p[f].length))) return counts }, Object.keys(arr[0]).reduce((o, f) => (o[f] = 0, o), {})) const cv = Object.values(counts) const s = cv.reduce((acc, c) => acc + c, 0) const tot = s + (cv.length) * 2 - 1 + (cv.length - 1) //fields, pad, separator const hr = '-'.repeat(tot) console.log( arr.flatMap(p => { const row = Object.keys(p).map(f => { // pad the field to its maximum char return ` ${p[f]}`.padEnd(counts[f] + 2, ' ') }).join('|') if (p.sex.length) { return [row, hr] } return row }).join('\\n') ) } dump(out)