如何访问和处理嵌套对象、数组或 JSON？

Question

我有一个包含对象和数组的嵌套数据结构。如何提取信息，即访问特定或多个值（或键）？

例如：

var data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

如何访问 name 中第二项的 items ？

原文由 Felix Kling 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

预赛

JavaScript 只有一种可以包含多个值的数据类型： Object 。 数组 是一种特殊形式的对象。

（普通）对象具有形式

{key: value, key: value, ...}

数组有形式

[value, value, ...]

数组和对象都公开了一个 key -> value 结构。数组中的键必须是数字，而任何字符串都可以用作对象中的键。键值对也称为 “属性” 。

可以使用 点符号 访问属性

const value = obj.someProperty;

或 括号表示法，如果属性名称不是有效的 JavaScript 标识符名称 [spec] ，或者名称是变量的值：

 // 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 在 Parse JSON in JavaScript? 中进行了解释。 .

进一步阅读材料

如何访问数组和对象是基本的 JavaScript 知识，因此建议阅读 MDN JavaScript 指南，尤其是章节

• 使用对象

• 数组

• 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 的返回？

大多数情况下，当您得到 undefined 时，对象/数组根本没有具有该名称的属性。

 const foo = {bar: {baz: 42}};
 console.log(foo.baz); // undefined

使用 console.log 或 console.dir 并检查对象/数组的结构。您尝试访问的属性可能实际上是在嵌套对象/数组上定义的。

 console.log(foo.bar.baz); // 42

---

如果属性名称是动态的并且我事先不知道它们怎么办？

如果属性名称未知，或者我们想要访问对象/数组元素的所有属性，我们可以对对象使用 for...in [MDN] 循环，对数组使用 for [MDN] 循环来遍历所有属性/元素。

对象

要遍历 data 的所有属性，我们可以像这样遍历 对象：

 for (const prop in data) {
 // `prop` contains the name of each property, ie `'code'` or `'items'`
 // consequently, `data[prop]` refers to the value of each property, ie
 // either `42` or the array
 }

根据对象的来源（以及您想要做什么），您可能必须在每次迭代中测试该属性是否真的是对象的属性，或者它是继承的属性。您可以使用 Object#hasOwnProperty [MDN] 来做到这一点。

作为 for...in 与 hasOwnProperty 的替代方法，您可以使用 Object.keys [MDN] 获取 _属性名称数组_：

 Object.keys(data).forEach(function(prop) {
 // `prop` is the property name
 // `data[prop]` is the property value
 });

数组

要遍历 data.items 数组 的所有元素，我们使用 for 循环：

 for(let i = 0, l = data.items.length; i < l; i++) {
 // `i` will take on the values `0`, `1`, `2`,..., ie 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)”被认为是不好的做法？ .

随着浏览器对 ECMAScript 5 的支持越来越多，数组方法 forEach [MDN] 也成为了一个有趣的替代方案：

 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 (ie `data.items` in this case)
 });

在支持 ES2015 (ES6) 的环境中，您还可以使用 for...of [MDN] 循环，它不仅适用于数组，还适用于任何 可迭代 的：

 for (const item of data.items) {
 // `item` is the array element, **not** the index
 }

在每次迭代中， for...of 直接为我们提供可迭代的下一个元素，没有“索引”可供访问或使用。

---

如果我不知道数据结构的“深度”怎么办？

除了未知键之外，数据结构的“深度”（即有多少嵌套对象）也可能是未知的。如何访问深度嵌套的属性通常取决于确切的数据结构。

但是如果数据结构包含重复模式，例如二叉树的表示，则解决方案通常包括 递归地 [维基百科] 访问数据结构的每个级别。

这是获取二叉树的第一个叶节点的示例：

 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));

---

---

帮手

由于复杂对象或数组的结构不一定很明显，我们可以检查每一步的值来决定如何进一步移动。 console.log [MDN] 和 console.dir [MDN] 帮助我们做到这一点。例如（Chrome 控制台的输出）：

 > 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 和 __proto__ 三个属性。后者是用于对象原型链的内部属性。不过，原型链和继承超出了这个答案的范围。

原文由 Felix Kling 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以通过这种方式访问它

data.items[1].name

要么

data["items"][1]["name"]

两种方式都是平等的。

原文由 vitmalina 发布，翻译遵循 CC BY-SA 3.0 许可协议