JavaScript：两个数组的类似 SQL 的连接

Question

我有这样的数组：

const one = [
  {id: 1, field1: "a"},
  {id: 2, field1: "b"},
  {id: 3, field1: "c"},
  {id: 4, field1: "d"}
]

const two = [
  {id: 4, field2: "4"},
  {id: 1, field2: "1"}
]
// what I want to achieve:
const result = [
  {id: 1, field1: "a", field2: "1"},
  {id: 4, field1: "d", field2: "4"}
]

我想合并一和二，所以我得到了结果。 这与 SQL 连接非常相似，但我想在 JavaScript 代码中完成所有这些。 注意：

1. 这是通过id “列”“加入”。
2. 结果的顺序就是one数组的顺序（按ID排序只是巧合顺序一样）
3. 结果中存在来自两个数组的字段

我已经想出了如何自己做到这一点，但代码笨拙且难以阅读。 基本上，您过滤one并删除two不存在的元素，然后您映射one并合并two数组的字段。

有没有更简洁的方法来实现这一目标？ 我正在使用 lodash，我希望有一个功能可以让这更容易，但我还没有找到任何功能。

Answer 1

通过键（ id ）创建第二个数组的字典或映射，然后过滤第一个数组，只保留字典中出现的项目。 之后，映射剩余的项目，并添加字典中的相关项目。

 const joinBy = (arr1, arr2, key) => { const arr2Dict = _.keyBy(arr2, key) return arr1 .filter(item => item[key] in arr2Dict) .map(item => ({ ...item, ...arr2Dict[item[key]] })) } const one = [{id: 1, field1: "a"},{id: 2, field1: "b"},{id: 3, field1: "c"},{id: 4, field1: "d"}] const two = [{id: 4, field2: "4"},{id: 1, field2: "1"}]; const result = joinBy(one, two, 'id') console.log(result)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>

如果您不想使用 lodash，您可以轻松替换_.keyBy() ，并使用Array.reduce()创建一个对象或使用Array.map()创建一个 Map 。

 const joinBy = (arr1, arr2, key) => { const arr2Dict = new Map(arr2.map(o => [o[key], o])) return arr1 .filter(item => arr2Dict.has(item[key])) .map(item => ({ ...item, ...arr2Dict.get(item[key]) })) } const one = [{id: 1, field1: "a"},{id: 2, field1: "b"},{id: 3, field1: "c"},{id: 4, field1: "d"}] const two = [{id: 4, field2: "4"},{id: 1, field2: "1"}]; const result = joinBy(one, two, 'id') console.log(result)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>

Answer 2

您可以使用lodash merge 、 map和find函数。 用于排序 - sortBy 。

_.sortBy(
   _.map(two, (n) => _.merge(n, _.find(one, ['id', n.id]))),
   (o) => _.findIndex(one, ['id', o.id]),
);

 const one = [{id: 1, field1: "a"},{id: 2, field1: "b"},{id: 3, field1: "c"},{id: 4, field1: "d"}], two = [{id: 4, field2: "4"},{id: 1, field2: "1"}]; const r = _.sortBy( _.map(two, (n) => _.merge(n, _.find(one, ['id', n.id]))), (o) => _.findIndex(one, ['id', o.id]), ); console.log(r);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>

Answer 3

如果您有不同的字段，您可以获取一个引用项目的对象并映射two并按id排序。

 const one = [{ id: 1, field1: "a" }, { id: 2, field1: "b" }, { id: 3, field1: "c" }, { id: 4, field1: "d" }], two = [{ id: 4, field2: "4" }, { id: 1, field2: "1" }], fromOne = Object.fromEntries(one.map((object, index) => [object.id, { object, index }])), result = two .map(o => ({ ...fromOne[o.field2].object, ...o })) .sort((a, b) => fromOne[a.field2].index - fromOne[b.field2].index); console.log(result);

 .as-console-wrapper { max-height: 100% !important; top: 0; }