问题描述：

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

例如：

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

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

解决方案 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 已在问题“在 JavaScript 中解析 JSON？”中解释。

进一步阅读材料

如何访问数组和对象是 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, 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);

显示代码片段

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

Run code snippetHide resultsExpand snippet

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

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

Run code snippetHide resultsExpand snippet

助手

由于复杂对象或数组的结构不一定显而易见，我们可以检查每一步的值来决定如何进一步移动。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__后者是用于对象原型链的内部属性。不过，原型链和继承不在本答案的讨论范围内。

解决方案 2：

您可以通过这种方式访问

data.items[1].name

或者

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

两种方式都是平等的。

解决方案 3：

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

注意：在许多示例中，我使用了箭头函数。它们类似于函数表达式，但它们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]]

运行代码片段Hide results展开片段

Object.entries()使用 for-of 循​​环和解构赋值

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

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

运行代码片段Hide results展开片段

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

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

解构赋值允许你从数组或对象中提取值并将其赋给变量。在这种情况下，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`truesome()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))

运行代码片段Hide results展开片段

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

运行代码片段Hide results展开片段

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

运行代码片段Hide results展开片段

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

运行代码片段Hide results展开片段

该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

运行代码片段Hide results展开片段

解决方案 4：

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

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循环会使代码更容易推理，因此更易于维护。

仅我的观点。

解决方案 5：

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

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此方法的使用示例。

解决方案 6：

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

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

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第 -st 个元素（0 个索引数组）。最后获取该数组元素中带有键的对象name，该对象恰好是字符串bar。

如果你的路径很长，你甚至可以使用String.split让这一切变得更容易 -

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

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

解决方案 7：

这里提到了获取 javascript 对象属性的 4 种不同方法：

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

// Method 1
let method1 = data.items[1].name;
console.log(method1);

// Method 2
let method2 = data.items[1]["name"];
console.log(method2);

// Method 3
let method3 = data["items"][1]["name"];
console.log(method3);

// Method 4  Destructuring
let { items: [, { name: second_name }] } = data;
console.log(second_name);

运行代码片段Hide results展开片段

解决方案 8：

简单的解释是：

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

/*
1. `data` is object contain `items` object*/
console.log(data);

/*
2. `items` object contain array of two objects as elements*/
console.log(data.items);

/*
3. you need 2nd element of array - the `1` from `[0, 1]`*/
console.log(data.items[1]);

/*
4. and you need value of `name` property of 2nd object-element of array)*/
console.log(data.items[1].name);

运行代码片段Hide results展开片段

解决方案 9：

您可以使用lodash _get功能：

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

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

解决方案 10：

这个问题相当老了，所以作为当代的更新。随着 ES2015 的出现，有其他方法可以获取所需的数据。现在有一项称为对象解构的功能，用于访问嵌套对象。

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

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

console.log(secondName);

运行代码片段Hide results展开片段

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

值得注意的是，对于这个例子来说，它可能有些过度，因为简单的数组访问更容易阅读，但它在分解一般对象时很有用。

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

解决方案 11：

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/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation

解决方案 12：

以防万一，有人在 2017 年或以后看到这个问题，并寻找一种容易记住的方法，这里有一篇关于如何在 JavaScript 中访问嵌套对象而不被迷惑的详尽博客文章

无法读取未定义错误的属性“foo”

1. Oliver Steele 的嵌套对象访问模式

最简单、最干净的方法是使用 Oliver Steele 的嵌套对象访问模式

const name = ((user || {}).personalInfo || {}).name;

有了这种符号，你永远不会遇到

无法读取未定义的属性“名称”。

您基本上会检查用户是否存在，如果不存在，则动态创建一个空对象。这样，下一级键将始终从存在的对象或空对象访问，但永远不会从未定义的对象访问。

1. 使用数组 Reduce 访问嵌套对象

为了能够访问嵌套数组，您可以编写自己的数组减少实用程序。

const getNestedObject = (nestedObj, pathArr) => {
    return pathArr.reduce((obj, key) =>
        (obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj);
}

// pass in your object structure as array elements
const name = getNestedObject(user, ['personalInfo', 'name']);

// to access nested array, just pass in array index as an element the path array.
const city = getNestedObject(user, ['personalInfo', 'addresses', 0, 'city']);
// this will return the city from the first address item.

还有一个优秀的类型处理最小库typepy，可以为您完成所有这些工作。

解决方案 13：

动态访问多级对象。

var obj = {
  name: "john doe",
  subobj: {
    subsubobj: {
      names: "I am sub sub obj"
    }
  }
};

var level = "subobj.subsubobj.names";
level = level.split(".");

var currentObjState = obj;

for (var i = 0; i < level.length; i++) {
  currentObjState = currentObjState[level[i]];
}

console.log(currentObjState);

工作小提琴：https ://jsfiddle.net/andreitodorut/3mws3kjL/

解决方案 14：

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

对于您的用例，json 路径将是：

$..items[1].name

所以：

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

解决方案 15：

我更喜欢 JQuery。它更简洁，更易读。

$.each($.parseJSON(data), function (key, value) {
  alert(value.<propertyname>);
});

解决方案 16：

如果你正在寻找一个或多个符合特定条件的对象，则可以使用query-js进行一些选择

//will return all elements with an id larger than 1
data.items.where(function(e){return e.id > 1;});
//will return the first element with an id larger than 1
data.items.first(function(e){return e.id > 1;});
//will return the first element with an id larger than 1 
//or the second argument if non are found
data.items.first(function(e){return e.id > 1;},{id:-1,name:""});

还有 asingle和 a，singleOrDefault它们的工作原理分别与first和非常firstOrDefault相似。唯一的区别是，如果找到多个匹配项，它们将抛出异常。

有关 query-js 的进一步解释，你可以从这篇文章开始

解决方案 17：

Underscore js 方式

这是一个 JavaScript 库，它提供了大量有用的functional programming帮助程序，而无需扩展任何内置对象。

解决方案：

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

var item = _.findWhere(data.items, {
  id: 2
});
if (!_.isUndefined(item)) {
  console.log('NAME =>', item.name);
}

//using find - 

var item = _.find(data.items, function(item) {
  return item.id === 2;
});

if (!_.isUndefined(item)) {
  console.log('NAME =>', item.name);
}

解决方案 18：

老问题，但没有人提到 lodash（只是下划线）。

如果你已经在项目中使用 lodash，我认为在一个复杂的示例中可以优雅地做到这一点：

选择 1

_.get(response, ['output', 'fund', 'data', '0', 'children', '0', 'group', 'myValue'], '')

相同于：

选择 2

response.output.fund.data[0].children[0].group.myValue

第一个和第二个选项之间的区别在于，在Opt 1中，如果路径中缺少（未定义）其中一个属性，则不会出现错误，它会返回第三个参数。

对于数组过滤器，lodash 有_.find()，但我宁愿使用常规的filter()。但我仍然认为上述方法_.get()在处理非常复杂的数据时非常有用。我过去曾遇到过非常复杂的 API，它很方便！

我希望它对于那些正在寻找选项来处理标题所暗示的真正复杂数据的人来说是有用的。

解决方案 19：

我觉得提问者应该不会只关心一层嵌套的对象，所以我给出了下面的示例来演示如何访问深层嵌套的 json 对象的节点。好吧，让我们找到 id 为 '5' 的节点。

var data = {
  code: 42,
  items: [{
    id: 1,
    name: 'aaa',
    items: [{
        id: 3,
        name: 'ccc'
      }, {
        id: 4,
        name: 'ddd'
      }]
    }, {
    id: 2,
    name: 'bbb',
    items: [{
        id: 5,
        name: 'eee'
      }, {
        id: 6,
        name: 'fff'
      }]
    }]
};

var jsonloop = new JSONLoop(data, 'id', 'items');

jsonloop.findNodeById(data, 5, function(err, node) {
  if (err) {
    document.write(err);
  } else {
    document.write(JSON.stringify(node, null, 2));
  }
});

<script src="https://rawgit.com/dabeng/JSON-Loop/master/JSONLoop.js"></script>

运行代码片段Hide results展开片段

解决方案 20：

在 2020 年，您可以使用 @babel/plugin-proposal-optional-chaining 非常容易地访问对象中的嵌套值。

 const obj = {
 foo: {
   bar: {
     baz: class {
   },
  },
 },
};

const baz = new obj?.foo?.bar?.baz(); // baz instance

const safe = new obj?.qux?.baz(); // undefined
const safe2 = new obj?.foo.bar.qux?.(); // undefined

https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining

https://github.com/tc39/proposal-optional-chaining

解决方案 21：

动态方法

在下面的deep(data,key)函数中，您可以使用任意key字符串 - 在您的情况下items[1].name（您可以在任何级别使用数组符号[i]） - 如果键无效，则返回未定义。

显示代码片段

let deep = (o,k) => k.split('.').reduce((a,c,i) => {
    let m=c.match(/(.*?)[(d*)]/);
    if(m && a!=null && a[m[1]]!=null) return a[m[1]][+m[2]];
    return a==null ? a: a[c];
},o);

// TEST

let key = 'items[1].name' // arbitrary deep-key

let data = {
    code: 42,
    items: [{ id: 11, name: 'foo'}, { id: 22, name: 'bar'},]
};

console.log( key,'=', deep(data,key) );

Run code snippetHide resultsExpand snippet

解决方案 22：

jQuery 的 grep函数可让你过滤数组：

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

$.grep(data.items, function(item) {
    if (item.id === 2) {
        console.log(item.id); //console id of item
        console.log(item.name); //console name of item
        console.log(item); //console item object
        return item; //returns item object
    }

});
// Object {id: 2, name: "bar"}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

运行代码片段Hide results展开片段

解决方案 23：

您可以使用语法jsonObject.key来访问值。如果您想从数组中访问值，则可以使用语法jsonObjectArray[index].key。

以下是访问各种值的代码示例，以便让您了解。

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

// if you want 'bar'
console.log(data.items[1].name);

// if you want array of item names
console.log(data.items.map(x => x.name));

// get the id of the item where name = 'bar'
console.log(data.items.filter(x => (x.name == "bar") ? x.id : null)[0].id);

运行代码片段Hide results展开片段

解决方案 24：

这就是我所做的事情。

 let groups = [
        {
            id:1,
            title:"Group 1",
            members:[
                {
                    id:1,
                    name:"Aftab",
                    battry:'10%'
                },
                {
                    id:2,
                    name:"Jamal",
                },
                {
                    id:3,
                    name:"Hamid",
                },
                {
                    id:4,
                    name:"Aqeel",
                },
            ]
        },
        {
            id:2,
            title:"Group 2",
            members:[
                {
                    id:1,
                    name:"Aftab",
                    battry:'10%'
                },
                {
                    id:2,
                    name:"Jamal",
                    battry:'10%'
                },
                {
                    id:3,
                    name:"Hamid",
                },
               
            ]
        },
        {
            id:3,
            title:"Group 3",
            members:[
                {
                    id:1,
                    name:"Aftab",
                    battry:'10%'
                },
                
                {
                    id:3,
                    name:"Hamid",
                },
                {
                    id:4,
                    name:"Aqeel",
                },
            ]
        }
    ]
    
    groups.map((item) => {
      //  if(item.id == 2){
        item.members.map((element) => {
             if(element.id == 1){
                 element.battry="20%"
             }
         })
        //}
    })
    
    groups.forEach((item) => {
        item.members.forEach((item) => {
            console.log(item)
    })
    })

解决方案 25：

如果您尝试在 JSON 字符串中查找路径，则可以将数据转储到工具中以确定路径。

当您将鼠标悬停在嵌套的 JS 对象结构中的属性路径上时，Chrome 开发者控制台会显示该路径，如果需要，可以使用 JSON 进行解析JSON.parse(json)：

您也可以将路径复制到剪贴板：

一旦剪贴板上有了路径，您通常需要通过像[0]循环一样替换偏移索引器来迭代数组。然后，您可以[i]在其位置使用循环索引，或使用forEach样式函数替换整个属性和索引。

另一个工具是https://jsonpathfinder.com，您可以在其中单击 GUI 元素。它将像 Chrome 一样为元素的路径生成 JS 语法。

我编写了一个简单的工具，您可以在此处或https://ggorlen.github.io/json-dive/运行。将您的 JSON 字符串粘贴到文本区域中，然后单击节点将其路径复制到剪贴板。它有一个选项，可以使用括号而不是点来生成 Python/PHP 样式的索引。

/* code minified to make the tool easier to run without having to scroll */                                                         let bracketsOnly=!1,lastHighlighted={style:{}};const keyToStr=t=>!bracketsOnly&&/^[a-zA-Z_$][a-zA-Z$_d]*$/.test(t)?`.${toHTML(t)}`:`["${toHTML(t)}"]`,pathToData=t=>`data-path="data${t.join("")}"`,htmlSpecialChars={"&":"&","<":"<",">":">",'"':""","'":"'","    ":"\\t","
":"\\r","
":"\\n"," ":" "},toHTML=t=>(""+t).replace(/[&<>"'    
 ]/g,t=>htmlSpecialChars[t]),makeArray=(t,e)=>`
  [<ul ${pathToData(e)}>
    ${t.map((t,a)=>{e.push(`[${a}]`);const n=`<li ${pathToData(e)}>
        ${pathify(t,e).trim()},
      </li>`;return e.pop(),n}).join("")}
  </ul>]
