搜索文章

前端面试 P081:StrictMode 的检查与版本边界JavaScript 函数传参:值传递与对象引用前端面试 P018:手写柯里化与参数个数边界前端面试 P010:普通函数、箭头函数与 this前端面试 P088:Immer 草稿与结构共享前端面试 P006:对象遍历与属性键的选择前端面试 P009:执行上下文、调用栈与词法作用域前端面试 P094:SSE 分片解码与事件边界前端面试 P097:请求并发池、任务启动与失败释放前端面试 P076:Fiber 的协作调度与不可中断边界前端面试 P013:节流、防抖与取消待执行任务前端面试 P033:Object.create、描述符与共享属性前端面试 P057:Vue Router 配置、历史模式与导航前端面试 P030:构造函数与 new 的返回规则前端面试 P077:key、组件身份与状态重置前端面试 P039:同源策略、CORS 与请求是否发出前端面试 P032:instanceof、原型链与自定义判断前端面试 P047:Proxy 与 Vue 2 属性拦截的区别前端面试 P019:函数组合与同步数据管道前端面试 P004:手写深拷贝、循环引用与实现边界前端面试 P059:导航守卫、顺序与权限边界前端面试 P083:函数式更新、队列与纯度前端面试 P014:call、apply、bind 与模拟实现边界前端面试 P012:高阶函数、柯里化与部分应用前端面试 P041:事件委托、目标匹配与 React 事件前端面试 P048:track、trigger、动态依赖与清理前端面试 P066:自定义指令与 DOM 资源清理前端面试 P075:props 只读、状态归属与派生数据前端面试 P062:Pinia 创建、实例范围与使用前端面试 P073:JSX 编译、React 元素与表达式前端面试 P026:Promise 延迟与顺序任务队列前端面试 P016:纯函数、副作用与参数共享前端面试 P094:流式文本的 SSE 与 WebSocket 取舍前端面试 P064:storeToRefs 与 action 解构纠错前端面试 P044:Composition API 与组合式函数前端面试 P051:副作用清理与过期请求前端面试 P021:事件循环、微任务与渲染机会前端面试 P003:原始值、对象共享与赋值行为前端面试 P098:用户偏好存储、TTL 与命名空间前端面试 P056:插槽作用域与 slot props前端面试 P011:闭包、变量绑定与循环回调前端面试 P027:async 错误处理与 return await前端面试 P036:CSP、nonce 与防护边界前端面试 P007:隐式转换、ToPrimitive 与空数组比较前端面试 P035:继承方式对照与寄生组合式继承前端面试 P025:手写 Promise 的最小状态机前端面试 P079:受控表单与非受控输入前端面试 P072:虚拟 DOM 的价值与性能边界前端面试 P005:数组方法、可变性与回调副作用前端面试 P100:Proxy 沙箱为何不是安全边界前端面试 P040:发布订阅、事件总线与退订前端面试 P053:props、组件事件与 v-model 约定前端面试 P008:相等比较、NaN 与 Object.is前端面试 P065:Pinia 最小变更与对象替换的取舍前端面试 P087:Redux 单向数据流与状态边界前端面试 P002:数据类型与 typeof 的陷阱前端面试 P085:useReducer 与 useState 的实际取舍前端面试 P078:React 合成事件与旧事件池纠错前端面试 P025:Promise 解析过程与实现验收前端面试 P043:Vue 渐进式与声明式 UI前端面试 P091:SWR、TanStack Query 与服务端缓存前端面试 P074:函数组件快照与类实例的输出纠错前端面试 P071:UI 是状态映射与渲染纯度前端面试 P054:provide、inject 与跨层级依赖前端面试 P061:何时引入全局状态管理前端面试 P097:请求去重、缓存键与过期策略前端面试 P086:Context 拆分与订阅更新边界前端面试 P024:Promise 并发组合与空输入边界前端面试 P089:Redux middleware、next 与异步返回值前端面试 P022:Promise 状态、链式调用与错误传播前端面试 P084:状态提升、单一来源与范围选择前端面试 P034:class、super 与语法糖的边界前端面试 P058:路由参数、query 与组件 props前端面试 P020:定时器延迟、轮询重叠与清理前端面试 P029:对象原型、prototype 与属性查找前端面试 P095:AI SDK、编排框架与生成 UI 工具前端面试 P092:Signals、细粒度依赖与 React 集成边界前端面试 P046:Vue 响应式陷阱与 ref 自动解包纠错前端面试 P090:Zustand、Jotai 与状态作用域前端面试 P100:微前端 JS 隔离方案与资源生命周期前端面试课程:学习目录与纠错记录前端面试 P023:async、await、异步恢复与并发前端面试 P068:Vue 2 与 Vue 3 的列表 diff 区别前端面试 P015:IIFE、作用域隔离与现代模块前端面试 P063:Pinia 状态、getter 与 action前端面试 P052:Vue 条件、列表与表单指令前端面试 P050:Vue 生命周期、DOM 时机与 SSR前端面试 P060:路由 meta、合并与界面配置前端面试 P045:ref、reactive、computed 与 watch前端面试 P096:令牌无感刷新、重试与安全边界前端面试 P093:MCP 架构与前端集成场景前端面试 P080:组合、children 与自定义 Hook前端面试 P082:useState 更新请求、快照与批处理前端面试 P067:Vue 模板编译与运行时边界前端面试 P031:手写 new 与 Reflect.construct 的区别前端面试 P069:nextTick 等待 DOM 刷新与绘制的区别前端面试 P055:默认插槽、具名插槽与内容接口前端面试 P038:嵌套定时器的最小延迟与调度选择前端面试 P099:倒计时截止时间、漂移与完成事件前端面试 P019:记忆化缓存与递归调用的纠错前端面试 P049:Vue 与 React 的更新范围和批处理前端面试 P004:浅拷贝、深拷贝与 structuredClone前端面试 P042:Vue 面试导学与学习顺序前端面试 P096:共享刷新 Promise 与并发失败恢复前端面试 P070:React 面试导学与复习主线前端面试 P028:异步输出顺序的逐步推演前端面试 P001:var、let、const 与暂时性死区前端面试 P037:内存泄漏的快照与引用链排查前端面试 P017:手写 bind、重复绑定与构造调用你好,这里是 Henry 的自留地给想法找一个落脚的地方,也给那些解决过的问题留下一点记录。
Esc 关闭
全部文章

