Javascript 如何获取对象数组中键的值？

我有一个对象数组，其结构如下：

import icon1 from '!!raw-loader!../../../icon1.svg';
import icon2 from '!!raw-loader!../../../icon2.svg';
import icon3 from '!!raw-loader!../../../icon3.svg';
import icon4 from '!!raw-loader!../../../icon4.svg';
import icon5 from '!!raw-loader!../../../icon5.svg';

export const CustomIcons = [
  {
    home: 'icon1',
    homeIcon: (icon)
  },
  {
    series: 'icon2',
    seriesIcon: (icon2)
  },
  {
    explorer: 'icon3',
    explorerIcon: (icon3)
  },
  ...
];

export class IconRegistryModule {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    CustomIcons.forEach(icon => {
      iconRegistry.addSvgIconLiteral(Object.keys(icon)[0], sanitizer.bypassSecurityTrustHtml(Object.keys(icon)[1]));
    });
  }
}

export interface CustomIcon {
  name: string;
  icon: string;
}

export const CustomIcons: CustomIcon[] = [
  {
    name: 'icon1',
    icon: (icon1)
  },
  {
    name: 'icon2',
    icon: (icon2)
  },
  ...
]

在模块的构造函数中，我希望使用如下值：

import icon1 from '!!raw-loader!../../../icon1.svg';
import icon2 from '!!raw-loader!../../../icon2.svg';
import icon3 from '!!raw-loader!../../../icon3.svg';
import icon4 from '!!raw-loader!../../../icon4.svg';
import icon5 from '!!raw-loader!../../../icon5.svg';

export const CustomIcons = [
  {
    home: 'icon1',
    homeIcon: (icon)
  },
  {
    series: 'icon2',
    seriesIcon: (icon2)
  },
  {
    explorer: 'icon3',
    explorerIcon: (icon3)
  },
  ...
];

export class IconRegistryModule {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    CustomIcons.forEach(icon => {
      iconRegistry.addSvgIconLiteral(Object.keys(icon)[0], sanitizer.bypassSecurityTrustHtml(Object.keys(icon)[1]));
    });
  }
}

export interface CustomIcon {
  name: string;
  icon: string;
}

export const CustomIcons: CustomIcon[] = [
  {
    name: 'icon1',
    icon: (icon1)
  },
  {
    name: 'icon2',
    icon: (icon2)
  },
  ...
]

因此，对于forEarch的第一次运行，addSvgIconLiteral方法应该如下所示：

iconRegistry.addSvgIconLiteral('the value of the key home', sanitizer.bypassSecurityTrustHtml('the value of the key homeIcon');

---

使用Object.keys从每个对象获取值

var keys = Object.keys(CustomIcons[i])

然后使用for循环遍历数组中的每个元素

您可以将这些元素中的每个元素附加到每个元素末尾的单独“键数组”中 循环。

Object.keysicon[0]只会为您提供密钥。您可以使用该键作为图标对象的索引

您可以执行图标[Object.keysicon[0]]来获取值

当然，您需要确保第一个属性始终是保存url的属性。从这个意义上讲，最好是将结构建立在一个具有一致命名的接口上，就像在注释中建议的那样

编辑： 使用一个界面应该有点像这样：

import icon1 from '!!raw-loader!../../../icon1.svg';
import icon2 from '!!raw-loader!../../../icon2.svg';
import icon3 from '!!raw-loader!../../../icon3.svg';
import icon4 from '!!raw-loader!../../../icon4.svg';
import icon5 from '!!raw-loader!../../../icon5.svg';

export const CustomIcons = [
  {
    home: 'icon1',
    homeIcon: (icon)
  },
  {
    series: 'icon2',
    seriesIcon: (icon2)
  },
  {
    explorer: 'icon3',
    explorerIcon: (icon3)
  },
  ...
];

export class IconRegistryModule {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    CustomIcons.forEach(icon => {
      iconRegistry.addSvgIconLiteral(Object.keys(icon)[0], sanitizer.bypassSecurityTrustHtml(Object.keys(icon)[1]));
    });
  }
}

export interface CustomIcon {
  name: string;
  icon: string;
}

export const CustomIcons: CustomIcon[] = [
  {
    name: 'icon1',
    icon: (icon1)
  },
  {
    name: 'icon2',
    icon: (icon2)
  },
  ...
]

然后在构造函数Object.keys中不再需要：

constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
  CustomIcons.forEach(icon => {
    iconRegistry.addSvgIconLiteral(icon.name, sanitizer.bypassSecurityTrustHtml(icon.icon));
  });
}

---

用于获取数组中的对象键

CustomIcons.mapdata=>{ console.logObject.keysdata； };

---

为什么结构是这样的？这种类型的结构会使一切都更容易处理：你有更好的解决方案吗？我找到了这样的代码，并尝试现在调整它。@TKoL这是不是不一样？我看不出有什么不同？数组中的每个对象都有一组不同的关键点。数组中的每个对象都有相同的键集。好的，这对我来说很有用。但是，我希望它更干净。我已经按照注释中所述对其进行了调整，以便每个键都具有相同的名称，并且只有值​​相异但它仍然只能按照您在这里建议的方式工作。@Codehan25我添加了一个如何使用该接口的示例。在这种情况下，Object.keys不再是必需的。可以完美地工作。非常感谢：这样我就可以得到每个对象的键，如下所示：数组[名称，图标]