如何用JavaScript根据两个对象数组的属性值过滤数组

我有两个对象数组：

var array1 = 
[{"name":"abc", "url":"http:://example1.com"},
{"name":"cde", "url":"http:://example2.com"},
{"name":"fgh", "url":"http:://example3.com"}];

var array2 = 
[{"id":"1", "url":"http:://example1.com"},
{"id":"2", "url":"http:://example2.com"}]; 

想要筛选出array1中url值存在于array2中的元素。

感谢VLAZ指正数组定义问题（我之前误以为示例是二维数组）。

我已经尝试过用reduce把array2转成仅存url的数组，再结合filter实现筛选：

let array2b = array2.reduce((acc, cur) => [...acc, cur.url], []);
var filtered = array1.filter(item => array2b.includes(item.url));

但想知道如何直接通过两个多对象数组完成筛选。

我花了一天时间搜索，最终找到了可行方案，在此整理分享。

如果要直接基于两个对象数组筛选，有两种常见思路：

1. 直接在filter中用some判断 #

利用Array.prototype.some()方法，直接在array1的filter回调里检查当前元素的url是否在array2的任意对象中存在：

var filtered = array1.filter(item => 
  array2.some(obj => obj.url === item.url)
);

这种写法更直观，不需要额外转换数组，但如果array2数据量较大，每次filter都要遍历array2，性能会稍差。

2. 用Set优化性能（推荐大数据量场景） #

先把array2的url提取到Set中（和你之前用reduce的思路类似，但Set的查找效率更高），再进行筛选：

const urlSet = new Set(array2.map(obj => obj.url));
var filtered = array1.filter(item => urlSet.has(item.url));

这种方法只需要遍历array2一次构建Set，之后每次查找都是O(1)时间，数据量大时性能优势明显。

内容的提问来源于stack exchange，提问作者Duc Minh