如何访问和处理嵌套对象、数组或 JSON？
Posted
技术标签:
【中文标题】如何访问和处理嵌套对象、数组或 JSON？【英文标题】：How can I access and process nested objects, arrays or JSON? 【发布时间】：2021-02-17 11:40:24 【问题描述】：我有一个包含对象和数组的嵌套数据结构。如何提取信息，即访问特定或多个值（或键）？
例如：
var data =
code: 42,
items: [
id: 1,
name: 'foo'
,
id: 2,
name: 'bar'
]
;
如何访问items 中第二项的name？
【问题讨论】：
@Marcel：它必须读作“我有一个数据嵌套数据结构或 JSON，我如何访问特定值？”。 我知道其中的区别，但很多人不知道并且可能正在搜索“JSON”而不是“object”。许多问题实际上是“我如何在这个 JSON 中访问 X”的形式。我在回答中提到 JSON 的唯一地方是我解释它是什么的地方。如果您对如何以更好的方式传达这一点有任何建议，我会全力以赴。 JSON find in javascript的可能重复 这里的这个答案帮助我很好地解决了访问嵌套对象的问题和香草：***.com/questions/6491463/… 允许编写例如：someObject.access("firstPart[2].someOtherPart.我的身份证") 【参考方案1】：预赛
JavaScript 只有一种可以包含多个值的数据类型：Object。 数组是一种特殊形式的对象。
（普通）对象具有以下形式
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，尤其是章节
Working with Objects Arrays Eloquent JavaScript - Data Structures访问嵌套数据结构
嵌套数据结构是引用其他数组或对象的数组或对象，即它的值是数组或对象。可以通过连续应用点或括号符号来访问此类结构。
这是一个例子：
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...in 和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 来迭代数组，但有一些原因应该避免这种情况：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
;
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__。后者是用于对象原型链的内部属性。不过，原型链和继承超出了此答案的范围。
【讨论】：
【参考方案2】：你可以这样访问它
data.items[1].name
或
data["items"][1]["name"]
两种方式都是平等的。
【讨论】：
【参考方案3】：如果您尝试通过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 美分。
【讨论】：
【参考方案4】：如果您愿意包含一个库，则使用 JSONPath 将是最灵活的解决方案之一： https://github.com/s3u/JSONPath（节点和浏览器）
对于您的用例，json 路径将是：
$..items[1].name
所以：
var secondName = jsonPath.eval(data, "$..items[1].name");
【讨论】：
使用 eval() 不是好的解决方案。而是可以使用第一类函数。【参考方案5】：有时，可能需要使用字符串访问嵌套对象。简单的做法是第一级，例如
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。
【讨论】：
【参考方案6】：如果您正在寻找一个或多个满足特定条件的对象，您可以使用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 开始
【讨论】：
我很想知道如何改进。想发表评论吗？【参考方案7】：我更喜欢 JQuery。它更简洁易读。
$.each($.parseJSON(data), function (key, value)
alert(value.<propertyname>);
);
【讨论】：
【参考方案8】：这个问题已经很老了，所以作为一个当代更新。随着 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 的变量，孤独的, 表示跳过数组中的第一个对象。
值得注意的是，对于这个例子来说，它可能有点过头了，因为简单的数组访问更容易阅读，但它在分解一般对象时很有用。
这是对您的特定用例的非常简短的介绍，解构可能是一种不寻常的语法，刚开始要习惯。我建议阅读Mozilla's Destructuring Assignment documentation 以了解更多信息。
【讨论】：
【参考方案9】：下划线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);
【讨论】：
【参考方案10】：对象和数组有很多内置方法可以帮助您处理数据。
注意：在许多示例中，我使用的是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]]
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`)
用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。如果指定的回调函数为一些（至少一个）元素返回true，则some() 方法返回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)) // 3reduce() 方法采用可选的第二个参数，即初始值。当您调用 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); );【参考方案11】：
一种解开任意 JSON 树的 Python 式、递归和函数式方法：
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']
]
【讨论】：
这个问题是关于 JavaScript，而不是 Python。不确定是否有 Python 的等效问题。 Python 请参阅Python Accessing Nested JSON Data。【参考方案12】：我不认为提问者只关注一级嵌套对象，所以我提供以下演示来演示如何访问深度嵌套的 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>【讨论】：
如何使用变量访问嵌套的 json 对象。数据 = a: b:'ss'; var key = a.b data[key] 不工作【参考方案13】：老问题，但没人提到 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，而且很方便！
我希望它对那些正在寻找操作标题所暗示的真正复杂数据的选项的人有用。
【讨论】：
【参考方案14】：你可以使用lodash _get函数：
var object = 'a': [ 'b': 'c': 3 ] ;
_.get(object, 'a[0].b.c');
// => 3
【讨论】：
【参考方案15】：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); //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>【讨论】：
【参考方案16】：使用 lodash 会是很好的解决方案
例如：
var object = 'a': 'b': 'c': 3 ;
_.get(object, 'a.b.c');
// => 3
【讨论】：
这与Access / process (nested) objects, arrays or JSON有何不同？【参考方案17】：动态访问多级对象。
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/
【讨论】：
【参考方案18】：要访问嵌套属性，您需要指定其名称，然后搜索对象。
如果您已经知道确切的路径，那么您可以像这样在脚本中对其进行硬编码：
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。
【讨论】：
【参考方案19】：以防万一，任何人在 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 可以为您完成所有这些工作。
【讨论】：
这个问题主要是关于存在的访问属性。关于您所指的内容已经存在一个问题（并且已经包括您的大部分解决方案）：Access Javascript nested objects safely 或 Accessing nested JavaScript objects with string key。但无论如何：“不幸的是，你不能用这个技巧访问嵌套数组。” 为什么不呢？数组是对象，所以它应该也能正常工作。你能提供一个没有的例子吗？ @FelixKling 当我们尝试使用 Oliver Steele 模式访问数组时，我们将无法动态创建长度为“n”的数组并访问第 n 个索引而不会出现“未定义”错误。前任。((user || ).address || new Array(3))[1].name
您没有始终如一地应用您的模式。当然，如果元素 1 不存在，...[1].bar 会导致错误。但如果foo 不存在，....foo.bar 也是如此。您还必须“保护”访问1，就像您“保护”任何其他财产访问一样。数组只是一个对象。 “数组元素”只是一个属性。正确应用它将是(((user || ).address || )[1] || ).name。
这很棒。我没有这样打动我。谢谢@FelixKling，我会去更新博文。
@DineshPandiyan 你应该透露你是typy的作者，我是看完你的博文才来这里的【参考方案20】：
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
【讨论】：
【参考方案21】：我的 stringdata 来自 php 文件，但我仍然在 var 中指出。当我直接将我的 json 放入 obj 时，它不会显示这就是为什么我将我的 json 文件作为
var obj=JSON.parse(stringdata);
所以在那之后我得到message obj 并显示在警报框中然后我得到data 这是json数组并存储在一个变量ArrObj 然后我读取该数组的第一个对象，其键值如下ArrObj[0].id
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 不是字符串。【参考方案22】：
动态方法
在下面的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) );【讨论】：
【参考方案23】：// 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;
【讨论】：
【参考方案24】：在 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
【讨论】：
【参考方案25】：您可以使用语法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);【讨论】：
【参考方案26】：简单的解释：
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);【讨论】：
只想快速评论这个问题，因为这个问题的作者没有选择最佳答案。这实际上是最好的答案。所以其他人都在寻找这个问题的答案，这是最好的。【参考方案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>免责声明：我是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>免责声明：我是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>免责声明：我是object-scan的作者
【讨论】：
我很确定那是 node.js，他想知道如何在 javascript 中做到这一点。如果他确实想使用 node.js，他会把它放在他的标签中。但这会对我有所帮助，因为我正在尝试在 node.js 中寻找答案。 Nodejs 是 javascript。但是，如果我正确理解您的评论：我认为您可以使用例如 babel 在“浏览器 javascript”中使用任何 npm 包？ node.js 是服务器端，javascript 是客户端。不，你不能在“浏览器 javascript”中使用 npm 包，只有我，我试过了。我主要是为了它的见鬼。但即使是 node.js，你基本上是在说一个漫长而复杂的方式。 @timnavigate 答案实际上可以解决问题。 你绝对可以***.com/q/49562978/1030413 - 我喜欢的包可以做很多事情。因此，根据您的用例，提供它可能会很好。我知道设置它可能有工作 @JonathanJ.Pecany 我已经编辑了示例以使其可运行并展示如何在浏览器中使用它。【参考方案28】：这里提到了 4 种不同的方法来获取 javascript object 属性：
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);【讨论】：
此答案不会添加其他答案之一中尚未包含的任何内容（如已接受的答案） 非常感谢。我是初学者。你的回答对我很有帮助。【参考方案29】：如果您尝试在 JSON 字符串中查找路径，可以将数据转储到 https://jsonpathfinder.com 并单击 GUI 元素。它将为元素的路径生成 JS 语法。
除此之外，对于您可能想要迭代的任何数组，请将相关的数组偏移索引（例如 [0]）替换为循环。
这是您可以在此处运行的工具的更简单版本。单击要复制路径到剪贴板的节点。
/* 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)`:`[&quot;$toHTML(t)&quot;]`,pathToData=t=>`data-path="data$t.join("")"`,htmlSpecialChars="&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;","\t":"\\t","\r":"\\r","\n":"\\n"," ":"&nbsp;",toHTML=t=>(""+t).replace(/[&<>"'\t\r\n ]/g,t=>htmlSpecialChars[t]),makeArray=(t,e)=>`\n [<ul $pathToData(e)>\n $t.map((t,a)=>e.push(`[$a]`);const n=`<li $pathToData(e)>\n $pathify(t,e).trim(),\n </li>`;return e.pop(),n).join("")\n </ul>]\n`,makeObj=(t,e)=>`\n <ul $pathToData(e)>\n $Object.entries(t).map(([t,a])=>e.push(keyToStr(t));const n=`<li $pathToData(e)>\n "$toHTML(t)": $pathify(a,e).trim(),\n </li>`;return e.pop(),n).join("")\n </ul>\n`,pathify=(t,e=[])=>Array.isArray(t)?makeArray(t,e):"object"==typeof t?makeObj(t,e):toHTML("string"==typeof t?`"$t"`:t),defaultJSON='\n "corge": "test JSON... \\n asdf\\t asdf",\n "foo-bar": [\n "id": 42,\n [42, "foo": "baz": "ba r<>!\\t": true, "4quux": "garply"]\n ]\n',$=document.querySelector.bind(document),$$=document.querySelectorAll.bind(document),resultEl=$("#result"),pathEl=$("#path"),tryToJSON=t=>tryresultEl.innerHTML=pathify(JSON.parse(t)),$("#error").innerText=""catch(t)resultEl.innerHTML="",$("#error").innerText=t,copyToClipboard=t=>const e=document.createElement("textarea");e.innerText=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+30px`,pathEl.style.top=`$t.pageYpx`,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:0htmlheight:100%#path-outbackground-color:#0f0;padding:.3embodymargin:0;height:100%;position:relative;background:#f8f8f8textareawidth:100%;height:110px;resize:vertical#optsbackground:#e8e8e8;padding:.3em#opts labelpadding:.3em#pathbackground:#000;transition:all 50ms;color:#fff;padding:.2em;position:absolute;display:none#errormargin:.5em;color:red#result ullist-style:none#result licursor:pointer;border-left:1em solid transparent#result li:hoverborder-color:#ff0.alertbackground:#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>未缩小：
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": "\\t",
"\r": "\\r",
"\n": "\\n",
" ": " ",
;
const toHTML = x => ("" + x)
.replace(/[&<>"'\t\r\n ]/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")
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.innerText = 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 + 30px`;
pathEl.style.top = `$e.pageYpx`;
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>这并不是要替代learning how to fish，但一旦知道就可以节省时间。
【讨论】：
【参考方案30】：我就是这样做的。
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？的主要内容，如果未能解决你的问题，请参考以下文章