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

Question

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

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]));
    });
  }
}

因此 forEarch 的第一个运行的 addSvgIconLiteral 方法应该如下所示：

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

Answer 1

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

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

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

您可以将这些元素中的每一个附加到每个元素末尾的单独 'key array' 循环。

Answer 2

Object.keys(icon)[0] 只是给你钥匙。您可以使用键作为图标对象的索引。

您可以 icon[Object.keys(icon)[0]] 获取值。

（当然，您需要确保第一个属性始终是持有 url 的那个。从这个意义上说，将结构基于一个接口可能会更好与评论中建议的一致命名。）

编辑：
使用接口应该看起来像这样：

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));
  });
}

Answer 3

使用它来获取数组中的对象键。

CustomIcons.map((data) => {
console.log(Object.keys(data));
});

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

How to get the value of the keys in an array of objects?

javascript

higher-order-functions

data-structures

typescript

angular