JS数组如何获取active字段为false的元素，二次点击筛选结果异常

问题原因 #

• 你在点击事件里打印的是完整原数组test，而非你筛选出的符合条件的结果test2，所以每次都会输出所有元素，看不到筛选效果
• 数组内的元素是对象引用类型，filter返回的新数组test2里的元素和原数组test的元素指向同一个内存地址，修改test2元素的active属性会同步修改原数组对应元素。第一次点击执行完成后，所有元素的active都被设为true，第二次点击时filter得到的test2会是空数组。

修正示例代码 #

如果你想要每次点击都只输出当前active为false的元素，再把这些元素的active设为true，可以参考如下修改：

const test  =[
   {firstName:'abc',lastName:'abc',active:false},
   {firstName:'def',lastName:'def',active:false},
   {firstName:'ghi',lastName:'ghi',active:false},
]

document.getElementById('btn').addEventListener('click',()=>{
  // 筛选当前active为false的元素
  const inactiveItems = test.filter(x=>!x.active);
  // 打印筛选结果，而非完整原数组
  console.log('本次获取到的未激活元素：', inactiveItems);
  // 批量更新状态
  inactiveItems.forEach(item=>{
    item.active = true;
  })
})

对应HTML代码无需修改：

<button id="btn">
 获取
</button>

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