Question

如何使用深层嵌套数组过滤数组？给定以下2个数组，我需要结果为只包含var scene = new ScrollMagic.Scene({ triggerElement: slides[i] }) .setPin(slides[i]) .addIndicators() .addTo(controller) .triggerHook(0.10) .reverse(true) .on('enter', function(e){ panel = $(e.target.triggerElement()).prop('id'); $('.circle').removeClass('active'); $('.circle.c-'+panel).addClass('active'); });和rice cakes对象的数组：

gluten-free-pizza

我尝试了下面的内容，它只返回所有内容（4个对象）：

const foodsILike = ['gluten-free', 'carb-free', 'flavor-free'];
const foodsAvailable = [
  { name: 'pasta', tags: ['delicious', 'has carbs']}, 
  { name: 'gluten-free-pizza', tags: ['gluten-free']}, 
  { name: 'pizza', tags: ['delicious', 'best meal of the year']},
  { name: 'rice cakes', tags: ['flavor-free']}
]

Answer 1

您可以使用Array#some和Array#includes来检查foodsILike是否包含标记。

＆＃13;

const foodsILike = ['gluten-free', 'carb-free', 'flavor-free'];
const foodsAvailable = [{ name: 'pasta', tags: ['delicious', 'has carbs'] }, { name: 'gluten-free-pizza', tags: ['gluten-free'] }, { name: 'pizza', tags: ['delicious', 'best meal of the year'] }, { name: 'rice cakes', tags: ['flavor-free'] }]

var result = foodsAvailable.filter(function(food) {
    return food.tags.some(function(tag) {
        return foodsILike.includes(tag);
    });
});

console.log(result);

＆＃13;

.as-console-wrapper { max-height: 100% !important; top: 0; }

＆＃13;

Answer 2

您错过了对内部过滤器的<g id="j_5" model-id="7035b15a-67f6-4531-a437-2c3f12d27c35" class="joint-theme-modern joint-cell joint-type-basic joint-type-basic-image joint-element" data-type="basic.Image" fill="#ffffff" stroke="none" data-tooltip="Image" data-tooltip-position="left" data-tooltip-position-selector=".joint-stencil" transform="translate(20,174.33962264150944)"> <g class="rotatable" id="v-71"> <g class="scalable" transform="scale(1.6981132075471699,1.6981132075471697)"> <image id="v-73" width="53" height="42" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/image-icon1.svg"></image> </g> <text id="v-72" font-size="9" y="0.8em" xml:space="preserve" text-anchor="middle" fill="#222138" font-family="Roboto Condensed" font-weight="Normal" display="" stroke="#000" stroke-width="0" transform="matrix(1,0,0,1,45,91.3)"><tspan id="v-74" class="v-line" dy="0em" x="0">image</tspan></text> </g> </g>检查，并且您没有检查标签数组中内部过滤器中的值

＆＃13;

length

＆＃13;

Answer 3

您可以使用array.reduce将数组缩减为所需的结构，方法是检查条件，即foodsILike是否包含tag。

使用array.reduce的好处是，您可以根据需要在reduce循环中修改结构。

const foodsILike = ['gluten-free', 'carb-free', 'flavor-free'];
const foodsAvailable = [
  { name: 'pasta', tags: ['delicious', 'has carbs']}, 
  { name: 'gluten-free-pizza', tags: ['gluten-free']}, 
  { name: 'pizza', tags: ['delicious', 'best meal of the year']},
  { name: 'rice cakes', tags: ['flavor-free']}
];

let foods = foodsAvailable.reduce((foods, food) => {
  if(foodsILike.some(f => food.tags.indexOf(f) !== -1)) {
    foods.push(food);
  }
  return foods;
},[]);

console.log(foods);

使用JS中的深层嵌套数组过滤数组

3 个答案: