JavaScript对象如何包含属性（键值对）的数组（带有方括号）？

Question

I am working with some previous code in AngularJS, but my question pertains to a strange occurrence of the objects that are passed to the view. I am getting an array of arrays. The nested arrays have key value pairs, however. This doesn't make sense in my understanding.

Additionally, I believe it is causing problems with the custom filters I am trying to make. A general model filter works, but filtering on a specific field does not. I have tested the concept in jsfiddle and it works fine if the data is formatted as an array of objects that have properties, but trying to replicate the structure of my current data output errors since it is not valid JavaScript. Can someone shed some light on my predicament?

[Array[0], Array[0], Array[0]...]
0: Array[0]
  $$hashKey: "00U"
  firstGroupList: Object
  length: 0
  subTitle: "Capsules"
  title: "Esomeprazole Strontium"
  __proto__: Array[0]
1: Array[0]
  $$hashKey: "01X"
  firstGroupList: Object
  length: 0
  subTitle: "Tablets"
  title: "Salsalate"
  __proto__: Array[0]
2: Array[0]
3: Array[0]
4: Array[0]
...

How can an array like [title: "title", subTitle: "subTitle"] exist?

Answer 1

Consider the following:

var arr = [1,2,3,4];
var obj = {key: 50, anotherKey: 70};

arr.prop = 'something-something';
obj.prop = 'something-something';

console.log(arr['prop']);
console.log(obj['prop']);

It will output "something-something" twice and internally very similar things are happening - you are setting a property of an object and then reading it.

However, the difference is the actual type of object - arr is of type Array and obj is of type Object. Please note that this is not the variable type we're talking about - both arr and obj are of type "object" (which you can easily check using typeof). The type of object actually refers to the object's prototype ie the object which that particular variable is based on (for those more familiar with OOP, this would be similar a class you inherited from, except in this case it was just one instance that was inherited from a class, not a whole new class).

Here's an article that may help you understand prototypes better: http://sporto.github.io/blog/2013/02/22/a-plain-english-guide-to-javascript-prototypes/

Going back to the original code, when would you actually notice the difference between arr and obj? Well, one thing that notably comes to mind is JSON:

var strArr = JSON.stringify(arr); // [1,2,3,4]
var strObj = JSON.stringify(obj); // {"key":50,"anotherKey":70,"prop":"something-something"}

So JSON will "lose" the prop property in case you use it on an array - this is one example of why you should be careful when setting properties of an array.

Finally, how would you iterate this array if you want to take the "prop" property into consideration as well as the "normal" array members? For this, you could use for..in:

for (key in arr) console.log(arr[key]);
/* displays:
1
2
3
4
something-something
*/