如何在具有鍵值對的對象數組中查找值

Question

我有一個帶有鍵值對的對象數組，我想根據我擁有的鍵找到值。

這是數組：

const baseColors = [{"WHITE":"rgb(255,255,255)"},{"BLACK":"rgb(0,0,0)"},{"DARK GRAY":"rgb(60,60,60)"},{"MEDIUM GRAY":"rgb(98,98,98)"},{"LIGHT GRAY":"rgb(185,185,185)"},{"POLARIS SQUEEZE":"rgb(242,255,0)"},{"SUNBURST":"rgb(254,227,49)"},{"PRO YELLOW":"rgb(253,214,20)"},{"YELLOW":"rgb(243,194,0)"},{"DEEP YELLOW":"rgb(241,169,0)"},{"ORANGE CRUSH":"rgb(254,134,29)"},{"TANGERINE":"rgb(255,102,0)"},{"ORANGE":"rgb(232,85,0)"},{"RACE ORANGE":"rgb(232,58,0)"},{"TERRA COTTA":"rgb(160,61,1)"},{"RUBY RED":"rgb(137,0,0)"},{"TOMATO RED":"rgb(176,29,5)"},{"LAVA RED":"rgb(182,32,7)"},{"POLARIS RED":"rgb(199,6,7)"},{"INTENSE RED":"rgb(223,37,37)"},{"BURGUNDY":"rgb(93,0,33)"},{"RASPBERRY":"rgb(118,5,66)"},{"HOT PINK":"rgb(170,19,118)"},{"PINK":"rgb(222,103,156)"},{"LIGHT PURPLE":"rgb(136,90,168)"},{"VIOLET":"rgb(72,0,144)"},{"PURPLE":"rgb(48,0,92)"},{"RETRO BLUE":"rgb(14,10,49)"},{"LIGHT NAVY":"rgb(10,23,51)"},{"YAMAHA BLUE":"rgb(0,8,102)"},{"SUMMIT BLUE":"rgb(6,28,89)"},{"VOODOO BLUE":"rgb(11,69,127)"},{"BLUE":"rgb(2,25,200)"},{"OCTANE BLUE":"rgb(1,157,232)"},{"ICE BLUE":"rgb(51,162,184)"},{"AQUA":"rgb(54,188,161)"},{"TEAL":"rgb(0,115,115)"},{"MANTA GREEN":"rgb(173,198,4)"},{"LIME GREEN":"rgb(146,199,1)"},{"KAWASAKI GREEN":"rgb(1,189,1)"},{"APPLE GREEN":"rgb(67,136,0)"},{"CAT GREEN":"rgb(0,117,17)"},{"GREEN":"rgb(1,102,28)"},{"FOREST GREEN":"rgb(0,53,26)"},{"ARMY GREEN":"rgb(48,62,9)"},{"BROWN":"rgb(52,27,23)"},{"TAN":"rgb(136,96,50)"},{"BEIGE":"rgb(218,190,152)"},{"SILVER METALLIC":"rgb(175,178,178)"},{"GOLD METALLIC":"rgb(148,110,44)"},{"COPPER METALLIC":"rgb(130,64,0)"}];

所以我想找到值例如

const baseColor1 = $("[name='color1']").val();
const modelColor1Value = baseLayerColors.find(`${baseColor1}`);

但這給

TypeError：原始顏色不是功能錯誤。

我怎樣才能做到這一點？ 我認為對象數組的結構使我對array.find（）的正確語法不滿意。 謝謝。

Answer 1

嘗試