`,makeObj=(t,e)=>`
  {<ul ${pathToData(e)}>
    ${Object.entries(t).map(([t,a])=>{e.push(keyToStr(t));const n=`<li ${pathToData(e)}>
        "${toHTML(t)}": ${pathify(a,e).trim()},
      </li>`;return e.pop(),n}).join("")}
  </ul>}
`,pathify=(t,e=[])=>Array.isArray(t)?makeArray(t,e):"object"==typeof t&&t!=null?makeObj(t,e):toHTML("string"==typeof t?`"${t}"`:t),defaultJSON='{
  "corge": "test JSON... \\n   asdf\\t asdf",
  "foo-bar": [
    {"id": 42},
    [42, {"foo": {"baz": {"ba  r<>!\\t": true, "4quux": "garply"}}}]
  ]
}',$=document.querySelector.bind(document),$$=document.querySelectorAll.bind(document),resultEl=$("#result"),pathEl=$("#path"),tryToJSON=t=>{try{resultEl.innerHTML=pathify(JSON.parse(t)),$("#error").innerText=""}catch(t){resultEl.innerHTML="",$("#error").innerText=t}},copyToClipboard=t=>{const e=document.createElement("textarea");e.textContent=t,document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e)},flashAlert=(t,e=2e3)=>{const a=document.createElement("div");a.textContent=t,a.classList.add("alert"),document.body.appendChild(a),setTimeout(()=>a.remove(),e)},handleClick=t=>{t.stopPropagation(),copyToClipboard(t.target.dataset.path),flashAlert("copied!"),$("#path-out").textContent=t.target.dataset.path},handleMouseOut=t=>{lastHighlighted.style.background="transparent",pathEl.style.display="none"},handleMouseOver=t=>{pathEl.textContent=t.target.dataset.path,pathEl.style.left=`${t.pageX+30}px`,pathEl.style.top=`${t.pageY}px`,pathEl.style.display="block",lastHighlighted.style.background="transparent",(lastHighlighted=t.target.closest("li")).style.background="#0ff"},handleNewJSON=t=>{tryToJSON(t.target.value),[...$$("#result *")].forEach(t=>{t.addEventListener("click",handleClick),t.addEventListener("mouseout",handleMouseOut),t.addEventListener("mouseover",handleMouseOver)})};$("textarea").addEventListener("change",handleNewJSON),$("textarea").addEventListener("keyup",handleNewJSON),$("textarea").value=defaultJSON,$("#brackets").addEventListener("change",t=>{bracketsOnly=!bracketsOnly,handleNewJSON({target:{value:$("textarea").value}})}),handleNewJSON({target:{value:defaultJSON}});

/**/                                                                                       *{box-sizing:border-box;font-family:monospace;margin:0;padding:0}html{height:100%}#path-out{background-color:#0f0;padding:.3em}body{margin:0;height:100%;position:relative;background:#f8f8f8}textarea{width:100%;height:110px;resize:vertical}#opts{background:#e8e8e8;padding:.3em}#opts label{padding:.3em}#path{background:#000;transition:all 50ms;color:#fff;padding:.2em;position:absolute;display:none}#error{margin:.5em;color:red}#result ul{list-style:none}#result li{cursor:pointer;border-left:1em solid transparent}#result li:hover{border-color:#ff0}.alert{background:#f0f;padding:.2em;position:fixed;bottom:10px;right:10px}

<!-- -->                                                                                                    <div class="wrapper"><textarea></textarea><div id="opts"><label>brackets only: <input id="brackets"type="checkbox"></label></div><div id="path-out">click a node to copy path to clipboard</div><div id="path"></div><div id="result"></div><div id="error"></div></div>

运行代码片段Hide results展开片段

未压缩版本（也可在GitHub上获取）：

显示代码片段

let bracketsOnly = false;
let lastHighlighted = {style: {}};

const keyToStr = k =>
  !bracketsOnly && /^[a-zA-Z_$][a-zA-Z$_d]*$/.test(k) 
    ? `.${toHTML(k)}`
    : `["${toHTML(k)}"]`
;
const pathToData = p => `data-path="data${p.join("")}"`;

const htmlSpecialChars = {
  "&": "&",
  "<": "<",
  ">": ">",
  '"': """,
  "'": "'",
  "    ": "\\t",
  "
": "\\r",
  "
": "\\n",
  " ": " ",
};
const toHTML = x => ("" + x)
  .replace(/[&<>"'    
 ]/g, m => htmlSpecialChars[m])
;

const makeArray = (x, path) => `
  [<ul ${pathToData(path)}>
    ${x.map((e, i) => {
      path.push(`[${i}]`);
      const html = `<li ${pathToData(path)}>
        ${pathify(e, path).trim()},
      </li>`;
      path.pop();
      return html;
    }).join("")}
  </ul>]
