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

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

答案

初赛

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 数据类型，即数组和对象（以及如何使用它们）。如何在 JavaScript 中解析 JSON问题中说明了如何解析 JSON ？ 。

进一步阅读材料

如何访问数组和对象是 JavaScript 的基本知识，因此建议您阅读《 MDN 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, 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遍历数组，但是有理由应避免这种情况： 为什么在 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）的环境中，您还可以使用for...of [MDN]循环，它不仅适用于数组，而且适用于任何可迭代的方法 ： 

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

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

这是一个将嵌套数据结构内的所有原始值添加到数组中的示例（假设它不包含任何函数）。如果遇到一个对象（或数组），我们只需对该值再次调用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__ 。后者是用于对象原型链的内部属性。但是，原型链和继承超出了此答案的范围。

您可以这样访问

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 美分。

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

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

Object.keys() ， Object.values() （ES 2017）和Object.entries() （ES 2017）

Object.keys()返回对象的键数组， Object.values()返回对象的值数组， Object.entries()返回对象的键和相应值的数组，格式为[key, value] 。 

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]]

具有 for-of 循环和销毁分配的Object.entries() 

const obj = {
  a: 1
 ,b: 2
 ,c: 3
}

for (const [key, value] of Object.entries(obj)) {
  console.log(`key: ${key}, value: ${value}`)
}

使用for-of 循环和解构赋值来迭代Object.entries()的结果非常方便。

For-of 循环使您可以迭代数组元素。语法适用for (const element of array) （我们可以将const替换为var或let ，但如果我们不打算修改element ，则最好使用const ）。

通过解构分配，您可以从数组或对象中提取值并将其分配给变量。在这种情况下， const [key, value]意味着我们没有将[key, value]数组分配给element ，而是将该数组的第一个元素分配给key ，将第二个元素分配给value 。等效于： 

for (const element of Object.entries(obj)) {
  const key = element[0]
       ,value = element[1]
}

如您所见，解构使这一过程变得更加简单。

Array.prototype.every()和Array.prototype.some()

的every()方法返回true ，如果指定的回调函数返回true为阵列的每个元素。在some()方法返回true ，如果指定的回调函数返回true对于一些 （至少一个）元素。 

const arr = [1, 2, 3]

// true, because every element is greater than 0
console.log(arr.every(x => x > 0))
// false, because 3^2 is greater than 5
console.log(arr.every(x => Math.pow(x, 2) < 5))
// true, because 2 is even (the remainder from dividing by 2 is 0)
console.log(arr.some(x => x % 2 === 0))
// false, because none of the elements is equal to 5
console.log(arr.some(x => x === 5))

Array.prototype.find()和Array.prototype.filter()

find()方法返回满足所提供的回调函数的第一个元素。 filter()方法返回一个满足所提供的回调函数的所有元素的数组。 

const arr = [1, 2, 3]

// 2, because 2^2 !== 2
console.log(arr.find(x => x !== Math.pow(x, 2)))
// 1, because it's the first element
console.log(arr.find(x => true))
// undefined, because none of the elements equals 7
console.log(arr.find(x => x === 7))

// [2, 3], because these elements are greater than 1
console.log(arr.filter(x => x > 1))
// [1, 2, 3], because the function returns true for all elements
console.log(arr.filter(x => true))
// [], because none of the elements equals neither 6 nor 7
console.log(arr.filter(x => x === 6 || x === 7))

Array.prototype.map()

map()方法返回一个数组，该数组具有在数组元素上调用提供的回调函数的结果。 

const arr = [1, 2, 3]

console.log(arr.map(x => x + 1)) // [2, 3, 4]
console.log(arr.map(x => String.fromCharCode(96 + x))) // ['a', 'b', 'c']
console.log(arr.map(x => x)) // [1, 2, 3] (no-op)
console.log(arr.map(x => Math.pow(x, 2))) // [1, 4, 9]
console.log(arr.map(String)) // ['1', '2', '3']

Array.prototype.reduce()

reduce()方法通过使用两个元素调用提供的回调函数，将数组减小为单个值。 

const arr = [1, 2, 3]

// Sum of array elements.
console.log(arr.reduce((a, b) => a + b)) // 6
// The largest number in the array.
console.log(arr.reduce((a, b) => a > b ? a : b)) // 3

reduce()方法采用可选的第二个参数，它是初始值。当您在其上调用reduce()的数组可以具有零个或一个元素时，这很有用。例如，如果我们要创建一个函数sum() ，该函数将数组作为参数并返回所有元素的和，则可以这样编写： 

const sum = arr => arr.reduce((a, b) => a + b, 0)

console.log(sum([]))     // 0
console.log(sum([4]))    // 4
console.log(sum([2, 5])) // 7

有时，使用字符串访问嵌套对象可能是理想的。例如，简单的方法是第一级

var obj = { hello: "world" };
var key = "hello";
alert(obj[key]);//world

