Object.is 和 === 有什么区别？NaN 和 +0、-0 怎么比？

先看两者不一样的地方

把所有差异放在一段代码里，一次看全。

const n = NaN
console.log(n === n)             // false
console.log(Object.is(n, n))     // true
console.log(+0 === -0)           // true
console.log(Object.is(+0, -0))   // false

const a = { id: 1 }
const b = { id: 1 }
console.log(a === b, Object.is(a, b)) // 内容一样，但不是同一个对象
const c = a
console.log(a === c, Object.is(a, c)) // 同一个引用

false
true
true
false
false false
true true

为什么 === 会有这两个怪癖

这两处都来自 IEEE 754 浮点数标准，JavaScript 的数字就是按它实现的。

NaN 表示「不是一个有效数字」，比如 0 / 0、Number('abc') 的结果。标准规定 NaN 和任何值比较都不相等，包括它自己。所以判断一个值是不是 NaN，不能写 x === NaN，要用 Number.isNaN(x)，或者 Object.is(x, NaN)。

-0 在浮点数里有独立的符号位，和 +0 是两个不同的值，但标准规定它们比较时相等。大多数时候这没问题，可有些计算会暴露差别：1 / +0 是 Infinity，1 / -0 是 -Infinity。比如做一个带方向的速度动画，速度从负数减到 0 时得到的是 -0，符号代表方向，这时就要用 Object.is(v, -0) 才能区分出来。

在项目里哪儿会用到 Object.is

日常写业务判断，=== 足够用了。Object.is 更多出现在框架内部，用来回答「这个值到底变了没有」。

React 用它判断状态有没有变化

React 的 useState 在 setState 时，会用 Object.is 比较新旧值，相同就跳过这次更新；useEffect、useMemo 的依赖数组也是逐项用 Object.is 比较。所以状态是 NaN 时，再 setState(NaN) 不会触发重复渲染，用 === 的话会认为变了。反过来，直接修改对象再 setState 同一个引用，React 会认为没变，页面不更新，这就是为什么要写 setUser({ ...user, name }) 生成新对象。

第三种规则：SameValueZero

Array.prototype.includes、Map 的键、Set 的成员用的是 SameValueZero，它介于两者之间：NaN 等于自己，但 +0 和 -0 也相等。所以 [NaN].includes(NaN) 是 true，而老的 [NaN].indexOf(NaN) 返回 -1，因为 indexOf 用的是 ===。

容易答错的地方

以为 Object.is 能比较对象内容

Object.is 不是深比较。Object.is({ a: 1 }, { a: 1 }) 是 false，和 === 一样。要比较内容得自己递归比较字段，或者用 lodash 的 isEqual。

以为 Object.is 能完全替代 ===

它能替代，但没必要。业务代码里几乎不会遇到 -0，判断 NaN 也有更直白的 Number.isNaN。满篇 Object.is 反而让读代码的人以为这里有什么特殊的边界要处理。

把 isNaN 和 Number.isNaN 混着用

全局的 isNaN 会先把参数转成数字，所以 isNaN('abc') 是 true。Number.isNaN 不做转换，只有真的是 NaN 才返回 true，结果和 Object.is(x, NaN) 一致。

面试官还会怎么问？

把知识连起来