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

（普通）对象具有形式

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

数组具有以下形式

[value, value, ...]

数组和对象都公开一个key -> 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 呢？

JSON 是数据的文本表示，就像 XML、YAML、CSV 等一样。要处理此类数据，首先必须将其转换为 JavaScript 数据类型，即数组和对象（以及如何处理这些已在刚刚解释过）。在 JavaScript 中解析 JSON的问题中解释了如何解析 JSON ？.

访问嵌套数据结构

嵌套数据结构是一个数组或对象，它引用其他数组或对象，即它的值是数组或对象。可以通过连续应用点或括号表示法来访问此类结构。

下面是一个例子：

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, 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]来做到这一点。

作为for...inwith 的替代方法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`,..., 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)' 被认为是不好的做法？.

随着浏览器对 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直接给我们迭代的下一个元素，没有“索引”可以访问或使用。

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

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

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

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

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

访问具有未知键和深度的嵌套数据结构的更通用方法是测试值的类型并相应地采取行动。

这是一个示例，它将嵌套数据结构中的所有原始值添加到数组中（假设它不包含任何函数）。如果我们遇到一个对象（或数组），我们只需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;
}

console

由于复杂对象或数组的结构不一定很明显，我们可以检查每一步的值来决定如何进一步移动。console.log和console.dir帮助我们做到这一点。例如（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__。后者是用于对象原型链的内部属性。

链接: https://www.fly63.com/article/detial/10702