js处理两个数组，得到需要的数据？

Question

let ary1 = [
  {
    fieldNameCh: "名称",
    fieldName: "name",
    fieldType: "varchar(100)"
  },
  {
    fieldNameCh: "年龄",
    fieldName: "age",
    fieldType: "int(11)"
  },
  {
    fieldNameCh: "性别",
    fieldName: "sex",
    fieldType: "varchar(100)"
  },
  {
    fieldNameCh: "id",
    fieldName: "id",
    fieldType: "integer"
  },
  {
    fieldNameCh: "公司",
    fieldName: "cmy",
    fieldType: "varchar(100)"
  }
];

let ary2 = [
  {
    columnId: 14,
    columnName: "id",
    columnType: "integer"
  },
  {
    columnId: 15,
    columnName: "name",
    columnType: "varchar(100)"
  }
];

处理这两个数组得到如下数据

[
  {
    fieldNameCh: "名称",
    fieldName: "name",
    fieldType: "varchar(100)",
    columnId: 15,
    columnName: "name",
    columnType: "varchar(100)"
  },
  {
    fieldNameCh: "年龄",
    fieldName: "age",
    fieldType: "int(11)",
    columnId: 0,
    columnName: "",
    columnType: ""
  },
  {
    fieldNameCh: "性别",
    fieldName: "sex",
    fieldType: "varchar(100)",
     columnId: 0,
    columnName: "",
    columnType: ""
  },
  {
    fieldNameCh: "id",
    fieldName: "id",
    fieldType: "integer",
    columnId: 14,
    columnName: "id",
    columnType: "integer"
  },
  {
    fieldNameCh: "公司",
    fieldName: "cmy",
    fieldType: "varchar(100)",
     columnId: 0,
    columnName: "",
    columnType: ""
  }
];

或者这样

  let ary3 = [
      {
        fieldNameCh: "名称",
        fieldName: "name",
        fieldType: "varchar(100)"
      },
      {
        fieldNameCh: "年龄",
        fieldName: "age",
        fieldType: "int(11)"
      }
    ];
    
    let ary4 = [
      {
        columnId: 14,
        columnName: "id",
        columnType: "integer"
      },
      {
        columnId: 15,
        columnName: "name",
        columnType: "varchar(100)"
      },
      {
        columnId: 16,
        columnName: "age",
        columnType: "varchar(100)"
      },
      {
        columnId: 17,
        columnName: "sex",
        columnType: "varchar(100)"
      },
      {
        columnId: 18,
        columnName: "year",
        columnType: "varchar(100)"
      },
    ];

得到

 [
    {
        fieldNameCh: "",
        fieldName: "",
        fieldType: "",
        columnId: 14,
        columnName: "id",
        columnType: "integer"
      },
      {
        fieldNameCh: "名称",
        fieldName: "name",
        fieldType: "varchar(100)",
        columnId: 15,
        columnName: "name",
        columnType: "varchar(100)"
      },
      {
        fieldNameCh: "年龄",
        fieldName: "age",
        fieldType: "int(11)",
        columnId: 16,
        columnName: "age",
        columnType: "varchar(100)"
      },
      {
        fieldNameCh: "",
        fieldName: "",
        fieldType: "",
        columnId: 17,
        columnName: "sex",
        columnType: "varchar(100)"
      },
      {
        fieldNameCh: "",
        fieldName: "",
        fieldType: "",
        columnId: 18,
        columnName: "year",
        columnType: "varchar(100)"
      },
    ];

Answer 1

function mixArrFunc(arr1, arr2, arr1MixKey, arr2MixKey) {
  let l = arr1
  let m = arr2
  let lKey = arr1MixKey
  let mKey = arr2MixKey

  if (arr1.length < arr2.length) {
    l = arr2
    m = arr1
    lKey = arr2MixKey
    mKey = arr1MixKey
  }

  return l.map(item => {
    let sameKeyValue = m.find(r => r[mKey] === item[lKey])

    return {
      ...item,
      ...sameKeyValue
    }
  })
}

Answer 2

是否类似外连接操作，结果一定包含所有数据，如果一个数组的元素在另一个数组没有匹配项，则另一个数组的字段留空或设为默认值

简单的思路是初始为默认值，然后填数据即可

function genDefault(o) {
  return o
    ? Object.fromEntries(
        Object.entries(o).map(([k, v]) => [k, typeof v === "number" ? 0 : ""])
      )
    : o;
}

function outerJoin(...tables) {
  // 先确定所有字段的默认值
  const defaultValue = Object.assign(
    {},
    ...tables.map(t => t.defaultValue ?? genDefault(t.data[0]))
  );
  // 创建一个对象（或 Map）用于保存键值对，从而无需使用 find 查找
  const m = {};
  // 遍历数据，如果键值对不存在则先初始化为默认值再填数据，否则直接填数据
  tables.forEach(({ data, key }) => {
    data.forEach(row => {
      Object.assign(m[row[key]] ??= { ...defaultValue }, row);
    });
  });
  // 最后返回值数组
  return Object.values(m);
}

const res1 = outerJoin(
  { data: ary1, key: "fieldName" },
  { data: ary2, key: "columnName" }
);
const res2 = outerJoin(
  { data: ary3, key: "fieldName" },
  { data: ary4, key: "columnName" }
);

Answer 3

function merge(target, source, tk, sk) {
  const def = Object.entries(source[0]).reduce((res,[k,v]) => (res[k] = v.constructor(),res),{})
  const indexes = source.reduce((res, v, i) => (res[v[sk]] = i, res), {})
  return target.map(v => ({...v, ...(v[tk] in indexes ? source[indexes[v[tk]]] : def)}))
}

merge(ary1, ary2, 'fieldName', 'columnName')
merge(ary4, ary3, 'columnName', 'fieldName')