关注【索引目录】服务号，更多精彩内容等你来探索！
JavaScript 提供了多种比较值的方法：==、===和Object.is。
大多数情况下都===足够好，但在某些极端情况下，结果可能会……令人惊讶。
这就是原因Object.is所在。
📌 什么时候Object.is推出的？
- 在ES6（ECMAScript 2015）
中引入。 -
设计为比更可靠的平等检查 ===。
🤔 我们为什么需要Object.is？
严格相等（===）在大多数情况下有效，但在两个棘手的情况下失败：
- NaN 比较
NaN === NaN // false ❌
Object.is(NaN, NaN); // true ✅- +0 对比 -0
+0 === -0 // true ❌
Object.is(+0, -0); // false ✅因此Object.is引入了修复这些怪癖的方法，并使平等检查更加精确。
🔑 比较==、===、 和Object.is
|
|
|
|
|
|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
✅ 您应该在哪里使用Object.is？
- 检测 NaN 值
const value = 0 / 0; // NaN
console.log(Object.is(value, NaN)); // true- 区分 +0 和 -0
console.log(Object.is(+0, -0)); // false- 浅层相等性检查
像 React 这样的框架用于 Object.is比较 props/state 并避免不必要的更新。
🌍 实际使用情况
1. React 状态更新
Object.isReact在检查新状态值是否与旧状态值不同时内部使用。
const [count, setCount] = useState(NaN);
// This won’t trigger a re-render
setCount(NaN); // Object.is(NaN, NaN) === true如果 React 仅使用===，这将不必要地触发渲染。
2. React.memo 浅层 prop 对比
React.memoObject.is在底层使用浅层平等。
const MyComponent = React.memo(({ value }) => {
console.log("Rendered");
return <div>{value}</div>;
});
<MyComponent value={NaN} /> // Rendered
<MyComponent value={NaN} /> // Not rendered again ✅当道具实际上“相同”时，这可以防止浪费渲染。
📝 结论
Object.is是 ES6 中引入的一个虽小但功能强大的新增功能。它的行为===与大多数情况类似，但有两个重要区别：
-
它认为 NaN等于NaN。 -
它将 +0和-0视为不同。
这些差异使其成为严格相等性不足的边缘情况的可靠选择。
虽然你可能不会每天都使用它，但它在像 React 这样的库中起着至关重要的作用，确保了比较的准确性并避免了不必要的工作。
关注【索引目录】服务号，更多精彩内容等你来探索！