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

Question

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

例如：

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

如何访问项目中第二个项目的名称？

Answer 1

匿名用户

对象和数组有很多内置方法可以帮助您处理数据。

注意：在许多示例中，我使用了箭头函数。它们类似于函数表达式，但它们以词法方式绑定this值。

<代码>对象。keys（）返回对象的键数组，对象。values（）返回对象值的数组，并返回对象。entries（）返回对象键和相应值的数组，格式为[key，value]。

js lang-js prettyprint-override">const obj = {
  a: 1
 ,b: 2
 ,c: 3
}

console.log(Object.keys(obj)) // ['a', 'b', 'c']
console.log(Object.values(obj)) // [1, 2, 3]
console.log(Object.entries(obj)) // [['a', 1], ['b', 2], ['c', 3]]

Answer 2

你可以这样进入

data.items[1].name

或

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

这两种方式是平等的。

Answer 3

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

物体的形式

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

数组具有以下形式

[value, value, ...]

数组和对象都公开了一个键-

可以使用点符号访问属性

const value = obj.someProperty;

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

// 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是数据的文本表示，就像XML、YAML、CSV等。要处理此类数据，首先必须将其转换为JavaScript数据类型，即数组和对象（刚才解释了如何处理这些数据）。如何解析JSON在JavaScript中解析JSON的问题中进行了解释。

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

• 使用对象
• 数组
• 雄辩的JavaScript-数据结构

嵌套数据结构是指其他数组或对象的数组或对象，即其值是数组或对象。这种结构可以通过连续应用点或括号符号来访问。

下面是一个示例：

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

假设我们要访问第二项的name。

下面是我们如何一步一步地做到这一点：

正如我们所见，数据是一个对象，因此我们可以使用点符号访问其属性。可以按如下方式访问项目属性：

data.items

该值是一个数组，要访问它的第二个元素，我们必须使用括号表示法：

data.items[1]

该值是一个对象，我们再次使用点符号来访问名称属性。因此，我们最终得到：

const item_name = data.items[1].name;

或者，我们可以对任何属性使用括号表示法，特别是如果名称中包含的字符会使其对点表示法的使用无效：

const item_name = data['items'][1]['name'];

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

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

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

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

如果属性名未知或我们想访问一个对象/数组元素的所有属性，我们可以使用来。。。在对象的循环和数组的循环中迭代所有属性/元素。

物体

要迭代数据的所有属性，我们可以像这样迭代对象：

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
}

根据对象的来源（以及您想要做的事情），您可能需要在每次迭代中测试该属性是否真的是对象的属性，还是继承的属性。您可以使用对象hasOwnProperty来实现这一点。

作为在带有hasOwnProperty的中...的替代方法，您可以使用Object.keys[MDN]来获取属性名称数组：

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

阵列

迭代数据的所有元素。项数组，我们使用循环：

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遍历数组，但应该避免这样做是有原因的：为什么“for（列表中的var项）”与数组在JavaScript中被认为是不好的做法？。

随着ECMAScript 5浏览器支持的增加，数组方法forEach也成为一种有趣的替代方法：

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

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

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

在每次迭代中，用于。。。of直接给了我们iterable的下一个元素，没有“索引”可访问或使用。

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

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

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

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