如何过滤对象数组并检查特定键是否在数组中具有值答案

【问题标题】：How to Filter an Array of Object and check if Specific key has a value in an Array如何过滤对象数组并检查特定键是否在数组中具有值
【发布时间】：2020-07-02 00:28:49
【问题描述】：

我有这个对象数组：

const Books = [
  {title:'Book 1', Date: '12/12/2000'},
  {title:'Book 2', Date: '12/12/2001'},
  {title:'Book 3', Date: '12/12/2003'},
  {title:'Book 4', Date: '12/12/2003'}
]

我有这一系列选定的书籍：

 const selectedBooks = ['Book1','Book4']

是否有可能得到以下结果：

 const filteredBooks = [
     {title:'Book 1', Date: '12/12/2000'},
     {title:'Book 4', Date: '12/12/2003'}
 ]

lodash 或者 ES6 中有方法实现吗？

【问题讨论】：

在 selectedBooks 数组中的标题是 Book1，而在 books 数组中的标题是 Book 1 是正确的还是您在 selectedBooks 中得到了类似的标题？

标签： javascript ecmascript-6 lodash

【解决方案1】：

我假设selectedBooks 中的项目将匹配filteredBooks 中的title。如果没有，您将需要一些方法来映射这些值。

您想要Array.prototype.filter 和Array.prototype.indexOf 的组合。

const filteredBooks = Books.filter(book => selectedBooks.indexOf(book.title) !== -1)

【讨论】：

【解决方案2】：

您可以将Array.prototype.filter 与Array.prototype.includes 一起使用：

const Books = [
    { title: 'Book 1', Date: '12/12/2000' },
    { title: 'Book 2', Date: '12/12/2001' },
    { title: 'Book 3', Date: '12/12/2003' },
    { title: 'Book 4', Date: '12/12/2003' }
]

const selectedBooks = ['Book 1', 'Book 4']

const filteredBooks = Books.filter(book => selectedBooks.includes(book.title));

console.log(filteredBooks);

【讨论】：

【解决方案3】：

您可以filter 获取selectedBooks includes 他们的title 的所有元素：

const filteredBooks = Books.filter(book => selectedBooks.includes(book.title))

filter 返回给定回调返回真实值的所有条目，includes 将告诉您数组是否包含给定值。

【讨论】：

【解决方案4】：

是的，试试数组过滤运算符

const filteredBooks = Books.filter(({title}) => selectedBooks.includes(title))

【讨论】：

【解决方案5】：

const books = [
    { title: 'Book 1', Date: '12/12/2000' },
    { title: 'Book 2', Date: '12/12/2001' },
    { title: 'Book 3', Date: '12/12/2003' },
    { title: 'Book 4', Date: '12/12/2003' }
];

const selectedBooks = ['Book 1', 'Book 4'];

const filteredBooks = _.filter(books, book => _.includes(selectedBooks,  book.title));

console.log(filteredBooks);

&lt;script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"&gt;&lt;/script&gt;

【讨论】：