前端面试 P007:隐式转换、ToPrimitive 与空数组比较

来源:方格前端讲面试 · 7.隐式类型转换有哪些坑?,18 分 40 秒。

回看定位:03:41 ToPrimitive · 04:59 转换顺序的原说法 · 09:03 空数组比较 · 16:31 falsy 列表

隐式转换发生在哪里

算术、关系比较、宽松相等、条件判断等场景有不同转换规则。不要用一句“都先转换成数字”解释所有操作,尤其要区分对象转原始值与布尔判断。

对象转原始值的顺序:需要纠正视频

视频约 04:59 说“没有明确期望时默认先 toString”,不适用于普通对象。准确过程是:

  1. 先查找可用的 Symbol.toPrimitive 方法,它可能来自原型链;以 'number'、'string' 或 'default' 作为 hint 调用。
  2. 没有该方法时,普通对象在 hint 为 number 或 default 时先 valueOf,返回的仍是对象才尝试 toString。
  3. hint 为 string 时先 toString,再 valueOf。两者都不能得到原始值时抛 TypeError。

Date 等对象有专门的转换行为。数组在默认情况下并不是直接跳过 valueOf;而是它的 valueOf 返回数组本身,随后 toString 才给出字符串。

const obj = { valueOf: () => 7, toString: () => 'text' };
console.log(obj + 1); // 8
console.log(String(obj)); // text

[] == ![] 为什么为 true

[] == ![]
[] == false    // 空数组是 truthy,取反得到 false
[] == 0        // 宽松比较把布尔值转成数字
'' == 0        // 数组转原始值,得到空字符串
0 == 0         // 字符串转数字
true

空数组在条件判断中为真,并不意味着 [] == true 为真;布尔上下文和 == 使用不同算法。

加号与显式转换

console.log(1 + '2'); // '12'
console.log(true + true); // 2
console.log(1 + null); // 1
console.log(1 + undefined); // NaN
console.log(Number('')); // 0
console.log(Number('12px')); // NaN
console.log(parseInt('12px', 10)); // 12

加号先把对象转成原始值,存在字符串时做拼接;否则按数值规则计算。BigInt 和 Number 不能直接混合加法。Number 与 parseInt 的用途也不同:前者要求整体转换,后者可以解析开头的数字片段。

falsy 列表不能漏掉 BigInt

视频用“六个 falsy 值”概括,需补充:false、undefined、null、0、-0、0n、NaN、空字符串。0 与 -0 常被合并讲解,但 0n 是独立需要注意的 BigInt 值。

普通对象和数组均为 truthy,布尔转换不会先调用它们的 valueOf 或 toString。浏览器还有 document.all 这个历史特例;日常业务不要利用它设计判断逻辑。

实际使用

对输入先明确验证和转换,使用 === 表达严格比较;不要靠背怪题替代理解各操作的规则。相等比较单独见 前端面试 P008:相等比较、NaN 与 Object.is。

依据:MDN:Symbol.toPrimitive、MDN:Falsy。

看看其他文章 →