面试官:怎么实现一个对象过滤器?😅

假如你面前的是B站面试官

问:怎么实现一个函数能按指定类型过滤出数组中的对象?

我:?

一、基础实现

核心需求 :实现函数filterByType(arr, type),从数组中筛选出指定类型的元素

typescript 复制代码
function filterByType(arr, type) {
    return arr.filter(item => {
        if (type === 'array') return Array.isArray(item)
        return typeof item === type
    })
}

关键缺陷:

  1. 无法正确处理null(typeof null === 'object')
  2. 对象类型包含数组等特殊类型
  3. 缺少对现代JS类型(如Symbol)的支持

二、类型深度解析

JavaScript类型判断的复杂性体现在:

  • 原始类型 :undefined, boolean, number, string, bigint, symbol
  • 对象类型 :object, function, array, Date等
  • 特殊值 :null(伪对象类型)

类型判断方法对比:

方法 优点 缺点
typeof 快速判断原始类型 无法区分null/array
instanceof 判断构造函数 跨iframe失效
Object.prototype.toString 精确判断所有类型 需要处理返回字符串
Array.isArray 专用数组判断 仅适用于数组

什么叫跨iframe失效

在 JavaScript 中,​跨执行环境失效 特指 instanceof 等类型判断方法在不同全局作用域(如 iframe、Web Worker、Node.js 的 vm 模块等)中失效的现象。其本质原因是:​不同执行环境拥有独立的内置构造函数,导致原型链无法匹配。

三、进阶实现

typescript 复制代码
function filterByType(arr, type) {
    return arr.filter(item => {
        if (type === 'array') {
            return Array.isArray(item);
        } else if (type === 'null') {
            return item === null;
        } else if (type === 'object') {
            return item !== null && typeof item === 'object' && !Array.isArray(item);
        } else {
            return typeof item === type;
        }
    });
}

四、总结

希望能给各位大佬以后面B站的时候一点点点点点小启发

相关推荐
时间的拾荒人3 小时前
Qt 界面优化:绘图详解 —— 从基础图形到图片处理
开发语言·qt·面试
小宋10215 小时前
A2UI从零实战:Agent安全生成交互界面与事件回传
javascript·人工智能·安全·交互
沐言人生5 小时前
又一个神级考公脑库-22,375篇真题终于按考点整理了
后端·面试
大包子5 小时前
structuredClone vs lodash.cloneDeep:核心差异与选型指南
javascript·vue.js
for_ever_love__5 小时前
MySQL 高频面试题 30 问:索引、事务、锁、日志、主从与分库分表(MySQL 8.0 版)
java·数据库·spring boot·mysql·spring cloud·面试·总结
lerhxx5 小时前
AI 应用中的上下文管理 —— 从"上下文窗口"到"分层压缩"的工程实践
前端·javascript
Mahut6 小时前
我在 Mac 上做了个本地剪辑器
javascript·架构·产品
救救孩子把6 小时前
Agent面试题-记忆治理-上下文-多Agent协作与工程落地
面试·agent·多agent·agent记忆·agent面试题·上下文治理
汉堡大王95276 小时前
GPT-6 上线 48 小时,我扒开了 Intelligent UI 的运行机制:DIL、沙箱 Worker 和一个 React 式协调器
前端·javascript·后端
hai_android6 小时前
Chat 聊天模块功能总结
前端·javascript·vue.js