我有一个包含对象和数组的嵌套数据结构。我如何提取信息，即访问一个特定的或多个值(或键)?
例如:
var data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
我如何访问项目中的第二个项目的名称?
当前回答
动态方法
在下面的deep(data,key)函数中，您可以使用任意键字符串-在您的情况下，items[1].name(您可以在任何级别使用数组符号[i]) -如果key无效，则返回undefined。
让深= (o, k) = > k.split (' . ') .reduce ((a、c、i) = > { 让m = c.match (/(.*?)\[(\ d *) \] /); 如果(m && a!=null && a[m[1]]!=null) return a[m[1]][+m[2]]; 返回a==null ?答:[c]; }, o); / /测试 Let key = 'items[1].name' //任意深键 Let data = { 42岁的代码: 名称:项目:[{id: 11日“foo”},{id: 22岁的名字:“酒吧”},) }; Console.log (key，'='， deep(data,key));
其他回答
预赛
JavaScript只有一种数据类型可以包含多个值:对象。数组是对象的一种特殊形式。
(普通)对象具有窗体
{key: value, key: value, ...}
数组有这样的形式
[value, value, ...]
数组和对象都公开key ->值结构。数组中的键必须是数字，而任何字符串都可以用作对象中的键。键值对也称为“属性”。
属性可以使用点表示法访问
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在问题中解释了解析JSON在JavaScript?．
进一步阅读材料
如何访问数组和对象是基本的JavaScript知识，因此最好阅读MDN JavaScript指南，特别是部分
使用对象 数组 雄辩的JavaScript -数据结构
访问嵌套数据结构
嵌套数据结构是指引用其他数组或对象的数组或对象，即其值是数组或对象。这样的结构可以通过连续应用点或括号符号来访问。
这里有一个例子:
const data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
让我们假设我们想要访问第二个项目的名称。
以下是我们如何一步一步做到这一点:
正如我们所看到的，数据是一个对象，因此我们可以使用点表示法访问它的属性。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。检查对象/数组的结构。您试图访问的属性实际上可能定义在一个嵌套的对象/数组上。
console.log(foo.bar.baz); // 42
如果属性名是动态的，而我事先不知道它们怎么办?
如果属性名未知，或者我们想访问一个对象/数组元素的所有属性，可以使用for…in [MDN]循环用于对象，for [MDN]循环用于数组遍历所有属性/元素。
对象
要遍历数据的所有属性，我们可以像这样遍历对象:
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中，你可以使用Object。key [MDN]获取属性名数组:
Object.keys(data).forEach(function(prop) {
// `prop` is the property name
// `data[prop]` is the property value
});
数组
遍历数据的所有元素。数组中，我们使用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`.
}
One也可以用for…在数组上迭代，但有原因为什么这应该避免:为什么'for(var item in list)'数组被认为是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…[MDN]循环，它不仅适用于数组，而且适用于任何可迭代对象:
for (const item of data.items) {
// `item` is the array element, **not** the index
}
在每次迭代中，对于…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);
访问具有未知键和深度的嵌套数据结构的一种更通用的方法是测试值的类型并据此进行操作。
下面是一个示例，它将嵌套数据结构中的所有原语值添加到一个数组中(假设它不包含任何函数)。如果遇到一个对象(或数组)，我们简单地对该值再次调用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 = { 42岁的代码: 项目:[{ id: 1、 名称:“foo” }, { id: 2 名称:“酒吧” }) }; 函数toArray(obj) { Const result = []; For (const prop in obj) { Const值= obj[道具]; If (typeof value === 'object') { result.push (toArray(值)); }其他{ result.push(价值); ｝ ｝ 返回结果; ｝ console.log (toArray(数据));
助手
由于复杂对象或数组的结构并不明显，我们可以在每一步检查值，以决定如何进一步移动。console.log [MDN]和console.log。dir [MDN]帮助我们做到这一点。例如(Chrome控制台的输出):
> console.log(data.items)
[ Object, Object ]
这里我们看到数据。Items是一个包含两个元素的数组，两个元素都是对象。在Chrome控制台中，对象甚至可以立即展开和检查。
> console.log(data.items[1])
Object
id: 2
name: "bar"
__proto__: Object
这告诉我们数据。[1]是一个对象，展开它后，我们看到它有三个属性，id, name和__proto__。后者是用于对象的原型链的内部属性。但是，原型链和继承不在这个答案的范围之内。
下面是一个使用对象扫描的答案。
当访问单个条目时，这个答案并没有提供比普通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的作者
如果你愿意包含一个库，使用JSONPath将是最灵活的解决方案之一: https://github.com/s3u/JSONPath(节点和浏览器)
对于你的用例，json路径是:
$..items[1].name
so:
var secondName = jsonPath.eval(data, "$..items[1].name");
这个问题很老了，所以作为当代的更新。随着ES2015的开始，有了其他方法来获取你需要的数据。现在有一个被称为对象解构的特性，用于访问嵌套对象。
Const data = { 42岁的代码: 项目:[{ id: 1、 名称:“foo” }, { id: 2 名称:“酒吧” }) }; const { 项目:[，{ 名称:secondName }) } =数据; console.log (secondName);
上面的例子从名为items的数组的name键创建了一个名为secondName的变量，该数组表示跳过数组中的第一个对象。
值得注意的是，对于这个例子来说，它可能有点过头了，因为简单的数组访问更容易阅读，但在一般情况下，它在分解对象时很有用。
这是对您的特定用例的非常简短的介绍，解构可能是一种不寻常的语法，首先要习惯。我建议阅读Mozilla的解构赋值文档来了解更多信息。
var ourStorage = {
"desk": {
"drawer": "stapler"
},
"cabinet": {
"top drawer": {
"folder1": "a file",
"folder2": "secrets"
},
"bottom drawer": "soda"
}
};
ourStorage.cabinet["top drawer"].folder2; // Outputs -> "secrets"
or
//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
