时间戳

首页 > 解决方案 > 如何使用打字稿编写一个能够从对象数组中添加或替换元素的函数

javascript - 如何使用打字稿编写一个能够从对象数组中添加或替换元素的函数

问题描述

我想创建一个函数，该函数接受一个对象数组、一个对象和一个键的输入，并返回一个对象数组，如果它是一个新对象，则它在位置 0 上包含新对象，如果它不是一个新对象，则在同一位置返回一个对象数组一。键用于比较对象，只能是字符串或数字。

我写了这个，但是必须在 Objects 中有一个 id 属性。

export function addOrReplaceById<T extends Array<{ id: string }>>(
  arrayOfObjects: T,
  newObject: { id: string }
): T {
  const index = arrayOfObjects.findIndex((object) => object.id === newObject.id);

  if (index === -1) {
    arrayOfObjects.unshift(newObject);
  } else {
    arrayOfObjects[index] = newObject;
  }
  return arrayOfObjects;
}

标签： javascriptarraystypescriptobject

解决方案

考虑这个例子：

export function addOrReplaceById<
    Obj extends { id: string },
    Arr extends Array<Obj>
>(
    arrayOfObjects: [...Arr],
    newObject: Obj
) {
    const data = arrayOfObjects
        .reduce<{ exists: boolean, arr: Obj[] }>(
            (acc, obj) =>
                obj.id === newObject.id ? {
                    ...acc,
                    exists: true,
                    arr: [...acc.arr, newObject]
                } : acc, {
            exists: false,
            arr: []
        });

    return data.exists ? data.arr : [newObject, ...data.arr]
}

上面的示例将稍微降低复杂性。unshift操作很昂贵。这就是我创建新数据结构的原因{exists: boolean, arr:Obj[]}。

我也返回了新数组而不是现有数组的突变

推荐阅读