JavaScript基础知识：对象文字和嵌套数组

Once they understand arrays, many developers ask the obvious follow-up question: what about nested or associative arrays? How do we make those in JavaScript?

一旦了解了数组 ，许多开发人员就会提出一个显而易见的后续问题：嵌套数组或关联数组如何处理？ 我们如何用JavaScript制作那些？

To review: a basic array contains elements, separated by commas:

要查看：基本数组包含由逗号分隔的elements ：

var arr = [ "balloon", 15, "red" ];

To get the value of any one member of the array, we reference its index, i.e. its position in the array, with the first “slot” starting at index 0:

要获取数组中任何一个成员的值，我们引用其索引 ，即其在数组中的位置，第一个“ slot”从索引0开始：

console.log(arr[2]);
> "red"

An associative array indexes elements differently; usually with a word for each slot, making it far more structured and readable. Unfortunately, JavaScript doesn’t have associative arrays, at least not directly: instead, it has “object literals”:

关联数组对元素的索引不同； 通常每个插槽都带有一个单词，从而使其更具结构性和可读性。 不幸的是，JavaScript没有关联数组，至少没有直接关联：相反，它具有“对象文字”：

var myObj = { a : 'blue', b: 21, c: 3 };

This creates a new object with properties; in this case, the properties are named a, b and c. Each property - also referred to as a key in this context - has a value.

这将创建一个具有属性的新对象 ； 在这种情况下，这些属性分别命名为a ， b和c 。 每个属性(在此上下文中也称为键)都有一个值。

We can reference the property of an object to determine its value in the exact same way we did an element in an array, substituting the name of the key, rather than using a numbered index:

我们可以引用对象的属性来确定其值，方法与在数组中处理元素的方法完全相同，用键的名称代替，而不是使用数字索引：

console.log(myObj["a"]);
> "blue"

Alternatively, we could use dot notation to yeild the same result:

或者，我们可以使用点符号来获得相同的结果：

console.log(myObj.a);
> "blue"

Observant readers will note that this is exactly the same as referencing an object’s property from the DOM:

细心的读者会注意到，这与从DOM引用对象的属性完全相同：

document.body.offsetHeight;
> 1466

That’s because they are the same thing.

那是因为它们是同一回事。

套料 (Nesting)

Making a “deep” associative array in JavaScript is therefore a case of nesting object literals. Let’s say we wanted to categorize a series of people by shared qualities: height in centimetres, eye color, etc. We’ll call the first two people in this group “Alice” and “Bob”.

因此，在JavaScript中创建“深度”关联数组是嵌套对象文字的一种情况。 假设我们要按照共同的素质对一系列人进行分类：身高(厘米)，眼睛颜色等。我们将这个组中的前两个人称为“爱丽丝”和“鲍勃”。

Like Bob, Alice’s stats would represented by an object literal, with defined keys:

与Bob一样，Alice的统计信息将由对象文字表示，并带有已定义的键：

{   height: 183,
        eyecolor: 'hazel'
    }

Note that numerical values are written as numbers, whereas string values must be surrounded by single or double quotes.

请注意，数值被写为数字，而字符串值必须用单引号或双引号引起来。

This would, in turn, be part of another object literal, called users, and placed under the key of “Alice”:

反过来，它将成为另一个对象文字的一部分，称为users ，并放置在“ Alice”的键下：

var users = {
    Alice: {    
                height: 183,
                eyecolor: 'hazel'
            }
    }

Adding Bob:

添加鲍勃：

var users = {
    Alice: {    
                height: 183,
                eyecolor: 'hazel'
            },
    Bob:    { 
                height: 172,
                eyecolor: 'blue'
            }
}

Referencing Alice in the console:

在控制台中引用Alice：

users.Alice
> Object {height: 183, eyecolor: "hazel"}

Referencing the color of Bob’s eyes:

参考鲍勃的眼睛的颜色：

users.Bob.eyecolor
> "blue"

Alternatively, we could place the names as part of the data of each object, and reference those objects as elements in an array:

另外，我们可以将名称作为每个对象数据的一部分，并将这些对象作为元素引用到数组中：

var users = [
    		 {    name: 'Alice',
                height: 183,
                eyecolor: 'hazel'
            },
            {
            	   name: 'Bob', 
                height: 172,
                eyecolor: 'blue'
            }
]

Finding the first user, via the console:

通过控制台查找第一个用户：

users[0]
> Object {name: "Alice", height: 183, eyecolor: "hazel"}

Finding the height of the first user:

查找第一个用户的身高：

users[0].height
> 183

Object literals are very closely associated with JSON, a format I’ll be looking at next.

对象文字与JSON密切相关，JSON是我接下来要讨论的格式。

翻译自: https://thenewcode.com/115/JavaScript-Fundamentals-Object-Literals-and-Nested-Arrays