javascript - 在对象数组中的嵌套对象数组中查找字符串

Question

我有以下对象数组:

let options = [
    { 'row': 1, 'colors': [{'hex': '#7484ad', 'friendly': 'Nudget Blue'}, {'hex': '#32db64', 'friendly': 'Green'}, {'hex':'#910d9b', 'friendly': 'Dark Magenta'}, {'hex': '#b00908', 'friendly': 'Dark Red'}] },
    { 'row': 2, 'colors': [{'hex': '#2bc6d1', 'friendly': 'Cyan'}, {'hex': '#216d0b', 'friendly': 'Dark Green'}, {'hex': '#d88219', 'friendly': 'Orange'}, {'hex': '#ed48c6', 'friendly': 'Pink'}] },
    { 'row': 3, 'colors': [{'hex': '#0e0e49', 'friendly': 'Dark Blue'}, {'hex': '#5b5b5b', 'friendly': 'Dark Gray'}, {'hex': '#000000', 'friendly': 'Black'}, {'hex': '#1213dd', 'friendly': 'Blue'}] }
]

我想通过颜色相应的十六进制值来获取颜色的友好名称。

到目前为止我已经尝试过:

console.log(options.find(color => color.colors.hex == '#910d9b'))

但是，这给了我一个错误:

Property 'hex' does not exist on type '{ 'hex': string; 'friendly': string; }[]'.

如何找到十六进制值的友好名称？

Answer 1

colors 值是一个数组，因此它没有 hex 属性 - 只有一个单独的 color 内部 colors 数组将有一个 hex 属性。

因为您不想以行结尾，而是以友好名称结尾，所以使用reduce而不是可能更合适。 find，否则您必须.find一次来查找具有正确颜色的正确行，然后再次获取颜色及其 > 友好 出列。

let options = [
    { 'row': 1, 'colors': [{'hex': '#7484ad', 'friendly': 'Nudget Blue'}, {'hex': '#32db64', 'friendly': 'Green'}, {'hex':'#910d9b', 'friendly': 'Dark Magenta'}, {'hex': '#b00908', 'friendly': 'Dark Red'}] },
    { 'row': 2, 'colors': [{'hex': '#2bc6d1', 'friendly': 'Cyan'}, {'hex': '#216d0b', 'friendly': 'Dark Green'}, {'hex': '#d88219', 'friendly': 'Orange'}, {'hex': '#ed48c6', 'friendly': 'Pink'}] },
    { 'row': 3, 'colors': [{'hex': '#0e0e49', 'friendly': 'Dark Blue'}, {'hex': '#5b5b5b', 'friendly': 'Dark Gray'}, {'hex': '#000000', 'friendly': 'Black'}, {'hex': '#1213dd', 'friendly': 'Blue'}] }
];
const result = options.reduce((a, { colors }) => {
  if (a) return a;
  const found = colors.find(({ hex }) => hex === '#910d9b');
  if (found) return found.friendly;
}, null);
console.log(result);