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

假如你面前的是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. 无法正确处理nulltypeof 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站的时候一点点点点点小启发

相关推荐
鹏程十八少8 分钟前
破解Android悬浮窗遮挡无障碍服务难题:我在可见即可说上踩过的坑
android·前端·面试
Kapaseker11 分钟前
前端已死...了吗
android·前端·javascript
Moment20 分钟前
富文本编辑器技术选型,到底是 Prosemirror 还是 Tiptap 好 ❓❓❓
前端·javascript·面试
xkxnq24 分钟前
第二阶段:Vue 组件化开发(第 18天)
前端·javascript·vue.js
晓得迷路了26 分钟前
栗子前端技术周刊第 112 期 - Rspack 1.7、2025 JS 新星榜单、HTML 状态调查...
前端·javascript·html
怕浪猫29 分钟前
React从入门到出门 第五章 React Router 配置与原理初探
前端·javascript·react.js
鹏多多35 分钟前
前端2025年终总结:借着AI做大做强再创辉煌
前端·javascript
哈__38 分钟前
React Native 鸿蒙跨平台开发:Vibration 实现鸿蒙端设备的震动反馈
javascript·react native·react.js
WebGISer_白茶乌龙桃41 分钟前
Cesium实现“悬浮岛”式,三维立体的行政区划
javascript·vue.js·3d·web3·html5·webgl
不一样的少年_1 小时前
产品催: 1 天优化 Vue 官网 SEO?我用这个插件半天搞定(不重构 Nuxt)
前端·javascript·vue.js