如何合并JSON数组与普通数组？附具体示例与预期结果

嘿，我来帮你搞定这个需求！你想要从第一个对象数组里，挑出name属性存在于第二个字符串数组中的元素对吧？下面给你几种简单好用的实现方式：

方法一：filter() + includes()（最直观常用） #

这是前端开发里最常用的写法，利用数组的原生方法就能轻松完成筛选：

const array1 = [ {"name": "A", "class" : "1"}, {"name": "B", "class" : "2"}, {"name": "C", "class" : "3"} ];
const array2 = [ "A","B"];

const result = array1.filter(item => array2.includes(item.name));
console.log(result); 
// 输出结果：[ {"name": "A", "class" : "1"}, {"name": "B", "class" : "2"} ]

代码说明： #

• filter()：遍历array1里的每个对象，把符合条件的元素收集成新数组返回
• includes()：检查当前对象的name值是否在array2里，返回布尔值判断是否保留该元素

方法二：用Set优化性能（适合大数据量场景） #

如果你的数组元素特别多，includes()每次查找都是O(n)的时间复杂度，换成Set可以把查找速度降到O(1)，能明显提升性能：

const array1 = [ {"name": "A", "class" : "1"}, {"name": "B", "class" : "2"}, {"name": "C", "class" : "3"} ];
const array2 = [ "A","B"];

const nameSet = new Set(array2);
const result = array1.filter(item => nameSet.has(item.name));
console.log(result);

为什么这么做？ #

Set的底层是哈希表结构，查找元素的效率比普通数组高很多，当array2长度很大时，这种写法的优势会非常明显。

方法三：手动循环遍历（兼容旧环境） #

如果需要兼容不支持ES6的老旧运行环境，可以用普通的for循环实现：

const array1 = [ {"name": "A", "class" : "1"}, {"name": "B", "class" : "2"}, {"name": "C", "class" : "3"} ];
const array2 = [ "A","B"];

const result = [];
for (let i = 0; i < array1.length; i++) {
  const currentItem = array1[i];
  // 遍历array2查找匹配的name
  for (let j = 0; j < array2.length; j++) {
    if (currentItem.name === array2[j]) {
      result.push(currentItem);
      break; // 找到匹配项就跳出内层循环，减少不必要的遍历
    }
  }
}
console.log(result);

以上几种方法都能得到你预期的结果，可以根据自己的项目环境和数据规模选择合适的方案~

内容的提问来源于stack exchange，提问作者Phong Vu