访问/进程（嵌套）对象，数组或JSON

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

例如：

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

我怎么能访问name中的第二项的items ？

---

预赛

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在解析JavaScript中的JSON问题中进行了解释？ 。

更多阅读材料

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

使用对象

数组

雄辩的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...in作为对象， for [MDN]循环用于数组遍历所有属性/元素。

对象

为了迭代data所有属性，我们可以像这样迭代对象 ：

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
}

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

作为hasOwnProperty for...in替代方法，您可以使用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`,..., 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 list 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 (i.e. `data.items` in this case)
}); 

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

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

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

---

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

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

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

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

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

---

你可以这样访问它

data.items[1].name

要么

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

两种方式都是平等的。

---

如果你试图通过id或name访问示例结构中的一个item ，而不知道它在数组中的位置，最简单的方法就是使用underscore.js库：

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

_.find(data.items, function(item) {
  return item.id === 2;
});
// Object {id: 2, name: "bar"}

根据我的经验，使用高阶函数而不是for或for..in循环会导致代码更容易推理，从而更易于维护。

只是我2美分。

链接地址: http://www.djcxy.com/p/27227.html

上一篇: Access / process (nested) objects, arrays or JSON

下一篇: Get JavaScript object from array of objects by value of property