javascript - 嵌套数组中的 lodash 选择
问题描述
我有一个这样的对象数组:
{
"sizes":{
"thumbnail":{
"height":300,
"width":300,
"url":"http://example.com/wp-content/uploads/2017/04/web-300x300.jpg",
"orientation":"landscape"
},
"medium":{
"height":267,
"width":400,
"url":"http://example.com/wp-content/uploads/2017/04/web-400x267.jpg",
"orientation":"landscape"
},
"large":{
"height":441,
"width":660,
"url":"http://example.com/wp-content/uploads/2017/04/web-1024x684.jpg",
"orientation":"landscape"
},
"full":{
"url":"http://example.com/wp-content/uploads/2017/04/web.jpg",
"height":1200,
"width":1796,
"orientation":"landscape"
}
},
"mime":"image/jpeg",
"type":"image",
"subtype":"jpeg",
"id":3589,
"url":"http://example.com/wp-content/uploads/2017/04/web.jpg",
"alt":"",
"link":"http://example.com/web/",
"caption":""
}
我正在使用以下代码段创建一个新数组,其中仅包含数组中的、alt
和键:caption
id
url
images.map( ( image ) => pick( image, [ 'alt', 'caption', 'id', 'url' ] ) ),
我的问题是,我怎样才能选择sizes.thumbnail.url
密钥而不是根url
密钥?可能吗?如果是这样,怎么做?
提前致谢
解决方案
sizes.thumbnail.url
使用 url 属性和using的值创建一个对象_.get()
,并将其与_.pick()
.
注意:我使用对象扩展来合并结果,但您可以使用Object.assign()
或 lodash 的等效项。
const images = [{"sizes":{"thumbnail":{"height":300,"width":300,"url":"http://example.com/wp-content/uploads/2017/04/web-300x300.jpg","orientation":"landscape"},"medium":{"height":267,"width":400,"url":"http://example.com/wp-content/uploads/2017/04/web-400x267.jpg","orientation":"landscape"},"large":{"height":441,"width":660,"url":"http://example.com/wp-content/uploads/2017/04/web-1024x684.jpg","orientation":"landscape"},"full":{"url":"http://example.com/wp-content/uploads/2017/04/web.jpg","height":1200,"width":1796,"orientation":"landscape"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":3589,"url":"http://example.com/wp-content/uploads/2017/04/web.jpg","alt":"","link":"http://example.com/web/","caption":""}];
const result = images.map((image) => ({
..._.pick(image, ['alt', 'caption', 'id']),
url: _.get(image, 'sizes.thumbnail.url')
}));
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
一个更通用的解决方案是一个接受路径列表的函数,并生成一个对数组[路径的最后部分,值]。_.fromPairs()
该函数使用(或)将对转换为对象Object.fromEntries()
:
const deepPick = (paths, obj) =>
_.fromPairs(paths.map(p => [
_.last(p.split('.')),
_.get(obj, p),
]))
const images = [{"sizes":{"thumbnail":{"height":300,"width":300,"url":"http://example.com/wp-content/uploads/2017/04/web-300x300.jpg","orientation":"landscape"},"medium":{"height":267,"width":400,"url":"http://example.com/wp-content/uploads/2017/04/web-400x267.jpg","orientation":"landscape"},"large":{"height":441,"width":660,"url":"http://example.com/wp-content/uploads/2017/04/web-1024x684.jpg","orientation":"landscape"},"full":{"url":"http://example.com/wp-content/uploads/2017/04/web.jpg","height":1200,"width":1796,"orientation":"landscape"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":3589,"url":"http://example.com/wp-content/uploads/2017/04/web.jpg","alt":"","link":"http://example.com/web/","caption":""}];
const result = images.map(image => deepPick(
['alt', 'caption', 'id', 'sizes.thumbnail.url'],
image
));
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
推荐阅读
- php - 从大记录中选择有限的行
- typescript - 生成的类型声明将隐式类型转换为任何
- html - 即使 Header 不存在,如何始终在 Header (H2) 元素上方保留 50px 的空白?
- javascript - React 应用加载资源失败:服务器响应状态为 404 GraphQL
- python - Web 解析器:陷入无限循环(Python)
- python - 如何仅通过属性名称在 Beautifulsoup 中执行 find_all()
- c - 为什么没有分配内存?
- sed - 如何从 m3u 文件中删除 png 徽标
- android - 在 Build Machine 上运行每个 ui 测试套件之前擦除 android 模拟器
- python - 如何使用生成器将字符串正确转换为列表