`;
const makeObj = (x, path) => `
  {<ul ${pathToData(path)}>
    ${Object.entries(x).map(([k, v]) => {
      path.push(keyToStr(k));
      const html = `<li ${pathToData(path)}>
        "${toHTML(k)}": ${pathify(v, path).trim()},
      </li>`;
      path.pop();
      return html;
    }).join("")}
  </ul>}
`;

const pathify = (x, path=[]) => {
  if (Array.isArray(x)) {
    return makeArray(x, path);
  }
  else if (typeof x === "object" && x !== null) {
    return makeObj(x, path);
  }
  
  return toHTML(typeof x === "string" ? `"${x}"` : x);
};

const defaultJSON = `{
  "corge": "test JSON... \\n   asdf\\t asdf",
  "foo-bar": [
    {"id": 42},
    [42, {"foo": {"baz": {"ba  r<>!\\t": true, "4quux": "garply"}}}]
  ]
}`;

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
const resultEl = $("#result");
const pathEl = $("#path");

const tryToJSON = v => {
  try {
    resultEl.innerHTML = pathify(JSON.parse(v));
    $("#error").innerText = "";
  }
  catch (err) {
    resultEl.innerHTML = "";
    $("#error").innerText = err;
  }
};

const copyToClipboard = text => {
  const ta = document.createElement("textarea");
  ta.textContent = text;
  document.body.appendChild(ta);
  ta.select();
  document.execCommand("copy");
  document.body.removeChild(ta);
};

const flashAlert = (text, timeoutMS=2000) => {
  const alert = document.createElement("div");
  alert.textContent = text;
  alert.classList.add("alert");
  document.body.appendChild(alert);
  setTimeout(() => alert.remove(), timeoutMS);
};

const handleClick = e => {
  e.stopPropagation();
  copyToClipboard(e.target.dataset.path);
  flashAlert("copied!");
  $("#path-out").textContent = e.target.dataset.path;
};

const handleMouseOut = e => {
  lastHighlighted.style.background = "transparent";
  pathEl.style.display = "none";
};

const handleMouseOver = e => {
  pathEl.textContent = e.target.dataset.path;
  pathEl.style.left = `${e.pageX + 30}px`;
  pathEl.style.top = `${e.pageY}px`;
  pathEl.style.display = "block";
  lastHighlighted.style.background = "transparent";
  lastHighlighted = e.target.closest("li");
  lastHighlighted.style.background = "#0ff";
};

const handleNewJSON = e => {
  tryToJSON(e.target.value);
  [...$$("#result *")].forEach(e => {
    e.addEventListener("click", handleClick);
    e.addEventListener("mouseout", handleMouseOut);
    e.addEventListener("mouseover", handleMouseOver);
  });
};
$("textarea").addEventListener("change", handleNewJSON);
$("textarea").addEventListener("keyup", handleNewJSON);
$("textarea").value = defaultJSON;
$("#brackets").addEventListener("change", e => {
  bracketsOnly = !bracketsOnly;
  handleNewJSON({target: {value: $("textarea").value}});
});
handleNewJSON({target: {value: defaultJSON}});

* {
  box-sizing: border-box;
  font-family: monospace;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

#path-out {
  background-color: #0f0;
  padding: 0.3em;
}

body {
  margin: 0;
  height: 100%;
  position: relative;
  background: #f8f8f8;
}

textarea {
  width: 100%;
  height: 110px;
  resize: vertical;
}

#opts {
  background: #e8e8e8;
  padding: 0.3em;
}
#opts label {
  padding: 0.3em;
}

#path {
  background: black;
  transition: all 0.05s;
  color: white;
  padding: 0.2em;
  position: absolute;
  display: none;
}

#error {
  margin: 0.5em;
  color: red;
}

#result ul {
  list-style: none;
}

#result li {
  cursor: pointer;
  border-left: 1em solid transparent;
}
#result li:hover {
  border-color: #ff0;
}

.alert {
  background: #f0f;
  padding: 0.2em;
  position: fixed;
  bottom: 10px;
  right: 10px;
}

<div class="wrapper">
  <textarea></textarea>
  <div id="opts">
    <label>
      brackets only: <input id="brackets" type="checkbox">
    </label>
  </div>
  <div id="path-out">click a node to copy path to clipboard</div>
  <div id="path"></div>
  <div id="result"></div>
  <div id="error"></div>
</div>

Run code snippetHide resultsExpand snippet

这并不能代替学习如何钓鱼，但一旦你学会了，就可以节省时间。

解决方案 26：

// const path = 'info.value[0].item'
// const obj = { info: { value: [ { item: 'it works!' } ], randominfo: 3 }  }
// getValue(path, obj)

export const getValue = ( path , obj) => {
  const newPath = path.replace(/]/g, "")
  const arrayPath = newPath.split(/[[.]+/) || newPath;

  const final = arrayPath.reduce( (obj, k) => obj ?  obj[k] : obj, obj)
  return final;
}

解决方案 27：

以下是使用object-scan的答案。

当访问单个条目时，此答案实际上并没有比 vanilla javascript 提供太多好处。但是，同时与多个字段交互时，此答案的性能会更高。

以下是如何与单个字段进行交互的方法

// const objectScan = require('object-scan');

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

const get = (haystack, needle) => objectScan([needle], {
  abort: true,
  rtn: 'value'
})(haystack);

const set = (haystack, needle, value) => objectScan([needle], {
  abort: true,
  rtn: 'bool',
  filterFn: ({ parent, property }) => {
    parent[property] = value;
    return true;
  }
})(haystack);

console.log(get(data, 'items[1].name'));
// => bar

console.log(set(data, 'items[1].name', 'foo2'));
// => true
console.log(data);
// => { code: 42, items: [ { id: 1, name: 'foo' }, { id: 2, name: 'foo2' } ] }

.as-console-wrapper {max-height: 100% !important; top: 0}

<script src="https://bundle.run/object-scan@13.8.0"></script>

运行代码片段Hide results展开片段

免责声明：我是object-scan的作者

以下是如何同时与多个字段进行交互的方法

// const objectScan = require('object-scan');

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

const get = (haystack, ...needles) => objectScan(needles, {
  joined: true,
  rtn: 'entry'
})(haystack);

const set = (haystack, actions) => objectScan(Object.keys(actions), {
  rtn: 'count',
  filterFn: ({ matchedBy, parent, property }) => {
    matchedBy.forEach((m) => {
      parent[property] = actions[m];
    })
    return true;
  }
})(haystack);

console.log(get(data, 'items[0].name', 'items[1].name'));
// => [ [ 'items[1].name', 'bar' ], [ 'items[0].name', 'foo' ] ]

console.log(set(data, {
  'items[0].name': 'foo1',
  'items[1].name': 'foo2'
}));
// => 2
console.log(data);
// => { code: 42, items: [ { id: 1, name: 'foo1' }, { id: 2, name: 'foo2' } ] }

.as-console-wrapper {max-height: 100% !important; top: 0}

<script src="https://bundle.run/object-scan@13.8.0"></script>

运行代码片段Hide results展开片段

免责声明：我是object-scan的作者

以下是如何通过 id 搜索在深度嵌套的对象中找到实体的方法（如评论中所问）

// const objectScan = require('object-scan');

const myData = { code: 42, items: [{ id: 1, name: 'aaa', items: [{ id: 3, name: 'ccc' }, { id: 4, name: 'ddd' }] }, { id: 2, name: 'bbb', items: [{ id: 5, name: 'eee' }, { id: 6, name: 'fff' }] }] };

const findItemById = (haystack, id) => objectScan(['**(^items$).id'], {
  abort: true,
  useArraySelector: false,
  rtn: 'parent',
  filterFn: ({ value }) => value === id
})(haystack);

console.log(findItemById(myData, 5));
// => { id: 5, name: 'eee' }

.as-console-wrapper {max-height: 100% !important; top: 0}

<script src="https://bundle.run/object-scan@13.8.0"></script>

运行代码片段Hide results展开片段

免责声明：我是object-scan的作者

解决方案 28：

您需要做的事情非常简单，可以通过递归来实现：

const json_object = {
        "item1":{
            "name": "apple",
            "value": 2,
        },
        "item2":{
            "name": "pear",
            "value": 4,
        },
        "item3":{
            "name": "mango",
            "value": 3,
            "prices": {
                "1": "9$",
                "2": "59$",
                "3": "1$"
            }
        }
    }
    
    function walkJson(json_object){
        for(obj in json_object){
            if(typeof json_object[obj] === 'string'){
                console.log(`${obj}=>${json_object[obj]}`);
            }else{
                console.log(`${obj}=>${json_object[obj]}`);
                walkJson(json_object[obj]);
            }
        }           
    }
    
    walkJson(json_object);

解决方案 29：

一种 Python 式、递归式和函数式的方法来解开任意 JSON 树：

handlers = {
    list:  iterate,
    dict:  delve,
    str:   emit_li,
    float: emit_li,
}

def emit_li(stuff, strong=False):
    emission = '<li><strong>%s</strong></li>' if strong else '<li>%s</li>'
    print(emission % stuff)

def iterate(a_list):
    print('<ul>')
    map(unravel, a_list)
    print('</ul>')

def delve(a_dict):
    print('<ul>')
    for key, value in a_dict.items():
        emit_li(key, strong=True)
        unravel(value)
    print('</ul>')

def unravel(structure):
    h = handlers[type(structure)]
    return h(structure)

unravel(data)

其中数据是一个 Python 列表（从 JSON 文本字符串解析而来）：

data = [
    {'data': {'customKey1': 'customValue1',
           'customKey2': {'customSubKey1': {'customSubSubKey1': 'keyvalue'}}},
  'geometry': {'location': {'lat': 37.3860517, 'lng': -122.0838511},
               'viewport': {'northeast': {'lat': 37.4508789,
                                          'lng': -122.0446721},
                            'southwest': {'lat': 37.3567599,
                                          'lng': -122.1178619}}},
  'name': 'Mountain View',
  'scope': 'GOOGLE',
  'types': ['locality', 'political']}
]

解决方案 30：

像 JavaScript 一样在 Python 中访问嵌套对象和数组

• 以下是来自https://pypi.org/project/jsobject/OLD_JSObject的类片段

• 此软件包在 3.4 版后不再有效

• 但是这个包需要一些额外的修改才能适合我

• Object允许访问嵌套对象值和打印对象的函数

class OLD_JSObject(dict):
    def __getattr__(self, k):
        try:
            return self[k]
        except:
            return self.__getitem__(k)

    def __setattr__(self, k, v):
        if type(v) == dict:
            self[k] = self.__class__(v)
        else:
            self[k] = v

    def merge(self, mapping):
        for key in mapping:
            if key not in self:
                self[key] = mapping[key]
                continue

            if isinstance(self[key], dict) and isinstance(mapping[key], dict):
                self[key].merge(mapping[key])
            elif isinstance(self[key], list) and isinstance(mapping[key], list):
                self[key].extend(mapping[key])
            elif self[key] == mapping[key]:
                pass
            else:
                self[key] = mapping[key]
                # raise Exception('Conflict')


def Object(data):
    if isinstance(data, dict):
        attrs = {}
        for key, value in data.items():
            attrs[key] = Object(value)
        return OLD_JSObject(attrs)
    else:
        return data