JS 判断对象数组中是否存在指定属性值(以 type===2 为例)
在前端日常开发中,我们经常会遇到这样的需求:判断一个对象数组中是否存在至少一个满足「指定属性等于特定值」的元素(比如判断数组中是否有 type === 2 的对象)。本文将围绕这个高频场景,分享几种简洁、高效且符合最佳实践的实现方式。
一、最优解:Array.some()(推荐)
Array.some() 是 ES5 新增的数组方法,也是最贴合「判断是否存在满足条件元素」的原生 API。它的核心特性是:遍历数组时,只要有一个元素满足条件就立即返回 true,否则返回 false;且找到第一个符合条件的元素后会停止遍历,性能最优。
代码示例
// 示例对象数组
const dataList = [
{ id: 1, type: 1, name: "商品A" },
{ id: 2, type: 2, name: "商品B" },
{ id: 3, type: 3, name: "商品C" },
];
// 核心逻辑:判断是否存在 type === 2 的对象
const hasType2 = dataList.some(item => item.type === 2);
console.log(hasType2); // 输出:true
// 测试无符合条件的场景
const emptyList = [
{ id: 4, type: 1, name: "商品D" },
{ id: 5, type: 3, name: "商品E" },
];
const noType2 = emptyList.some(item => item.type === 2);
console.log(noType2); // 输出:false
核心说明
some()接收一个回调函数,回调函数对每个数组元素返回「是否满足条件」的布尔值;- 遍历过程中一旦找到第一个满足条件的元素,会立即终止遍历(避免无效循环);
- 语法简洁,语义化极强,一眼就能看懂「是否存在满足条件的元素」。
二、兜底方案:Array.find()
如果除了「判断存在性」,你还需要获取这个符合条件的对象本身,那么 Array.find() 是更合适的选择。该方法会返回第一个满足条件的元素,若未找到则返回 undefined,我们可以通过判断返回值是否非空来实现存在性校验。
代码示例
const dataList = [
{ id: 1, type: 1 },
{ id: 2, type: 2 },
{ id: 3, type: 3 },
];
// 找到第一个 type === 2 的对象
const targetItem = dataList.find(item => item.type === 2);
// 转换为布尔值判断是否存在
const hasType2 = !!targetItem;
console.log(targetItem); // 输出:{ id: 2, type: 2 }
console.log(hasType2); // 输出:true
核心说明
find()的核心是「查找并返回元素」,而非直接返回布尔值;!!targetItem是「双重取反」操作,将对象/undefined转换为true/false,是前端常用的布尔值转换技巧;- 仅需判断存在性时,优先用
some();需要获取目标对象时,用find()更高效(无需二次遍历)。
三、兼容方案:for 循环
如果需要兼容极低版本浏览器(如 IE8 及以下,不支持 ES5 数组方法),可以使用最基础的 for 循环实现,逻辑简单且无 API 兼容问题。
代码示例
const dataList = [
{ id: 1, type: 1 },
{ id: 2, type: 2 },
{ id: 3, type: 3 },
];
let hasType2 = false;
// 手动遍历数组
for (let i = 0; i < dataList.length; i++) {
// 找到 type === 2 的元素后,标记为 true 并终止循环
if (dataList[i].type === 2) {
hasType2 = true;
break;
}
}
console.log(hasType2); // 输出:true
核心说明
- 手动控制遍历过程,找到目标元素后通过
break终止循环,避免无效遍历; - 代码量稍多,但兼容性最好,适合老旧项目场景。
四、边界情况处理:避免属性缺失报错
实际业务中,数组中的对象可能存在「缺失 type 属性」的情况(比如后端返回数据不规范),直接判断 item.type === 2 会导致逻辑异常,建议增加属性存在性校验:
const dataList = [
{ id: 1 }, // 无 type 属性
{ id: 2, type: 2 },
{ id: 3, type: 3 },
];
// 增加 type 属性存在性判断
const hasType2 = dataList.some(item => item.hasOwnProperty("type") && item.type === 2);
console.log(hasType2); // 输出:true
核心说明
item.hasOwnProperty('type')先判断对象是否自身拥有type属性(排除原型链上的属性);- 先校验属性存在性,再判断值,可避免
undefined === 2的无效判断,也能防止极端场景下的报错。
总结
- 优先选
Array.some():语义化最强、性能最优,专门解决「是否存在满足条件元素」的问题; - 需要获取目标对象选
Array.find():一次遍历既获取对象,又可转换为布尔值判断存在性; - 兼容旧环境选
for循环:无 API 依赖,逻辑基础但代码量稍多; - 注意边界:对象可能缺失目标属性时,增加
hasOwnProperty校验,避免逻辑异常。
以上方法可覆盖绝大多数业务场景,根据项目的浏览器兼容要求、是否需要获取目标对象等条件选择即可。