javascript - 映射和推送数组

Question

我对 React 和 TypeScript 还很陌生。我有一些图标想要像这样映射:

const iconLookups =
    dataPackNumber1.map(
      (e) =>
        e.icon_prefix &&
        e.icon_name && {
          prefix: e.icon_prefix,
          iconName: e.icon_name,
        },
    ) as IconLookup[];

此外，我在 dataPackNumber2 和 dataPackNumber3 下有更多看起来相同的图标，我想一次性映射它们。我想到的另一种方法是单独映射它们，然后将它们插入 iconLookups 数组中，但我似乎不知道如何实现。

iconLookups.push(
    dataPackNumber.map(
      (e) =>
        e.icon_prefix &&
        e.icon_name && {
          prefix: e.icon_prefix,
          iconName: e.icon_name,
        },
    ) as IconLookup[];) 

和

const iconLookups =
    dataPackNumber1 && dataPackNumber2 && dataPackNumber3.map(
      (e) =>
        e.icon_prefix &&
        e.icon_name && {
          prefix: e.icon_prefix,
          iconName: e.icon_name,
        },
    ) as IconLookup[];

代码没有给我提供错误，但在 UI 上我可以看到，如果我用 && 将它们链接起来，那么只有最后提供的 dataPackNumber 才会被实际渲染。 .

有人可以启发我吗？

Answer 1

.push() 将一个元素推送到数组上。就您而言，该元素是整个数组。结果是这样的结构:

[1, 2, [3, 4, 5]]

&& 可能只会解析为最后一个表达式，在您的情况下只是 dataPackNumber3.map(/*...*/)。

将这三者结合起来的一种方法是使用扩展语法。从结构上来说，它会是这样的:

let result = [...array1, ...array2, ...array3];

所以在你的情况下可能是:

const iconLookups = [
  ...dataPackNumber1,
  ...dataPackNumber2,
  ...dataPackNumber3.map(/*...*/)
] as IconLookup[];

---

编辑:正如所指出的in a comment below , .push() 可以在作为多个参数添加时确实可以将多个元素添加到数组中:

arr1.push(3, 4, 5);

这意味着扩展语法也可以在那里工作:

const iconLookups = dataPackNumber1.map(/*...*/) as IconLookup[];
iconLookups.push(...dataPackNumber2.map(/*...*/));
iconLookups.push(...dataPackNumber3.map(/*...*/));