我有一个包含对象和数组的嵌套数据结构。我如何提取信息,即访问一个特定的或多个值(或键)?
例如:
var data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
我如何访问项目中的第二个项目的名称?
我有一个包含对象和数组的嵌套数据结构。我如何提取信息,即访问一个特定的或多个值(或键)?
例如:
var data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
我如何访问项目中的第二个项目的名称?
当前回答
您可以使用jsonObject语法。键访问该值。如果你想从数组中访问一个值,那么你可以使用jsonObjectArray[index].key语法。
下面是访问各种值的代码示例,可以让您了解这个概念。
Var数据= { 42岁的代码: 项目:[{ id: 1、 名称:“foo” }, { id: 2 名称:“酒吧” }) }; //如果你想要'bar' console.log (data.items [1] . name); //如果你想要数组的项目名称 console.log (data.items。映射(x => x.name)); //获取name = 'bar'的条目id console.log (data.items。过滤(x => (x.name == "bar") ?X.id: null)[0].id);
其他回答
对象和数组有很多内置方法,可以帮助您处理数据。
注意:在很多例子中,我都使用了箭头函数。它们类似于函数表达式,但是它们在词法上绑定this值。
Object.keys(), Object.values() (ES 2017)和Object.entries() (ES 2017)
object .keys()返回对象键的数组,object .values()返回对象值的数组,object .entries()返回格式为[key, value]的对象键和相应值的数组。
Const obj = { 答: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 = { 答:1 b: 2 c: 3 } for (const [key, value] of Object.entries(obj)) { Console.log (' key: ${key}, value: ${value} ') }
使用for-of循环和解构赋值迭代Object.entries()的结果非常方便。
For-of循环允许迭代数组元素。语法为(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]
}
如您所见,解构使这变得简单得多。
Array.prototype.every()和Array.prototype.some()
如果指定的回调函数对数组中的每个元素都返回true,则every()方法返回true。如果指定的回调函数对某些(至少一个)元素返回true,则some()方法返回true。
Const arr = [1,2,3] // true,因为每个元素都大于0 console.log(加勒比海盗。每个(x => x > 0)) // false,因为3^2大于5 console.log(加勒比海盗。数学。Pow (x, 2) < 5)) // true,因为2是偶数(除以2的余数是0) console.log(加勒比海盗。(x => x % 2 === 0)) // false,因为所有元素都不等于5 console.log(加勒比海盗。一些(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(加勒比海盗。Map (x => x + 1)) // [2,3,4] console.log(加勒比海盗。地图(x = > String.fromCharCode (96 + x))) / / (a, b, c的) console.log(加勒比海盗。Map (x => x)) // [1,2,3] (no-op) console.log(加勒比海盗。map(x =>数学。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(加勒比海盗。Reduce ((a, b) => a + b)) // 6 //数组中最大的数字。 console.log(加勒比海盗。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])
老问题,但没有人提到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,它很方便!
我希望它能对那些正在寻找操作标题所暗示的真正复杂数据的选项的人有用。
如果你愿意包含一个库,使用JSONPath将是最灵活的解决方案之一: https://github.com/s3u/JSONPath(节点和浏览器)
对于你的用例,json路径是:
$..items[1].name
so:
var secondName = jsonPath.eval(data, "$..items[1].name");
如果你正在寻找一个或多个符合特定条件的对象,你可以使用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,它们的工作类似于firstand firstordefault。唯一的区别是,如果找到了不止一根火柴,他们就会扔。
关于query-js的进一步解释可以从这篇文章开始
动态方法
在下面的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));