baseColors.find(c=> Object.keys(c)[0]==colorName);

 const baseColors = [{"WHITE":"rgb(255,255,255)"},{"BLACK":"rgb(0,0,0)"},{"DARK GRAY":"rgb(60,60,60)"},{"MEDIUM GRAY":"rgb(98,98,98)"},{"LIGHT GRAY":"rgb(185,185,185)"},{"POLARIS SQUEEZE":"rgb(242,255,0)"},{"SUNBURST":"rgb(254,227,49)"},{"PRO YELLOW":"rgb(253,214,20)"},{"YELLOW":"rgb(243,194,0)"},{"DEEP YELLOW":"rgb(241,169,0)"},{"ORANGE CRUSH":"rgb(254,134,29)"},{"TANGERINE":"rgb(255,102,0)"},{"ORANGE":"rgb(232,85,0)"},{"RACE ORANGE":"rgb(232,58,0)"},{"TERRA COTTA":"rgb(160,61,1)"},{"RUBY RED":"rgb(137,0,0)"},{"TOMATO RED":"rgb(176,29,5)"},{"LAVA RED":"rgb(182,32,7)"},{"POLARIS RED":"rgb(199,6,7)"},{"INTENSE RED":"rgb(223,37,37)"},{"BURGUNDY":"rgb(93,0,33)"},{"RASPBERRY":"rgb(118,5,66)"},{"HOT PINK":"rgb(170,19,118)"},{"PINK":"rgb(222,103,156)"},{"LIGHT PURPLE":"rgb(136,90,168)"},{"VIOLET":"rgb(72,0,144)"},{"PURPLE":"rgb(48,0,92)"},{"RETRO BLUE":"rgb(14,10,49)"},{"LIGHT NAVY":"rgb(10,23,51)"},{"YAMAHA BLUE":"rgb(0,8,102)"},{"SUMMIT BLUE":"rgb(6,28,89)"},{"VOODOO BLUE":"rgb(11,69,127)"},{"BLUE":"rgb(2,25,200)"},{"OCTANE BLUE":"rgb(1,157,232)"},{"ICE BLUE":"rgb(51,162,184)"},{"AQUA":"rgb(54,188,161)"},{"TEAL":"rgb(0,115,115)"},{"MANTA GREEN":"rgb(173,198,4)"},{"LIME GREEN":"rgb(146,199,1)"},{"KAWASAKI GREEN":"rgb(1,189,1)"},{"APPLE GREEN":"rgb(67,136,0)"},{"CAT GREEN":"rgb(0,117,17)"},{"GREEN":"rgb(1,102,28)"},{"FOREST GREEN":"rgb(0,53,26)"},{"ARMY GREEN":"rgb(48,62,9)"},{"BROWN":"rgb(52,27,23)"},{"TAN":"rgb(136,96,50)"},{"BEIGE":"rgb(218,190,152)"},{"SILVER METALLIC":"rgb(175,178,178)"},{"GOLD METALLIC":"rgb(148,110,44)"},{"COPPER METALLIC":"rgb(130,64,0)"}]; colorName = 'BROWN'; color = baseColors.find(c=> Object.keys(c)[0]==colorName); console.log(color[colorName]); 

Answer 2

沒有Object.keys（）的另一種方法如下所示：這與Kamil解決方案略有不同。

baseColors.find(c=> c[colorName]);

 const baseColors = [{"WHITE":"rgb(255,255,255)"},{"BLACK":"rgb(0,0,0)"},{"DARK GRAY":"rgb(60,60,60)"},{"MEDIUM GRAY":"rgb(98,98,98)"},{"LIGHT GRAY":"rgb(185,185,185)"},{"POLARIS SQUEEZE":"rgb(242,255,0)"},{"SUNBURST":"rgb(254,227,49)"},{"PRO YELLOW":"rgb(253,214,20)"},{"YELLOW":"rgb(243,194,0)"},{"DEEP YELLOW":"rgb(241,169,0)"},{"ORANGE CRUSH":"rgb(254,134,29)"},{"TANGERINE":"rgb(255,102,0)"},{"ORANGE":"rgb(232,85,0)"},{"RACE ORANGE":"rgb(232,58,0)"},{"TERRA COTTA":"rgb(160,61,1)"},{"RUBY RED":"rgb(137,0,0)"},{"TOMATO RED":"rgb(176,29,5)"},{"LAVA RED":"rgb(182,32,7)"},{"POLARIS RED":"rgb(199,6,7)"},{"INTENSE RED":"rgb(223,37,37)"},{"BURGUNDY":"rgb(93,0,33)"},{"RASPBERRY":"rgb(118,5,66)"},{"HOT PINK":"rgb(170,19,118)"},{"PINK":"rgb(222,103,156)"},{"LIGHT PURPLE":"rgb(136,90,168)"},{"VIOLET":"rgb(72,0,144)"},{"PURPLE":"rgb(48,0,92)"},{"RETRO BLUE":"rgb(14,10,49)"},{"LIGHT NAVY":"rgb(10,23,51)"},{"YAMAHA BLUE":"rgb(0,8,102)"},{"SUMMIT BLUE":"rgb(6,28,89)"},{"VOODOO BLUE":"rgb(11,69,127)"},{"BLUE":"rgb(2,25,200)"},{"OCTANE BLUE":"rgb(1,157,232)"},{"ICE BLUE":"rgb(51,162,184)"},{"AQUA":"rgb(54,188,161)"},{"TEAL":"rgb(0,115,115)"},{"MANTA GREEN":"rgb(173,198,4)"},{"LIME GREEN":"rgb(146,199,1)"},{"KAWASAKI GREEN":"rgb(1,189,1)"},{"APPLE GREEN":"rgb(67,136,0)"},{"CAT GREEN":"rgb(0,117,17)"},{"GREEN":"rgb(1,102,28)"},{"FOREST GREEN":"rgb(0,53,26)"},{"ARMY GREEN":"rgb(48,62,9)"},{"BROWN":"rgb(52,27,23)"},{"TAN":"rgb(136,96,50)"},{"BEIGE":"rgb(218,190,152)"},{"SILVER METALLIC":"rgb(175,178,178)"},{"GOLD METALLIC":"rgb(148,110,44)"},{"COPPER METALLIC":"rgb(130,64,0)"}]; colorName = 'APPLE GREEN'; color = baseColors.find(c=> c[colorName]); console.log(color[colorName]) 

