Question

我有这个对象：

key = {
    spawn:{type:1,img:app.assets.get('assets/spawn.svg')},
    wall:{type:2,img:app.assets.get('assets/wall.svg')},   
    grass:{type:3,img:app.assets.get('assets/grass.svg')},
    spike:{type:4,img:app.assets.get('assets/spike.svg')},
    ground:{type:5,img:app.assets.get('assets/ground.svg')}
  };

我有一个只有类型的数组，我需要添加给定的图像，数组看起来像这样：

[{type:1,image:null},{type:3,image:null},{type:2,image:null},{type:2,image:null},{type:5,image:null}]

基本上我想循环数组，找到关键对象中的类型并获取给定的图像并将其保存到数组中。

有没有简单的方法可以做到这一点？

Answer 1

给定键的对象和像这样的对象数组：

var key = {
    spawn:{type:1,img:app.assets.get('assets/spawn.svg')},
    wall:{type:2,img:app.assets.get('assets/wall.svg')},   
    grass:{type:3,img:app.assets.get('assets/grass.svg')},
    spike:{type:4,img:app.assets.get('assets/spike.svg')},
    ground:{type:5,img:app.assets.get('assets/ground.svg')}
};
var arr = [{type:1,image:null},{type:3,image:null},{type:2,image:null},{type:2,image:null},{type:5,image:null}];

我们可以先在对象key中创建一个属性数组，以便更简单地迭代它。然后遍历数组arr，并在每个成员上，使用some循环检查哪个图像属于该成员的类型（一些返回第一个true并结束循环）

如果您希望循环没有副作用，可以将forEach更改为map（并将返回的新数组分配给arr或新变量），以及不要改变原始数组。

var keyTypes = Object.keys(key);
arr.forEach(function (item) {
    keyTypes.some(function (keyType) {
        if (key[keyType].type === item.type) {
            item.image = key[keyType].img;
            return true;
        }
        return false;
    });
});

更聪明的做法是更改图像类型的对象，以便您可以使用该类型作为访问属性，或者为此创建另一个对象（如另一个答案中所指出的）。

Answer 2

我不确定这个解决方案是否现代，但它不使用任何循环或递归。

object = {
    spawn: {type:1, img:app.assets.get('assets/spawn.svg')},
    wall: {type:2, img:app.assets.get('assets/wall.svg')},   
    grass: {type:3, img:app.assets.get('assets/grass.svg')},
    spike: {type:4, img:app.assets.get('assets/spike.svg')},
    ground: {type:5, img:app.assets.get('assets/ground.svg')}
};
arr = [
    {type:1, image:null},
    {type:3, image:null},
    {type:2, image:null},
    {type:2, image:null},
    {type:5, image:null}
];

var typeImages = {};
Object.getOwnPropertyNames(object).forEach(function(value){
    typeImages[object[value].type] = object[value].img;
});
arr = arr.map(function(value){
    return {
        type: value.type,
        image: typeImages[value.type]
    };
});

Answer 3

对我而言，有一点突出的是行

...获取给定的图像并将其保存到数组中

我假设这意味着原始数组。我认为更好的方法是将适当的键和值映射到一个新数组，但我假设，对于这个例子，这是一个要求。

尝试尽可能简化解决方案并提出lodash解决方案的请求：

_.each(key, function(prop){
    _.each(_.filter(types, { type: prop.type }), function(type) { type.image = prop.img });
});

Answer 4

var key = {
    spawn:{type:1,img:app.assets.get('assets/spawn.svg')},
    wall:{type:2,img:app.assets.get('assets/wall.svg')},   
    grass:{type:3,img:app.assets.get('assets/grass.svg')},
    spike:{type:4,img:app.assets.get('assets/spike.svg')},
    ground:{type:5,img:app.assets.get('assets/ground.svg')}
  };
var typesArray = [{type:1,image:null},{type:3,image:null},{type:2,image:null},{type:2,image:null},{type:5,image:null}];

for(var i = 0, j = typesArray.length; i < j; i++)
{
    typesArray[i].image = getKeyObjectFromType(typesArray[i].type).img;
}

function getKeyObjectFromType(type)
{
    for(var k in key)
    {
        if(key[k].type == type)
        {
            return key[k];
        }
    }
    return {};
}

Answer 5

for (var i = 0; i < typesArray.length; i++) {
    for (prop in key) {
        if (key[prop].type === typesArray[i].type) {
            typesArray[i].image = key[prop].img;
        }
    }
}

循环遍历数组（＆＃34; typesArray＆＃34;），对于每个数组项，它遍历key中的所有对象，寻找具有相同＆＃34; type＆＃34;的对象。当它找到它时，需要关键对象＆＃34; img＆＃34;并保存到数组中。

Answer 6

使用lodash（https://lodash.com/）：

var key = {
    spawn:{type:1,img:app.assets.get('assets/spawn.svg')},
    wall:{type:2,img:app.assets.get('assets/wall.svg')},   
    grass:{type:3,img:app.assets.get('assets/grass.svg')},
    spike:{type:4,img:app.assets.get('assets/spike.svg')},
    ground:{type:5,img:app.assets.get('assets/ground.svg')}
};

var initialList = [{type:1,image:null},{type:3,image:null},{type:2,image:null},{type:2,image:null},{type:5,image:null}];

var updatedList = _.transform(initialList, function(result, item) {
    item.image = _.find(key, _.matchesProperty('type', item.type)).img;
    result.push(item);
});

这将覆盖initialList中的每个项目，找到与type中的key属性相匹配的对象，并将其放入image属性。

最终结果将在updatedList

如何搜索对象中的属性内的属性？

6 个答案: