我有一个包含对象和数组的嵌套数据 struct .如何提取信息,即访问特定或多个值(或键)?
例如:
var data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
我怎么才能访问items
中第二个项目的第name
个呢?
我有一个包含对象和数组的嵌套数据 struct .如何提取信息,即访问特定或多个值(或键)?
例如:
var data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
我怎么才能访问items
中第二个项目的第name
个呢?
JavaScript只有一种数据类型可以包含多个值:Object.Array是物体的一种特殊形式.
(普通)对象的形式为
{key: value, key: value, ...}
数组的形式为
[value, value, ...]
数组和对象都公开key -> value
struct .数组中的键必须是数字,而任何字符串都可以用作对象中的键.键-值对也称为"properties".
属性可以使用dot notation
const value = obj.someProperty;
或者bracket notation,如果属性名称不是有效的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是数据的文本表示,就像XML、YAML、CSV等.要处理此类数据,首先必须将其转换为JavaScript数据类型,即数组和对象(刚才已经解释了如何处理这些数据).问题Parse JSON in JavaScript?解释了如何解析JSON.
如何访问数组和对象是JavaScript的基础知识,因此建议阅读MDN JavaScript Guide篇文章,尤其是其中的章节
嵌套数据 struct 是指其他数组或对象的数组或对象,即其值是数组或对象.这种 struct 可以通过连续应用点或括号符号来访问.
下面是一个例子:
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
back?大多数情况下,当你得到undefined
时,对象/数组根本没有一个具有该名称的属性.
const foo = {bar: {baz: 42}};
console.log(foo.baz); // undefined
使用console.log
或console.dir
判断对象/数组的 struct .您try 访问的属性可能实际上是在嵌套对象/数组上定义的.
console.log(foo.bar.baz); // 42
如果属性名未知,或者我们想要访问一个对象/数组元素的所有属性,我们可以使用for...in
[MDN]循环来访问对象,使用for
[MDN]循环来访问数组的所有属性/元素.
Objects
要迭代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]块钱.
作为for...in
和hasOwnProperty
的替代方案,您可以使用Object.keys
[MDN]获得array of property names:
Object.keys(data).forEach(function(prop) {
// `prop` is the property name
// `data[prop]` is the property value
});
Arrays
要迭代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`.
}
One could also use for...in
to iterate over arrays, but there are reasons why this should be avoided: 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
直接为我们提供iterable的下一个元素,没有可访问或使用的"索引".
除了未知键之外,数据 struct 的"深度"(即它有多少嵌套对象)也可能是未知的.如何访问深度嵌套的属性通常取决于确切的数据 struct .
但是,如果数据 struct 包含重复模式,例如二叉树的表示,则解决方案通常包括对数据 struct 的每个级别进行recursively [Wikipedia]次访问.
下面是获取二叉树的第一个叶 node 的示例:
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);
访问具有未知键和深度的嵌套数据 struct 的一种更通用的方法是测试值的类型并执行相应的操作.
下面是一个示例,它将嵌套数据 struct 中的所有原始值添加到一个数组中(假设它不包含任何函数).如果我们遇到对象(或数组),我们只需对该值再次调用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));
由于复杂对象或数组的 struct 不一定明显,我们可以在每一步判断值,以决定如何进一步移动.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__
.后者是用于对象的原型链的内部属性.然而,原型链和继承超出了这个答案的范围.