JavaScript：关联/对象数组中的 indexOf？答案

【问题标题】：JavaScript: indexOf in Associative/Object array?JavaScript：关联/对象数组中的 indexOf？
【发布时间】：2015-04-22 15:57:03
【问题描述】：

我有这个数组：

var skins = {};
skins.w = "http://example.com/public/images/char_elements/base.png";

var eyes = {};
eyes.b = "http://example.com/public/images/char_elements/eyes/blue.png";
eyes.g = "http://example.com/public/images/char_elements/eyes/green.png";
eyes.r = "http://example.com/public/images/char_elements/eyes/red.png";

var hair = {};
hair.b = "http://example.com/public/images/char_elements/hair/black.png";
hair.w = "http://example.com/public/images/char_elements/hair/blond.png";
hair.s = "http://example.com/public/images/char_elements/hair/brown.png";

var mouth = {};
mouth.h = "http://example.com/public/images/char_elements/mouth/happy.png";

var pants = {};
pants.s = "http://example.com/public/images/char_elements/pants/shorts.png";

var shoes = {};
shoes.b = "http://example.com/public/images/char_elements/shoes/black.png";

var torso = {};
torso.s = "http://example.com/public/images/char_elements/torso/shirt.png";

还有这个功能：

function SwitchElement(type){
switch(type){

    case "eyes":
    var cur = eyes.indexOf(document.getElementById(type).src);
    console.log(cur);
//  var eyesId = document.getElementById("
    break;
}
}

所有这一切都是由：

<img class="builder_control_front" src="http://claro.mib.infn.it/arrow.png" onclick="SwitchElement('eyes');"/>

所以基本上当用户点击箭头时，它会调用 javascript 函数来加载当前图像，获取元素所在数组的索引（在本例中为数组：“eyes”）并循环遍历它。

我需要通过 url 获取索引，当我尝试使用 indexOf 时它会抛出 Undefined，我读到如果数组具有命名索引，JavaScript 会将数组转换为 Object。

那么我可以获取当前加载图像的索引吗？

注意：我需要有如下代码的数组：b、g、r、w、w4、b3 等。所以改成普通数组不太好，或许改成多维数组会更好？

【问题讨论】：

你可以创建一个对象{ eyes: { w: ... } }
JS 中的对象没有索引
你可能想要像 stackoverflow.com/questions/19969751/… 这样循环眼睛，然后做类似 for( var i in eyes ) { if (eyes[i] == document.getElementById(type).src) { cur = i; break; } } 或类似的事情
" 我读到如果数组具有命名索引，JavaScript 会将数组转换为对象。" 数组是对象。它们可以具有命名属性，但只有数字索引对应于数组元素。

标签： javascript arrays

【解决方案1】：

您需要的是反向查找。假设您的所有 URL 都是唯一的，您可以像这样创建一个：

function invert(obj) {
    var newObj = {};
    for(var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[obj[key]] = key;
        }
    }
}

var hair = {};
hair.b = "http://example.com/public/images/char_elements/hair/black.png";
hair.w = "http://example.com/public/images/char_elements/hair/blond.png";
hair.s = "http://example.com/public/images/char_elements/hair/brown.png";
var hairReverse = invert(hair);

var url = "http://example.com/public/images/char_elements/hair/black.png";
console.log(hairReverse[url]); // logs "b"

如果你使用 Lodash/Underscore，它有一个内置的 invert function：

var hairReverse = _.invert(hair);

【讨论】：

【解决方案2】：

为什么不只是迭代你的对象并找到包含值的键：

function findKey(obj, value) {
    for (var key in obj) {
        if (obj[key] == value) return key
    }
    return null;
}

var key = findKey(eyes, document.getElementById(type).src);
if (key != null) { 

} else {

}

【讨论】：