如何访问和处理嵌套对象、数组或 JSON？
我有一个包含对象和数组的嵌套数据结构。如何提取信息，即访问特定或多个值（或键）？
例如：
var data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
如何访问 items 中第二项的 name？
预赛
JavaScript 只有一种数据类型可以包含多个值：对象。数组是一种特殊形式的对象。
（普通）对象具有形式
{key: value, key: value, ...}
数组有形式
[value, value, ...]
数组和对象都公开了 key -> value 结构。数组中的键必须是数字，而任何字符串都可以用作对象中的键。键值对也称为“属性”。
可以使用点符号访问属性
const value = obj.someProperty;
或括号表示法，如果属性名称不是有效的 JavaScript identifier name [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 数据类型，即数组和对象（以及如何使用这些数据，刚刚解释过）。问题 Parse JSON in JavaScript? 中解释了如何解析 JSON。
进一步阅读材料
如何访问数组和对象是基本的 JavaScript 知识，因此建议阅读 MDN JavaScript Guide，尤其是章节
使用对象
数组
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 时，对象/数组根本没有具有该名称的属性。
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 的所有属性，我们可以像这样遍历 object：
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 array 的所有元素，我们使用 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 来迭代数组，但有一些原因应该避免这种情况：Why is 'for(var item in list)' with arrays considered bad practice in JavaScript?。
随着 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] 循环，它不仅适用于数组，还适用于任何 iterable：
for (const item of data.items) {
// `item` is the array element, **not** the index
}
在每次迭代中，for...of 直接为我们提供了可迭代的下一个元素，没有“索引”可供访问或使用。
如果我不知道数据结构的“深度”怎么办？
除了未知键之外，数据结构的“深度”（即有多少嵌套对象）也可能是未知的。如何访问深度嵌套的属性通常取决于确切的数据结构。
但是，如果数据结构包含重复模式，例如二叉树的表示，则解决方案通常包括 recursively [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 } } };函数 getLeaf(node) { if (node.leftChild) { return getLeaf(node.leftChild); } else if (node.rightChild) { return getLeaf(node.rightChild); } else { // 节点必须是叶子节点 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' }] };函数 toArray(obj) { const 结果 = []; for (const prop in obj) { const value = obj[prop]; if (typeof value === 'object') { result.push(toArray(value)); } else { result.push(value); } } 返回结果； } 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"]
两种方式都是平等的。
对象和数组有很多内置方法可以帮助您处理数据。
注意：在许多示例中，我使用的是 arrow functions。它们类似于 function expressions，但它们在词法上绑定 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 loop 和 destructuring assignment 迭代 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()
如果指定的回调函数为数组的每个 元素返回 true，则 every() 方法返回 true。如果指定的回调函数为 some（至少一个）元素返回 true，则 some() 方法返回 true。
const arr = [1, 2, 3] // true，因为每个元素都大于 0 console.log(arr.every(x => x > 0)) // false，因为 3^2 大于 5 console.log(arr.every(x => x > 0)) // false，因为 3^2 大于 5 .log(arr.every(x => Math.pow(x, 2) < 5)) // true，因为 2 是偶数（除以 2 的余数是 0） console.log(arr.some(x = > x % 2 === 0)) // false，因为没有一个元素等于 5 console.log(arr.some(x => x === 5))
Array.prototype.find() 和 Array.prototype.filter()
find() 方法返回满足所提供回调函数的 第一个 元素。 filter() 方法返回满足提供的回调函数的 all 元素数组。
const arr = [1, 2, 3] // 2，因为 2^2 !== 2 console.log(arr.find(x => x !== Math.pow(x, 2))) // 1 , 因为它是第一个元素 console.log(arr.find(x => true)) // 未定义，因为没有一个元素等于 7 console.log(arr.find(x => x === 7)) / / [2, 3]，因为这些元素大于 1 console.log(arr.filter(x => x > 1)) // [1, 2, 3]，因为函数对所有元素都返回 true log(arr.filter(x => true)) // []，因为没有一个元素既不等于 6 也不等于 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) 控制台.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] // 数组元素的总和。 console.log(arr.reduce((a, b) => a + b)) // 6 // 数组中的最大数。 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
Object.keys(data["items"]).forEach(function(key) { console.log(data["items"][key].id); console.log(data["items"][key].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美分。
有时，可能需要使用字符串访问嵌套对象。简单的方法是第一级，例如
var obj = { hello: "world" };
var key = "hello";
alert(obj[key]);//world
但是对于复杂的 json，情况往往不是这样。随着 json 变得越来越复杂，在 json 中查找值的方法也变得复杂。用于导航 json 的递归方法是最好的，并且如何利用该递归将取决于正在搜索的数据类型。如果涉及条件语句，json search 可能是一个很好的工具。
如果正在访问的属性是已知的，但路径很复杂，例如在这个对象中
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。
要访问嵌套属性，您需要指定其名称，然后搜索对象。
如果您已经知道确切的路径，那么您可以在脚本中对其进行硬编码，如下所示：
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。
很简单的解释：
var data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] }; /* 1. `data` 是包含 `items` 对象的对象*/ console.log(data); /* 2. `items` 对象包含两个对象的数组作为元素*/ console.log(data.items); /* 3. 你需要数组的第二个元素 - 来自 `[0, 1]` 的 `1`*/ console.log(data.items[1]); /* 4. 你需要数组的第二个对象元素的 `name` 属性的值）*/ console.log(data.items[1].name);
这里提到了 4 种不同的方法来获取 javascript 对象属性：
var data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] }; // 方法一 let method1 = data.items[1].name;控制台.log(method1); // 方法2 let method2 = data.items[1]["name"];控制台.log（方法2）； // 方法 3 let method3 = data["items"][1]["name"];控制台.log(method3); // 方法四解构 let { items: [, { name: second_name }] } = data; console.log(second_name);
这个问题很老了，所以作为一个当代更新。随着 ES2015 的出现，有一些替代方法可以获取您需要的数据。现在有一个称为对象解构的功能，用于访问嵌套对象。
const data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] };常量 { 项目：[，{ 名称：secondName }] } = 数据；控制台.log(secondName);
上面的示例从名为 items 的数组中的 name 键创建一个名为 secondName 的变量，孤独的 , 表示跳过数组中的第一个对象。
值得注意的是，对于这个例子来说这可能有点过头了，因为简单的数组访问更容易阅读，但它在分解一般对象时很有用。
这是对您的特定用例的非常简短的介绍，解构可能是一种不寻常的语法，首先要习惯。我建议阅读 Mozilla's Destructuring Assignment documentation 以了解更多信息。
您可以使用 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"] 表示法。否则，一个点就足够了；
除此之外，访问嵌套数组会像这样发生：
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://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics#Bracket_notation
以防万一，有人在 2017 年或之后访问此问题并寻找一种易于记忆的方法，这里有一篇关于 Accessing Nested Objects in JavaScript 的详细博文，不会被迷惑
无法读取未定义错误的属性“foo”
1. Oliver Steele 的嵌套对象访问模式
最简单和最干净的方法是使用 Oliver Steele 的嵌套对象访问模式
const name = ((user || {}).personalInfo || {}).name;
使用此符号，您将永远不会遇到
无法读取未定义的属性“名称”。
您基本上检查用户是否存在，如果不存在，则动态创建一个空对象。这样，下一级键将始终从存在的对象或空对象访问，但永远不会从未定义的对象访问。
2. 使用 Array Reduce 访问嵌套对象
为了能够访问嵌套数组，您可以编写自己的数组 reduce util。
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.
还有一个出色的类型处理最小库 typy 可以为您完成所有这些工作。
((user || {}).address || new Array(3))[1].name
1 不存在，...[1].bar 会导致错误。但如果 foo 不存在，....foo.bar 也是如此。您还必须“保护”访问 1，就像您“保护”任何其他属性访问一样。数组只是一个对象。 “数组元素”只是一个属性。正确应用它将是 (((user || {}).address || {})[1] || {}).name。
动态访问多级对象。
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/
如果您愿意包含一个库，那么使用 JSONPath 将是最灵活的解决方案之一：https://github.com/s3u/JSONPath（节点和浏览器）
对于您的用例，json 路径将是：
$..items[1].name
所以：
var secondName = jsonPath.eval(data, "$..items[1].name");
我更喜欢 JQuery。它更干净且易于阅读。
$.each($.parseJSON(data), function (key, value) {
alert(value.<propertyname>);
});
如果您正在寻找一个或多个满足特定条件的对象，您有几个使用 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:""});
还有一个 single 和 singleOrDefault，它们的工作方式分别类似于 first 和 firstOrDefault。唯一的区别是如果找到更多个匹配项，它们将抛出。
有关 query-js 的进一步说明，您可以从 post 开始
下划线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);
}
老问题，但没有人提到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，而且很方便！
我希望它对正在寻找操作标题所暗示的真正复杂数据的选项的人有用。
我不认为提问者只关注一级嵌套对象，所以我提供以下演示来演示如何访问深度嵌套的 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)); } });
在 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
动态方法
在下面的 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' // 任意深度键 let data = { code: 42, items: [{ id: 11, name: 'foo'}, { id: 22, name: '酒吧'}，] }; console.log(key,'=', deep(data,key));
jQuery's 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); // 项目的控制台 id console.log(item.name); //项目的控制台名称 console.log(item); //控制台项目对象 return item; //返回项目对象 } }); // 对象 {id: 2, name: "bar"}
您可以使用语法 jsonObject.key 访问该值。如果要访问数组中的值，则可以使用语法 jsonObjectArray[index].key。
以下是访问各种值的代码示例，为您提供思路。
var data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] }; // 如果你想要'bar' console.log(data.items[1].name); // 如果你想要项目名称数组 console.log(data.items.map(x => x.name)); // 获取项目的 ID 其中 name = 'bar' console.log(data.items.filter(x => (x.name == "bar") ? x.id : null)[0].id) ;
// 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;
}
这是使用 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 ; } })(干草堆); 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% ！重要的;顶部：0}
免责声明：我是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: ({ matchBy, parent, property }) => {matchedBy.forEach((m) => {父[属性] = 动作[m]; }) 返回 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].名称': '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% ！重要的;顶部：0}
免责声明：我是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;顶部：0}
免责声明：我是object-scan的作者
我就是这样做的。
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)
})
})
如果您尝试在 JSON 字符串中查找路径，可以将数据转储到 https://jsonpathfinder.com 并单击 GUI 元素。它将为元素的路径生成 JS 语法。
除此之外，对于您可能想要迭代的任何数组，请将相关的数组偏移索引（如 [0]）替换为循环。
这是您可以在此处或在 https://ggorlen.github.io/json-dive/ 运行的工具的更简单版本。单击要将路径复制到剪贴板的节点。
/* 代码缩小，使工具更容易运行而无需滚动 */ 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":"\\t","\r":"\\r","\n":" \\n","":" "},toHTML=t=>(""+t).replace(/[&<>"'\t\r\n ]/g,t=>htmlSpecialChars[ t]),makeArray=(t,e)=>`\n [
- \n ${t.map((t,a)=>{e.push(`[$ {a}]`);const n=`
- \n ${pathify(t,e).trim()},\n `;return e.pop( ),n}).join("")}\n
- \n ${ Object.entries(t).map(([t,a])=>{e.push(keyToStr(t));const n=`
- \n "${toHTML( t)}": ${pathify(a,e).trim()},\n `;return e.pop(),n}).join("")}\n
未缩小（也可在 GitHub 上找到）：
让方括号=假；让 lastHighlighted = {style: {}}; const keyToStr = k => !bracketsOnly && /^[a-zA-Z_$][a-zA-Z$_\d]*$/.test(k) ？ `.${toHTML(k)}` : `["${toHTML(k)}"]` ;常量 pathToData = p => `data-path="data${p.join("")}"`; const htmlSpecialChars = { "&": "&", "<": "<", ">": ">", '"': """, "'": "'" , "\t": "\\t", "\r": "\\r", "\n": "\\n", " ": " ", }; const toHTML = x => ("" + x) .replace(/[&<>"'\t\r\n ]/g, m => htmlSpecialChars[m]) ; const makeArray = (x, path) => ` [
- ${x.map((e, i) => { path.push(`[${i}]`); const html = `
- ${pathify(e, path).trim()}, `; path.pop(); return html; }).join("" )}
- ${Object.entries(x).map(([k, v]) => { path.push(keyToStr(k )); const html = `
- "${toHTML(k)}": ${pathify(v, path).trim()}, `; path.pop (); 返回 html; }).join("")}
这不是为了替代 learning how to fish，但一旦您知道，它可以节省时间。
您需要做的非常简单，可以通过递归来实现：
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);
一种解开任意 JSON 树的 Pythonic、递归和函数式方法：
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)
其中 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']}
]
我的 stringdata 来自 PHP 文件，但我仍然在 var 中指出。当我直接将我的 json 带入 obj 时，它不会显示这就是为什么我将我的 json 文件作为
var obj=JSON.parse(stringdata); 所以在那之后我得到 message obj 并显示在警告框中然后我得到 data 这是 json 数组并存储在一个变量中 ArrObj 然后我读取该数组的第一个对象，其键值如下 {5 }
var stringdata={
"success": true,
"message": "working",
"data": [{
"id": 1,
"name": "foo"
}]
};
var obj=JSON.parse(stringdata);
var key = "message";
alert(obj[key]);
var keyobj = "data";
var ArrObj =obj[keyobj];
alert(ArrObj[0].id);
stringjson 不是字符串。
关注公众号
不定期副业成功案例分享