但这对于复杂的 json 通常不是这种情况。随着 json 变得越来越复杂，在 json 内部查找值的方法也变得复杂。导航 json 的一种递归方法是最好的，如何利用该递归将取决于要搜索的数据类型。如果涉及条件语句，那么使用json 搜索可能是一个很好的工具。

如果所访问的属性是已知的，但是路径很复杂，例如在此对象中

var obj = {
 arr: [
    { id: 1, name: "larry" },    
    { id: 2, name: "curly" },
    { id: 3, name: "moe" }
 ]
};

而且您知道要获取对象中数组的第一个结果，也许您想使用

var moe = obj["arr[0].name"];

但是，这将导致异常，因为具有该名称的对象没有属性。能够使用此方法的解决方案将是使对象的树形外观变平。这可以递归完成。 

function flatten(obj){
 var root = {};
 (function tree(obj, index){
   var suffix = toString.call(obj) == "[object Array]" ? "]" : "";
   for(var key in obj){
    if(!obj.hasOwnProperty(key))continue;
    root[index+key+suffix] = obj[key];
    if( toString.call(obj[key]) == "[object Array]" )tree(obj[key],index+key+suffix+"[");
    if( toString.call(obj[key]) == "[object Object]" )tree(obj[key],index+key+suffix+".");   
   }
 })(obj,"");
 return root;
}

现在，可以将复杂的对象展平

var obj = previous definition;
var flat = flatten(obj);
var moe = flat["arr[0].name"];//moe

这是正在使用的这种方法的jsFiddle Demo 。

这个问题已经很老了，因此是一个当代更新。随着 ES2015 的出现，还有一些替代方法可以保留您所需的数据。现在有一个称为对象解构的功能，用于访问嵌套对象。 

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

const {
  items: [, {
    name: secondName
  }]
} = data;

console.log(secondName);

上面的示例从名为items的数组的name关键字secondName创建一个名为secondName的变量,表示跳过数组中的第一个对象。

值得注意的是，在此示例中，这可能是多余的，因为简单的数组访问更易于阅读，但在将对象分开时通常很有用。

这是您的特定用例的非常简短的介绍，解构可能是一开始不习惯的不寻常语法。我建议阅读Mozilla 的 Destructuring Assignment 文档以了解更多信息。

要访问嵌套属性，您需要指定其名称，然后搜索对象。

如果您已经知道确切的路径，则可以在脚本中对其进行硬编码，如下所示： 

data['items'][1]['name']

这些也可以 - 

data.items[1].name
data['items'][1].name
data.items[1]['name']

如果您事先不知道确切的名称，或者用户是为您提供名称的人。然后需要动态搜索数据结构。这里有人建议可以使用for循环进行搜索，但是有一种非常简单的方法可以使用Array.reduce遍历路径。 

const data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] }
const path = [ 'items', '1', 'name']
let result = path.reduce((a,v) => a[v], data)

该路径是一种表达方式：首先将带有关键items的对象作为对象，而该对象恰好是一个数组。然后采用第1个元素（0 个索引数组）。最后，将具有键name的对象放在该数组元素中，该对象恰好是字符串bar 。

如果您的路径很长，甚至可以使用String.split所有操作 - 

'items.1.name'.split('.').reduce((a,v) => a[v], data)

这只是普通的 JavaScript，没有使用任何第三方库（如 jQuery 或 lodash）。

您可以使用lodash _get函数： 

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.get(object, 'a[0].b.c');
// => 3
var ourStorage = {


"desk":    {
    "drawer": "stapler"
  },
"cabinet": {
    "top drawer": { 
      "folder1": "a file",
      "folder2": "secrets"
    },
    "bottom drawer": "soda"
  }
};
ourStorage.cabinet["top drawer"].folder2; // Outputs -> "secrets"

要么

//parent.subParent.subsubParent["almost there"]["final property"]

基本上，在每个子对象之间展开一个点，该子对象在该子对象下展开，并且当对象名称由两个字符串组成时，必须使用 [“obj Name”] 表示法。否则，只需一个点就足够了。

来源： https : //learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects

除此之外，访问嵌套数组的过程如下： 

var ourPets = [
  {
    animalType: "cat",
    names: [
      "Meowzer",
      "Fluffy",
      "Kit-Cat"
    ]
  },
  {
    animalType: "dog",
    names: [
      "Spot",
      "Bowser",
      "Frankie"
    ]
  }
];
ourPets[0].names[1]; // Outputs "Fluffy"
ourPets[1].names[0]; // Outputs "Spot"

来源： https : //learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays/

另一个描述上述情况的有用文档： https : //developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics#Bracket_notation

通过点走进行属性访问： https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation

如果您愿意包含一个库，那么使用JSONPath将是最灵活的解决方案之一： https : //github.com/s3u/JSONPath （节点和浏览器）

对于您的用例，json 路径为： 

$..items[1].name

所以： 

var secondName = jsonPath.eval(data, "$..items[1].name");