Answer 3

const baseColor1 = $("[name='color1']").val();
const modelColor1Object = baseLayerColors.find(colorObj => colorObj[baseColor1]);
const modelColor1Value = modelColor1Object[baseColor1];

Answer 4

變量baseColors是一個對象數組，因此您需要使用JavaScript的括號表示法來查找正確的鍵。

請使用以下代碼片段查看其工作原理。

 const baseColors = [{"WHITE":"rgb(255,255,255)"},{"BLACK":"rgb(0,0,0)"},{"DARK GRAY":"rgb(60,60,60)"},{"MEDIUM GRAY":"rgb(98,98,98)"},{"LIGHT GRAY":"rgb(185,185,185)"},{"POLARIS SQUEEZE":"rgb(242,255,0)"},{"SUNBURST":"rgb(254,227,49)"},{"PRO YELLOW":"rgb(253,214,20)"},{"YELLOW":"rgb(243,194,0)"},{"DEEP YELLOW":"rgb(241,169,0)"},{"ORANGE CRUSH":"rgb(254,134,29)"},{"TANGERINE":"rgb(255,102,0)"},{"ORANGE":"rgb(232,85,0)"},{"RACE ORANGE":"rgb(232,58,0)"},{"TERRA COTTA":"rgb(160,61,1)"},{"RUBY RED":"rgb(137,0,0)"},{"TOMATO RED":"rgb(176,29,5)"},{"LAVA RED":"rgb(182,32,7)"},{"POLARIS RED":"rgb(199,6,7)"},{"INTENSE RED":"rgb(223,37,37)"},{"BURGUNDY":"rgb(93,0,33)"},{"RASPBERRY":"rgb(118,5,66)"},{"HOT PINK":"rgb(170,19,118)"},{"PINK":"rgb(222,103,156)"},{"LIGHT PURPLE":"rgb(136,90,168)"},{"VIOLET":"rgb(72,0,144)"},{"PURPLE":"rgb(48,0,92)"},{"RETRO BLUE":"rgb(14,10,49)"},{"LIGHT NAVY":"rgb(10,23,51)"},{"YAMAHA BLUE":"rgb(0,8,102)"},{"SUMMIT BLUE":"rgb(6,28,89)"},{"VOODOO BLUE":"rgb(11,69,127)"},{"BLUE":"rgb(2,25,200)"},{"OCTANE BLUE":"rgb(1,157,232)"},{"ICE BLUE":"rgb(51,162,184)"},{"AQUA":"rgb(54,188,161)"},{"TEAL":"rgb(0,115,115)"},{"MANTA GREEN":"rgb(173,198,4)"},{"LIME GREEN":"rgb(146,199,1)"},{"KAWASAKI GREEN":"rgb(1,189,1)"},{"APPLE GREEN":"rgb(67,136,0)"},{"CAT GREEN":"rgb(0,117,17)"},{"GREEN":"rgb(1,102,28)"},{"FOREST GREEN":"rgb(0,53,26)"},{"ARMY GREEN":"rgb(48,62,9)"},{"BROWN":"rgb(52,27,23)"},{"TAN":"rgb(136,96,50)"},{"BEIGE":"rgb(218,190,152)"},{"SILVER METALLIC":"rgb(175,178,178)"},{"GOLD METALLIC":"rgb(148,110,44)"},{"COPPER METALLIC":"rgb(130,64,0)"}]; function find() { const baseColor1 = $("[name='color1']").val(); const modelColor1Value = baseColors.find(color => color[baseColor1])[baseColor1]; $("#result").text(modelColor1Value); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input name="color1" type="text" value="BROWN" /> <input type="button" onclick="find()" value="Find"/> <span id="result"></span>