如何访问和处理嵌套对象、数组或JSON?

预赛

JavaScript只有一种数据类型可以包含多个值:对象。1是物体的一种特殊形式。

(普通)对象具有窗体

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

数组有这样的形式

[value, value, ...]

数组和对象都公开key -> value结构。数组中的键必须是数字，而任何字符串都可以用作对象中的键。键-值对也称为“属性”。

属性可以使用点符号访问

const value = obj.someProperty;

或者括号，如果属性名不是有效的JavaScript 标识符名称^[spec]，或者名称是变量的值:

// the space is not a valid character in identifier namesconst value = obj["some Property"];
// property name as variableconst name = "some Property";const value = obj[name];

因此，数组元素只能使用括号符号访问:

const value = arr[5]; // arr.5 would be a syntax error
// property name / index as variableconst x = 5;const value = arr[x];

等待……JSON呢?

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

进一步阅读材料

如何访问数组和对象是基本的JavaScript知识，因此它是可取的阅读MDN JavaScript指南，特别是部分

• Working with Objects
• Arrays
• 雄辩的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

使用# 0或# 1检查object / array的结构。您试图访问的属性实际上可能定义在一个嵌套的对象/数组上。

console.log(foo.bar.baz); // 42

如果属性名是动态的，而我事先不知道它们怎么办?

如果属性名未知，或者我们想访问一个对象/数组元素的所有属性，我们可以使用# 0 < em > <一口> [MDN] < /一口> < / em >循环用于对象，使用# 1 < em > <一口> [MDN] < /一口> < / em >循环用于数组来遍历所有属性/元素。

对象

要遍历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}

根据对象的来源(以及您想要做什么)，您可能必须在每次迭代中测试该属性是否真的是对象的属性，还是继承的属性。你可以用第一条做到这一点。

作为for...in和hasOwnProperty的替代，你可以使用# 2 < em > <一口> [MDN] < /一口> < / em >得到属性名数组:

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来遍历数组，但是应该避免这样做的原因有:

随着浏览器对ECMAScript 5的支持越来越多，数组方法# 0 < em > <一口> [MDN] < /一口> < / em >也成为了一个有趣的替代方案:

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)的环境中，你也可以使用< em > # 0 < / em > < em > <一口> [MDN] < /一口> < / em >循环，它不仅适用于数组，也适用于任何< em > iterable < / em >:

