遍历对象并返回所有属性数组的值

Question

I have a javascript object with a bunch of properties. In this example each property represents a piece of clothing, with a key and then a value that is an array.

var clothes = {
  CLO1: ["shirt", "cotton", "white"],
  CLO2: ["tie", "silk", "red"],
  CLO3: ["shoes", "leather", "black"]
};

I want to loop through each one and print out the color for each piece of clothing. I'm trying to figure out the most concise way to do this. Something like this--

for (property in object) {
if (property[key]){
    return (property[2])
  } else { return "none";
}

Any thoughts would be really greatly appreciated. I hope this makes sense. Thanks!

Answer 1

Looks fine to me. Are arrays sometimes empty or null? The suggestion in the comments to remove the extra return statement is a good suggestion.

I noticed that each array has a similar structure. The first element is the type of clothing, the second element is the material and the third element is the color. You can use an object instead of an array. The advantage of using an object is that it tells you (and other programmers) more about the structure of your data. Use an array to store a collection of these objects:

var clothes = [
  { type: "shirt",
    material: "cotton",
    color: "white"
  },
  { type: "belt",
    material: "leather",
    color: "none"
];

Also, instead of checking if the property "color" exists, always include "color". Set "color" to "none" if it is not relevant.

Printing out the colors looks like:

clothes.forEach(function(each) {
    console.log(each.color);
});

UPDATE I chose to always include "color" because it simplifies the procedural code. Without the data redundancy I must check to see if particular keys exist when I iterate over the properties. I usually choose to simplify the code, not the data. Philosophically, it is similar the trade-offs between dense and sparse data representations.

There is also a semantic reason always including color. What if some clothes have the property "size", but others don't. What if all the examples I look at do not have "size"? I would not know to include "size" in my procedural code.

Answer 2

var clothes = {
  CLO1: ["shirt", "cotton", "white"],
  CLO2: ["tie", "silk", "red"],
  CLO3: ["shoes", "leather", "black"]
};

var print = function(obj) {
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            console.log(obj[property][2]);
        }
    }
}   

print(clothes);

On each iteration of the for loop, the property variable holds the name of the property, you then have to have to index into obj to retrieve the value of the property, and then again index the second element of the array to get the colour you asked for.

This works, although I would suggest creating an structure (as suggested by @ahoffer) to hold these items.

Answer 3

// - Object.keys takes an object and returns an array of keys
// - forEach iterates that array
// - console.log prints it to the console

Object.keys(clothes).forEach(function (type) {
    console.log(clothes[type][2]);
});

Answer 4

Maybe something like that?

Object.keys(clothes).forEach(function(type) {
   console.log(type + ": " + clothes[type].join(', '));
});

The code above will give you this:

CLO1: shirt, cotton, white
CLO2: tie, silk, red
CLO3: shoes, leather, black