使用filter方法处理两个等长数组却得到不同结果的问题

问题核心原因 #

你的两段代码看似用了相同的filter逻辑item => item.id，但返回结果差异的本质是JavaScript的真值/假值判断规则：

• initialArtists数组里第一个元素的id是0，而0在JavaScript中属于假值（falsy value），会被filter判定为不符合条件，因此被过滤掉，最终只返回2个元素。
• users数组里的id都是1、2、3这类非零数字，属于真值（truthy value），全部通过filter的条件判断，所以返回全部3个元素。

JavaScript中的假值包括：0、''（空字符串）、null、undefined、false、NaN。

修正方案 #

如果想保留所有包含id属性的元素（包括id=0的情况），需要调整filter的回调逻辑，避免直接用item.id做布尔判断：

方案1：判断元素是否包含id属性 #

let artist = initialArtists.filter(a => 'id' in a);

方案2：排除无效id（保留0） #

如果只是想过滤掉null/undefined这类无效id，同时保留0，可以写：

let artist = initialArtists.filter(a => a.id !== null && a.id !== undefined);

方案3：显式保留0的布尔判断 #

也可以通过明确判断来保留0：

let artist = initialArtists.filter(a => !!a.id || a.id === 0);

原代码对比 #

艺术家数组代码 #

let initialArtists = [
    { id: 0, name: 'Marta Colvin Andrade' },
    { id: 1, name: 'Lamidi Olonade Fakeye'},
    { id: 2, name: 'Louise Nevelson'},
];

let artist = initialArtists.filter(a => a.id);

console.log(artist); // 输出: [{id:1,...}, {id:2,...}]

用户数组代码 #

let users = [
    {id: 1, name: "John"},
    {id: 2, name: "Pete"},
    {id: 3, name: "Mary"}
];

let someUsers = users.filter(item => item.id);

console.log(someUsers); // 输出: 全部3个用户对象

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