for (const item of data.items) {// `item` is the array element, **not** the index}

在每次迭代中，for...of直接给我们可迭代对象的下一个元素，没有“索引”可以访问或使用。

如果我不知道数据结构的“深度”会怎样?

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

但是如果数据结构包含重复的模式，例如二叉树的表示，解决方案通常包括对数据结构的每一层的递归地<强> < /强> < em > <一口>(维基百科)< /一口> < / em >访问。

下面是一个获取二叉树第一个叶节点的例子:

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

助手

由于复杂对象或数组的结构并不明显，我们可以在每一步检查值，以决定如何进一步移动。第二条和第三条有助于我们做到这一点。例如(Chrome控制台的输出):

> console.log(data.items)[ Object, Object ]

这里我们看到data.items是一个有两个元素的数组，两个元素都是对象。在Chrome控制台中，对象甚至可以立即展开和检查。

> console.log(data.items[1])Objectid: 2name: "bar"__proto__: Object

这告诉我们data.items[1]是一个对象，在展开它之后，我们看到它有三个属性，id，name和__proto__。后者是用于对象的原型链的内部属性。但是，原型链和继承不在这个答案的范围之内。

您可以通过这种方式访问它

data.items[1].name

或

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

两边相等。

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

var data = {code: 42,items: [{id: 1,name: 'foo'}, {id: 2,name: 'bar'}]};
_.find(data.items, function(item) {return item.id === 2;});// Object {id: 2, name: "bar"}

根据我的经验，使用高阶函数而不是for或for..in循环会导致代码更容易推理，因此更易于维护。

这只是我的个人意见。

对于你的用例，json路径是:

$..items[1].name

所以:

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

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

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

下面是使用这种方法的第一个例子。

如果您正在寻找一个或多个符合某些标准的对象，您可以使用query-js进行一些选择

//will return all elements with an id larger than 1data.items.where(function(e){return e.id > 1;});//will return the first element with an id larger than 1data.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 founddata.items.first(function(e){return e.id > 1;},{id:-1,name:""});

还有一个single和singleOrDefault，它们分别像first和firstOrDefault一样工作。唯一的区别是，如果找到4个以上的匹配，他们就会抛出。

关于query-js的进一步解释可以从帖子开始

我更喜欢JQuery。它更干净，更容易阅读。

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

这个问题很老了，所以作为当代的更新。随着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的解构赋值文档来了解更多。

下划线js的方式

这是一个JavaScript库，它提供了一大堆有用的functional programming helper，而没有扩展任何内置对象。

解决方案:

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

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

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

# 0、# 1 (ES 2017)和＃2 (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}`)}

用的循环和解构的任务迭代Object.entries()的结果非常方便。

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

析构赋值允许您从数组或对象中提取值并将它们赋给变量。在这种情况下，const [key, value]意味着不是将[key, value]数组分配给element，而是将该数组的第一个元素分配给key，将第二个元素分配给value。它等价于:

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

如您所见，解构使这变得简单得多。

# 0和# 1

如果指定的回调函数为数组的每一个元素返回true，则every()方法返回true。如果指定的回调函数为一些(至少一个)元素返回true，则some()方法返回true。

const arr = [1, 2, 3]
// true, because every element is greater than 0console.log(arr.every(x => x > 0))// false, because 3^2 is greater than 5console.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 5console.log(arr.some(x => x === 5))

# 0和# 1

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

const arr = [1, 2, 3]
// 2, because 2^2 !== 2console.log(arr.find(x => x !== Math.pow(x, 2)))// 1, because it's the first elementconsole.log(arr.find(x => true))// undefined, because none of the elements equals 7console.log(arr.find(x => x === 7))
// [2, 3], because these elements are greater than 1console.log(arr.filter(x => x > 1))// [1, 2, 3], because the function returns true for all elementsconsole.log(arr.filter(x => true))// [], because none of the elements equals neither 6 nor 7console.log(arr.filter(x => x === 6 || x === 7))

Array.prototype.map()

map()方法返回一个数组，其中包含对数组元素调用所提供的回调函数的结果。

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

Array.prototype.reduce()

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

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

reduce()方法接受第二个可选参数，即初始值。当调用reduce()的数组可以有0个或1个元素时，这很有用。例如，如果我们想创建一个函数sum()，它接受一个数组作为参数，并返回所有元素的和，我们可以这样写:

const sum = arr => arr.reduce((a, b) => a + b, 0)
console.log(sum([]))     // 0console.log(sum([4]))    // 4console.log(sum([2, 5])) // 7

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

我不认为提问只关心一个层次的嵌套对象，所以我提出下面的演示来演示如何访问深嵌套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>

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

如果你已经在你的项目中使用lodash，我认为在一个复杂的例子中有一种优雅的方法:

选择1

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

一样:

选择2

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

第一个选项和第二个选项之间的区别是，在选择1中，如果路径中缺少一个属性(未定义)，则不会得到错误，它将返回第三个参数。

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

我希望它能对那些正在寻找操作标题所暗示的真正复杂数据的选项的人有用。

你可以使用lodash _get函数:

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

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 itemconsole.log(item.name); //console name of itemconsole.log(item); //console item objectreturn 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>

# 0

例:

var object = { 'a': { 'b': { 'c': 3 } } };_.get(object, 'a.b.c');// => 3

动态访问多级对象。

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/

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

如果你已经知道确切的路径，那么你可以像这样在你的脚本中硬编码它:

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

这些也有用——

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

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

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。

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

# 0错误

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

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

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

用这个符号，你永远不会碰到

# 0。

你基本上检查user是否存在，如果不存在，你立即创建一个空对象。这样，下一层键将是总是从一个存在的对象或一个空对象访问，但不会从undefined开始。

2. 使用数组缩减访问嵌套对象

为了能够访问嵌套数组，您可以编写自己的数组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 elementsconst 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.

还有一个出色的类型处理最小库生长标准的，它可以为您完成所有这些工作。

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"]符号。否则，只要一个点就足够了;

来源:# 0

在此基础上，访问嵌套数组将如下所示:

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"

来源:# 0

通过点遍历访问属性:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation

我的stringdata来自PHP文件，但仍然，我在var中表示。当我直接把我的json到obj，它不会显示，这就是为什么我把我的json文件

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

动态方法

在下面deep(data,key)函数中，你可以使用任意key字符串-在你的例子中是items[1].name(你可以在任何级别使用数组符号[i])-如果key无效，则返回undefined。

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

// 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;}

在2020年，你可以使用@babel/plugin-proposal-optional- chains，它很容易访问对象中的嵌套值。

 const obj = {foo: {bar: {baz: class {},},},};
const baz = new obj?.foo?.bar?.baz(); // baz instance
const safe = new obj?.qux?.baz(); // undefinedconst safe2 = new obj?.foo.bar.qux?.(); // undefined

< a href = " https://babeljs。io / docs / en / babel-plugin-proposal-optional-chaining noreferrer“rel = > https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining < / >

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

您可以使用语法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 namesconsole.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);

解释很简单:

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

下面是一个使用object-scan的答案。

当访问单个条目时，这个答案并没有提供比普通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'));// => trueconsole.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'}));// => 2console.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的作者

这里有4种不同的方法来获得javascript的object属性:

var data = {code: 42,items: [{id: 1,name: 'foo'}, {id: 2,name: 'bar'}]};
// Method 1let method1 = data.items[1].name;console.log(method1);
// Method 2let method2 = data.items[1]["name"];console.log(method2);
// Method 3let method3 = data["items"][1]["name"];console.log(method3);
// Method 4  Destructuringlet { items: [, { name: second_name }] } = data;console.log(second_name);

如果您试图在JSON字符串中查找路径，可以将数据转储到https://jsonpathfinder.com并单击GUI元素。它将生成元素路径的JS语法。

除此之外，对于您可能想要迭代的任何数组，将相关的数组偏移下标(如[0])替换为循环。

下面是这个工具的一个简单版本，您可以在这里或https://ggorlen.github.io/json-dive/处运行。单击要将路径复制到剪贴板的节点。

/* 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&&t!=null?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=>{try{resultEl.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+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>

Unminified (also available on 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 = {"&": "&amp;","<": "&lt;",">": "&gt;",'"': "&quot;","'": "&#039;","\t": "\\t","\r": "\\r","\n": "\\n"," ": "&nbsp;",};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" && 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.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 + 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>

这并不是为了代替第0条，但一旦你知道了，就可以节省时间。

我就是这么做的。

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

你需要做的非常简单，它可以通过递归来实现:

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