通过知道对象的值从对象中检索键[重复]
Posted
技术标签:
【中文标题】通过知道对象的值从对象中检索键[重复]【英文标题】：Retrieving keys from an object by knowing its values [duplicate] 【发布时间】：2018-10-17 18:18:25 【问题描述】：大家好……
var fruits =
"apple": "fruits/apple.png",
"banana": "fruits/banana.png",
"watermelon": "fruits/watermelon.jpg"
var fruitsKeys = Object.keys(fruits);
var fruitsValue = Object.values(fruits);
我正在寻找一种实用的方法，通过了解对象的值来回调对象的键。
为了解释我为什么需要它，我想将每个值分配给一张图片，并通过单击图片名称键将出现。
感谢您的支持
var imgHolder = document.querySelectorAll("#imageholder");
var displayedChallengeName = document.querySelector("#challengeName");
displayedChallengeName.textContent = "Challenge";
var fruits =
"apple": "fruits/apple.png",
"banana": "fruits/banana.png",
"watermelon": "fruits/watermelon.jpg",
"grapes": "fruits/grapes.png",
"orange": "fruits/orange.jpg",
"mango": "fruits/mango.jpg"
var fruitsKeys = Object.keys(fruits);
var fruitsValue = Object.values(fruits);
var displayedFruits = [];
var repeated = 0;
for(var i = 0; i<10; i++)
var z = fruitsValue[justRandomNum()];
if(displayedFruits.includes(z) )
repeated += 1;
else
displayedFruits.push(z);
for(var i = 0; i<imgHolder.length; i++)
imgHolder[i].setAttribute("src", displayedFruits[i]);
function challengeName()
randomNum = Math.floor(Math.random() * fruitsKeys.length);
return fruitsKeys[randomNum];
function justRandomNum()
randomNum = Math.floor(Math.random() * fruitsValue.length);
return randomNum;
body
background-color: #A8F2FE;
margin: 0;
#h1
background-color: #F9EAA0;
padding-bottom: 12vh;
text-align: center;
padding-top: 10vh;
font-family: 'Pangolin', cursive;
font-weight: bold;
font-size: 50px;
color: #223481;
border: 6px solid #4B9AE8;
#h2
font-family: 'Pangolin', cursive;
font-weight: bold;
font-size: 50px;
color: #223481;
#challengeName
margin: 30px auto;
font-size: 150%;
#holder
height: 200px;
width: 200px;
overflow: hidden;
position: relative;
display: inline-block;
margin: 0 10px;
.container
margin: 30px auto;
.images
width: 100%;
/*padding-bottom: 45%;*/
position: absolute;
display: block;
background-color: white;
/*right: 0;
bottom: 0;*/
float: left;
/*margin: 2.5%;*/
height: 100%;
border: 2px solid #25336D;
/*transition: all 0.3s;*/
/*top: 50%;
left: 50%;*/
/* min-height: 100%;
min-width: 100%;*/
/* transform: translate(-50%, -50%);*/
#cont
margin: 20px auto;
/*max-width: 400px;*/
#buttonsbar
text-align: center;
height: 40px;
#space
display: inline-block;
width: 5%;
button
text-transform: uppercase;
height: 100%;
width: 120px;
button:hover
color: yellow;
background-color: gray;
transition: 0.3s;
<!DOCTYPE html>
<html>
<head>
<title>Names Game</title>
<link rel="stylesheet" type="text/css" href="namesgame.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Pangolin" rel="stylesheet">
<style type="text/css">
body background: #A8F2FE !important; /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> -->
</head>
<body>
<h1 id="h1">Names and Pictures Game
<br>
<br>
<span id="challengeName">MANGO</span>
</h1>
<div id="buttonsbar">
<button class="rounded">Start</button>
<span id="space"></span>
<button class="rounded" >Reset</button>
</div>
<div class="container">
<div class="row d-flex justify-content-center">
<div >
<div id="holder" ><img id="imageholder" class="images" src=""></div>
<div id="holder" ><img id="imageholder" class="images" src=""></div>
</div>
<div >
<div id="holder" ><img id="imageholder" class="images" src=""></div>
<div id="holder" ><img id="imageholder" class="images" src=""></div>
</div>
</div>
</div>
</body>
</html>
© 2018 GitHub, Inc.【问题讨论】：
请不要将您的代码发布到第三方网站，因为这些链接会随着时间的推移而失效，然后您的问题就毫无意义。请在您的问题中将所有相关代码发布为“代码 sn-p”（我已为您完成）。 这里的另一种方法是在创建每个img 元素时为其添加一个data-fruit 属性，并在单击该元素时检查它而不是src。
【参考方案1】：
您可以使用Object.entries() 为键创建一个Map 的值，并使用Array.map() 来切换键和值：
const fruits =
"apple": "fruits/apple.png",
"banana": "fruits/banana.png",
"watermelon": "fruits/watermelon.jpg"
const valuesToKeys = new Map(Object.entries(fruits).map(([k, v]) => [v, k]));
console.log(valuesToKeys.get('fruits/apple.png'));另一种选择是使用Object.keys() 和Array.reduce() 来创建具有切换键和值的对象：
const fruits =
"apple": "fruits/apple.png",
"banana": "fruits/banana.png",
"watermelon": "fruits/watermelon.jpg"
;
const fruitsByValues = Object.keys(fruits)
.reduce((r, k) =>
r[fruits[k]] = k;
return r;
, );
console.log(fruitsByValues['fruits/watermelon.jpg']);【讨论】：
哇！非常感谢...非常感谢 不客气 :)【参考方案2】：您可以使用Object.keys 获取键，然后使用Array.find 查找与值关联的键。
const fruits =
"apple": "fruits/apple.png",
"banana": "fruits/banana.png",
"watermelon": "fruits/watermelon.jpg"
function getKeyByValue(obj, value)
return Object.keys(obj).find(key => obj[key] === value)
console.log(getKeyByValue(fruits, 'fruits/apple.png'));【讨论】：
以上是关于通过知道对象的值从对象中检索键[重复]的主要内容，如果未能解决你的问题，请参考以下文章