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属性。

因为您不想以 row 结尾，但是友好的名称，使用reduce而不是.find可能更合适，否则您必须.find 一次找到正确的颜色正确的行，然后再次从该行中取出颜色及其friendly。

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

Answer 2

您可以先将颜色值组合成一个扁平的数组，然后根据十六进制值在结果中找到友好的颜色。

function findFriendly(options, hex){
  return [].concat(...options.map(option => option.colors))
           .find(color => color.hex === hex).friendly;
}

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(findFriendly(options, "#d88219"));
console.log(findFriendly(options, "#1213dd"));

Answer 3

这是一个很简单的答案，应该很快。与reduce不同，一旦找到匹配项，它将立即返回结果，并且不需要任何预处理或拼合。

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 findFriendly = (a, hex) => {
  for (let i = 0; i < a.length; i++) {
    const idx = a[i].colors.findIndex(e => e.hex === '#910d9b');
    if (idx >= 0) { return a[i].colors[idx].friendly; }
  }
}

console.log(findFriendly(options, '#910d9b'));

Answer 4

我认为在这种情况下，简单会更好。循环浏览各行并查找颜色。如果您立即发现颜色，则可以选择提前退出。

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'}] }
]

function findColor(hex, options){ // returns undefined if not found
    for (row of options){
        let color = row.colors.find(obj => obj.hex === hex)
        if (color) return color.friendly
    }
}

let f = findColor('#5b5b5b', options)
console.log(f)

在对象数组

4 个答案: