预赛
JavaScript 只有一种数据类型，可以包含多个值：Object. An Array是一种特殊形式的物体。
（普通）对象具有以下形式
{key: value, key: value, ...}
数组的形式为
[value, value, ...]
数组和对象都公开了key -> value结构。数组中的键必须是数字，而任何字符串都可以用作对象中的键。键值对也称为“特性”.
可以使用以下方式访问属性点符号
const value = obj.someProperty;
or bracket notation, if the property name would not be a valid JavaScript identifier name [spec], or the name is the value of a variable:
// the space is not a valid character in identifier names
const value = obj["some Property"];
// property name as variable
const name = "some Property";
const value = obj[name];
因此，只能使用方括号表示法来访问数组元素：
const value = arr[5]; // arr.5 would be a syntax error
// property name / index as variable
const x = 5;
const value = arr[x];
等等...JSON 怎么样？
JSON 是数据的文本表示形式，就像 XML、YAML、CSV 等一样。要处理此类数据，首先必须将其转换为 JavaScript 数据类型，即数组和对象（刚刚解释了如何处理这些数据）。问题中解释了如何解析 JSON在 JavaScript 中解析 JSON？ .
进一步阅读材料
如何访问数组和对象是 JavaScript 的基础知识，因此建议阅读MDN JavaScript 指南，特别是以下部分
- 使用对象
- Arrays
- Eloquent JavaScript - 数据结构
访问嵌套数据结构
嵌套数据结构是引用其他数组或对象的数组或对象，即它的值是数组或对象。可以通过连续应用点或括号表示法来访问此类结构。
这是一个例子：
const data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
假设我们想要访问name第二项的。
我们可以按照以下步骤进行操作：
正如我们所看到的data是一个对象，因此我们可以使用点表示法访问它的属性。这items属性的访问方式如下：
data.items
该值是一个数组，要访问它的第二个元素，我们必须使用括号表示法：
data.items[1]
该值是一个对象，我们再次使用点表示法来访问name财产。所以我们最终得到：
const item_name = data.items[1].name;
或者，我们可以对任何属性使用括号表示法，特别是如果名称包含使其对点表示法无效的字符：
const item_name = data['items'][1]['name'];
我正在尝试访问某个属性，但我只得到undefined back?
大多数时候当你得到undefined，对象/数组根本没有具有该名称的属性。
const foo = {bar: {baz: 42}};
console.log(foo.baz); // undefined
Use console.log or console.dir并检查对象/数组的结构。您尝试访问的属性实际上可能是在嵌套对象/数组上定义的。
console.log(foo.bar.baz); // 42
如果属性名称是动态的并且我事先不知道它们怎么办？
If the property names are unknown or we want to access all properties of an object / elements of an array, we can use the for...in [MDN] loop for objects and the for [MDN] loop for arrays to iterate over all properties / elements.
Objects
迭代所有属性data，我们可以迭代object像这样：
for (const prop in data) {
// `prop` contains the name of each property, i.e. `'code'` or `'items'`
// consequently, `data[prop]` refers to the value of each property, i.e.
// either `42` or the array
}
Depending on where the object comes from (and what you want to do), you might have to test in each iteration whether the property is really a property of the object, or it is an inherited property. You can do this with Object#hasOwnProperty [MDN].
As alternative to for...in with hasOwnProperty, you can use Object.keys [MDN] to get an array of property names:
Object.keys(data).forEach(function(prop) {
// `prop` is the property name
// `data[prop]` is the property value
});
Arrays
迭代所有元素data.items array，我们使用一个for loop:
for(let i = 0, l = data.items.length; i < l; i++) {
// `i` will take on the values `0`, `1`, `2`,..., i.e. in each iteration
// we can access the next element in the array with `data.items[i]`, example:
//
// var obj = data.items[i];
//
// Since each element is an object (in our example),
// we can now access the objects properties with `obj.id` and `obj.name`.
// We could also use `data.items[i].id`.
}
也可以使用for...in迭代数组，但有一些原因应该避免这种情况：为什么在 JavaScript 中使用数组的“for(var item in list)”被认为是不好的做法？.
With the increasing browser support of ECMAScript 5, the array method forEach [MDN] becomes an interesting alternative as well:
data.items.forEach(function(value, index, array) {
// The callback is executed for each element in the array.
// `value` is the element itself (equivalent to `array[index]`)
// `index` will be the index of the element in the array
// `array` is a reference to the array itself (i.e. `data.items` in this case)
});
In environments supporting ES2015 (ES6), you can also use the for...of [MDN] loop, which not only works for arrays, but for any iterable:
for (const item of data.items) {
// `item` is the array element, **not** the index
}
在每次迭代中，for...of直接给我们迭代的下一个元素，没有“索引”来访问或使用。
如果我不知道数据结构的“深度”怎么办？
除了未知的键之外，数据结构的“深度”（即有多少个嵌套对象）也可能是未知的。如何访问深度嵌套的属性通常取决于确切的数据结构。
But if the data structure contains repeating patterns, e.g. the representation of a binary tree, the solution typically includes to recursively [Wikipedia] access each level of the data structure.
下面是获取二叉树的第一个叶节点的示例：
function getLeaf(node) {
if (node.leftChild) {
return getLeaf(node.leftChild); // <- recursive call
}
else if (node.rightChild) {
return getLeaf(node.rightChild); // <- recursive call
}
else { // node must be a leaf node
return node;
}
}
const first_leaf = getLeaf(root);
const root = {
leftChild: {
leftChild: {
leftChild: null,
rightChild: null,
data: 42
},
rightChild: {
leftChild: null,
rightChild: null,
data: 5
}
},
rightChild: {
leftChild: {
leftChild: null,
rightChild: null,
data: 6
},
rightChild: {
leftChild: null,
rightChild: null,
data: 7
}
}
};
function getLeaf(node) {
if (node.leftChild) {
return getLeaf(node.leftChild);
} else if (node.rightChild) {
return getLeaf(node.rightChild);
} else { // node must be a leaf node
return node;
}
}
console.log(getLeaf(root).data);
访问具有未知键和深度的嵌套数据结构的更通用方法是测试值的类型并采取相应的操作。
这是一个示例，它将嵌套数据结构内的所有原始值添加到数组中（假设它不包含任何函数）。如果我们遇到一个对象（或数组），我们只需调用toArray再次使用该值（递归调用）。
function toArray(obj) {
const result = [];
for (const prop in obj) {
const value = obj[prop];
if (typeof value === 'object') {
result.push(toArray(value)); // <- recursive call
}
else {
result.push(value);
}
}
return result;
}
const data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
function toArray(obj) {
const result = [];
for (const prop in obj) {
const value = obj[prop];
if (typeof value === 'object') {
result.push(toArray(value));
} else {
result.push(value);
}
}
return result;
}
console.log(toArray(data));
Helpers
Since the structure of a complex object or array is not necessarily obvious, we can inspect the value at each step to decide how to move further. console.log [MDN] and console.dir [MDN] help us doing this. For example (output of the Chrome console):
> console.log(data.items)
[ Object, Object ]
在这里我们看到data.items是一个包含两个元素的数组，这两个元素都是对象。在 Chrome 控制台中，甚至可以立即扩展和检查对象。
> console.log(data.items[1])
Object
id: 2
name: "bar"
__proto__: Object
这告诉我们data.items[1]是一个对象，展开后我们看到它有三个属性，id, name and __proto__。后者是用于对象原型链的内部属性。不过，原型链和继承超出了这个答案的范围。
