Question

最近，我接受了采访，并拒绝了大约10个问题。每个问题有60秒。有一个问题出了错，但我很好奇为什么会发生。

我必须过滤给定SearchValue与list数组对象name属性匹配的那些对象。 search值已经给出。

例如：

const SearchValue = 'event';

它是经过过滤的数组，因为list[0].name属性值与event文本匹配。

const res = [
    {
        id: 2,
        name: 'Events',
        list: [
            {
                id: 1,
                name: 'Event Ticketing System',
                slug: '/'
            },
            {
                id: 2,
                name: 'Events Management Software',
                slug: '/'
            }
        ]
    }
];

name属性包含类似Online Translation Services和Spelling and Grammar Check之类的值。如果搜索值与text匹配，则将其过滤后的对象和{{1 }}。数据集就是这样。

console.log

我的实现是这样。

const listing = [
  {
    id: 1,
    name: 'Language',
    list: [
      {
        id: 1,
        name: 'Online Translation Services',
        slug: '/'
      },
      {
        id: 2,
        name: 'Spelling and Grammar Check',
        slug: '/'
      },
      {
        id: 3,
        name: 'TEFL Courses',
        slug: '/'
      },
      {
        id: 4,
        name: 'Language Learning',
        slug: '/'
      }
    ]
  },
  {
    id: 2,
    name: 'Events',
    list: [
      {
        id: 1,
        name: 'Event Ticketing System',
        slug: '/'
      },
      {
        id: 2,
        name: 'Events Management Software',
        slug: '/'
      }
    ]
  }
];

如果有人能提供良好的解决方案，我们将不胜感激。我也想知道这个逻辑出了什么问题？

Answer 1

您可以将Array#filter与Array#some一起使用，以验证每个对象的list属性的任何元素是否在其name中包含搜索文本。

const listing = [ { id: 1, name: 'Language', list: [ { id: 1, name: 'Online Translation Services', slug: '/' }, { id: 2, name: 'Spelling and Grammar Check', slug: '/' }, { id: 3, name: 'TEFL Courses', slug: '/' }, { id: 4, name: 'Language Learning', slug: '/' } ] }, { id: 2, name: 'Events', list: [ { id: 1, name: 'Event Ticketing System', slug: '/' }, { id: 2, name: 'Events Management Software', slug: '/' } ] } ];
const SearchValue = 'event';
const res = listing.filter(({list})=>
 list.some(({name})=>name.toLowerCase().includes(SearchValue.toLowerCase())));
console.log(res);

Answer 2

使用RegEx进行检查并进行测试

const SearchValue = 'event';

const listing = [{
    id: 1,
    name: 'Language',
    list: [{
        id: 1,
        name: 'Online Translation Services',
        slug: '/'
      },
      {
        id: 2,
        name: 'Spelling and Grammar Check',
        slug: '/'
      },
      {
        id: 3,
        name: 'TEFL Courses',
        slug: '/'
      },
      {
        id: 4,
        name: 'Language Learning',
        slug: '/'
      }
    ]
  },
  {
    id: 2,
    name: 'Events',
    list: [{
        id: 1,
        name: 'Event Ticketing System',
        slug: '/'
      },
      {
        id: 2,
        name: 'Events Management Software',
        slug: '/'
      }
    ]
  }
];

const res = listing.filter(object => {
  if (Array.isArray(object.list) && object.list.length > 0) {
    // Check items with RegEx test
    // and update object.list
    object.list = object.list.filter(item => new RegExp(SearchValue, 'i').test(item.name));
    // Return true if list length > 0
    if(object.list.length > 0) return true;
  }
});


console.log('Result Array', res);

Answer 3

Array Filter

let newArray = arr.filter(callback(element[, index, [array]])[, thisArg])

回调

函数是一个谓词，用于测试数组的每个元素。返回true保留元素，否则返回false。

返回值

包含通过测试的元素的新数组。如果没有任何元素通过测试，则将返回一个空数组。

const SearchValue = 'language';

const listing = [{
    id: 1,
    name: 'Language',
    list: [{
        id: 1,
        name: 'Online Translation Services',
        slug: '/'
      },
      {
        id: 2,
        name: 'Spelling and Grammar Check',
        slug: '/'
      },
      {
        id: 3,
        name: 'TEFL Courses',
        slug: '/'
      },
      {
        id: 4,
        name: 'Language Learning',
        slug: '/'
      }
    ]
  },
  {
    id: 2,
    name: 'Events',
    list: [{
        id: 1,
        name: 'Event Ticketing System',
        slug: '/'
      },
      {
        id: 2,
        name: 'Events Management Software',
        slug: '/'
      }
    ]
  }
];

const res = listing.reduce((pre, object) => {
  if(!Array.isArray(object.list) || object.list.length <= 0)
    return pre
  
  object.list = object.list.filter((item) =>  item.name.toLowerCase().indexOf(SearchValue.toLowerCase()) > -1);
    
  return object.list.length > 0 ? [...pre, object] : pre;

}, []);


console.log('Result Array', res);

根据嵌套数组对象过滤对象

3 个答案:

回调

返回值