javascript - 如何过滤数组中哪些元素具有嵌套数组?
问题描述
我试图找到能够过滤包含属性中另一个数组的数组的逻辑。见下文:
let filterValue = 'berries';
const products = [
{
id: 1,
productName: 'Strawberry Basil',
productImgURL:
'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/Cherry_Pop_Still_4K_Front-CherryPop.png?v=1588713373',
type: ['berry', 'citrusy', 'fancy'],
price: 5.5,
},
{
id: 2,
productName: 'Sour Blueberry',
productImgURL:
'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/SourBlueBerry_Still_4K_Front-SourBlueberry.png?v=1588713584',
type: ['all', 'sour', 'berry'],
price: 4,
},
{
id: 3,
productName: 'Blackberry Jam',
productImgURL:
'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/BlackBerry_Jam_Still_4K_Front-BlackberryJam.png?v=1595035965',
type: ['all', 'berry'],
price: 10,
},
{
id: 4,
productName: 'Orange Nectarine',
productImgURL:
'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/Orange_Nectarine_Still_4K_Front-OrangeNectarine.png?v=1588713522',
type: ['all', 'Citrus', 'fancy', 'juicy'],
price: 6,
},
{
id: 5,
productName: 'Lemon Verbena',
productImgURL:
'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/Lemon_Verbena_Still_4K_Front-LemonVerbena.png?v=1588713474',
type: ['all', 'Citrus', 'classic', 'floral'],
price: 4.5,
},
{
id: 6,
productName: 'Extra Peach',
productImgURL:
'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/ExtraPeach_Still_4K_Front-ExtraPeach.png?v=1588713411',
type: ['Juicy'],
price: 8.5,
},
];
正如您在上面看到的,我想过滤数组并只显示那些在类型内包含过滤器 val 的产品。我已经尝试过,但我的解决方案真的很长。
解决方案
const filteredProducts = products.filter(p => p.type.includes(type));
您可以.filter
在外部数组和.includes
内部数组上使用来执行您要查找的操作。
作为记录,“berries”从未出现在任何“type”数组中,但“berry”确实出现了
推荐阅读
- javascript - JavaScript 的 HttpClient 奇怪错误
- c# - 将数据类型从 Excel 文件转换为 SQL Server
- angularjs - 如何在 ng-repeat 中更新 ng-model
- python - 在 docker 容器中使用 python 的配置文件
- javascript - 如何获取所有产品的名称?
- laravel - laravel:如何设置我的资源以提供空字符串而不是 null
- java - 只听一次音量键按钮
- r - 如何在 R 中删除一些值较少的观察值?
- javascript - 从外部异步函数发送快速响应
- python - 嵌套 Python 循环 - 如何创建倒三角形