如何过滤数组中哪些元素具有嵌套数组？

Question

我试图找到能够过滤属性中包含另一个数组的数组的逻辑。见下文：

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 的产品。我已经尝试过，但我的解决方案真的很长。

Answer 1

const filteredProducts = products.filter(p => p.type.includes(type));.filter您可以在外部数组和.includes内部数组上使用来执行您要查找的操作。根据记录，“berry”从未出现在任何“type”数组中，但“berry”却出现在

Answer 2

您可以使用Array.prototype.filter()withArray.prototype.some()来获取过滤结果。如果数组中至少有一个元素通过给定回调函数的测试，则 some() 方法返回 true。const filterValue = 'berry';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,  },];const ret = products.filter(({ type }) =>  type.some((x) => x.toLowerCase() === filterValue.toLowerCase()));console.log(ret);