如何使两个JavaScript数组的项目彼此对应？

Question

Delving into arrays today with javascript. I have created two arrays

    var items = ['Bread', 'Milk', 'Butter']
    var calories = [10,20,30]

The idea is that the calories correspond to the item, so bread has 10 calories. And if I want to see the two arrays combining results then i call this

   document.writeln(items[1] +  calories[1])

I'm guessing theres a much more efficient way of doing this, but as a newbie I would appreciate any pointers in the right direction. Ideally I want to store all the info in one array

Answer 1

One way would be to use an object instead of an array:

var items = {
   Bread: 10, 
   Milk: 20, 
   Butter: 30
};

alert(items["Bread"]); // Alert 10

There is a good article on MDN about working with objects in JavaScript that might be useful to you.

Answer 2

You could use an array of objects:

var items = [
   {Bread: 10},
   {Milk:20}
];

or simply an object

var items {
    Bread:10,
    Milk:20
}

To print the breads calories using a Key-Value approach:

   alert(items["Bread"]);

If you dont want to use the itemname as the "key", you can do this:

var items = [
   {
    Item: "Bread", 
    Calories: 10
   },
   {
    Item: "Milk", 
    Calories: 20
   }
];

Then you can print it like so:

alert(items[0].Item+" has "+items[0].Calories+" calories");

Then, if you wish to add elements:

items.push({Item:"Butter",Calories:30});

Answer 3

Not really sure what you mean by "more efficent" really but something like this is more like you want to model:

var items = {
  'Bread': 10,
  'Milk': 20,
  'Butter': 30
};

Answer 4

How about hashtables/dictionaries?

var calories = { Bread: 10,  Milk: 20, Butter: 30 };

To get the desired output from this object, check my (Elias Van Ootegem) answer.
or "objects":

var food = [ 
     { name: 'Bread', calories: 10 },
     { name: 'Milk', calories: 20 },
     { name: 'Butter', calories: 30 },
];

To get the output here:

for (var i=0;i<food.length;i++)
{
    document.writeln(food[i].name +': '+food[i].calories);
}

Answer 5

You're probably looking for an object literal. You want your output to be something like this:

var items = {
    Bread: 10,
    Milk : 20
};

You can loop through the array and fill an initially empty array, like this:

var items = {}, food, calories;

food = ['Bread', 'Milk', 'Butter'];
calories = [10,20,30];

for (var i = 0; i < food.length; i++) {
    for (var l = 0; l < calories.length; l++) {
        items[ food[i] ] = calories[ l ];
    }
}

Answer 6

Yes, so like everybody tells you, an object is what you need. To get to the actual output:

var items = {
   'Bread' : 10, 
   'Milk', : 20, 
   'Butter' : 30
};
for (var name in items)
{//loop through object literal, list all properties
    if (items.hasOwnProperty(name))
    {//avoid output of prototype properties
        document.writeln(name + ': ' + items[name]);
    }
}
//output:
    Bread: 10
    Milk: 20
    Butter: 30