JavaScript 中 ==、===、Object.is 以及 null、undefined、undeclared 的区别

1.在JavaScript 当中,===== 与Object.is()的区别

在JavaScript 当中有许多可以比较相等与否的方法。其中最常见的三个分别是**===(严格比较) ==(松散比较),以及 Object.is(同值比较)**。

1.1 ==松散比较(loose equality)

==在比较两个值之前,会先强制转换数据类型,变成两者可以比较的形式。

如下示例:

javascript 复制代码
console.log(1 == "1"); // true
console.log(0 == false); // true
console.log(undefined == null); // true

因为会强制转换型别,==会带给开发者一些困扰。因此多数的情况,不建议使用==

1.2 严格比较(strict equality)

===不会强制转换型别与值,所以如果是不同型别,比较两者会回传false。不同值的话一样会回传false,===的 JS 设计初衷是判断数值是否相同。

不过有两个情况例外:

  • 当我们比较+0-0时,严格比较会回传true
  • 以及比较NaNNaN会是false。而这两个状况则是同值比较Object.is派上用场的时候。
javascript 复制代码
+0 === -0; // true
NaN === NaN; // false

1.3 Object.is同值比较(same-value equality)

同值比较顾名思义是在比较两个值是不是相等。虽然它是Object 开头,但比较的可以是任意的两个值。例如:

javascript 复制代码
console.log(Object.is(1, 1)); // true
console.log(Object.is(1, "1")); // false

上面提到的两种在===时遇到的问题,可以透过Object.is有效分辨

javascript 复制代码
console.log(Object.is(+0, -0)); // false
console.log(Object.is(NaN, NaN)); // true

=== +0 和-0 是 true,是因为比较的是值,就是 0 这个值,而不关心他的方向,Object.is 关心了他了方向,因为方向是不同的,所以 object.is 是false。

===中的两个NaN 的比较,NaN 是一种失败状态,Not a Number,但是失败的原因是可能是不同的,所以= ==中是 false。但是在 object.is语义中,规定了所有的 NaN 都表示一种值状态,所以是 true。

不过如果要有效分辨NaN,在JavaScript 有一个方法叫isNaN是可以使用的。假如对于Object.is感到陌生,可以选择用Number.isNaN

2.JavaScript null、undefined 与undeclared 的区别?

2.1 undefined 与null 的区别 ?

undefined表示还未定义值,所以当一个变数被宣告但还未被赋予任何值之前 ,这个变数就会是undefined,可以理解为「尚未」。

null代表的是一个变数的空值,可以理解为「没有」

undefinednull在JavaScript 中,都是属于原始数据类型(primitive data types) 之一,也就像任何其他数据类型(data types),例如:stringnumber一样,可以被赋予在变数上。两者在使用上,两者会有不同的意义。

举例来说,当前端要向后端索取数据时,因为需要等待数据回传,所以某个变数一开始可能是undefined,当数据回来时,就会变成该数据类型。以下面的例子来说,我们有个变量users,定义它的类型为

javascript 复制代码
UserDTO[] | undefined

而不是

javascript 复制代码
UserDTO[] | null

正是因为在拿到资料前,users是「尚未」。

javascript 复制代码
type UserDTO = {
  id: string,
  firstName: string,
  lastName: string,
  profilePicture: string | null,
};

const users: UserDTO[] | undefined = await fetchUsers();

反之亦然,上面的例子中,当拿到了users,有些使用者没有照片,因为是「没有」,所以profilePicture的类型是

javascript 复制代码
profilePicture: string | null;

而不是

javascript 复制代码
profilePicture: string | undefined;

2.2 undefined 与undeclared 的区别 ?

undefined:已经声明了,但还没值

undeclared:压根没声明过,JS 根本不知道它是谁

javascript 复制代码
let a;
console.log(a); // undefined
typeof a; // "undefined" 合法,不报错
javascript 复制代码
console.log(b);
ReferenceError: b is not defined //undeclared 是一种代码错误状态
相关推荐
利刃大大7 小时前
【Vue】自定义指令directives && 指令钩子 && IntersectionObserver
前端·javascript·vue.js
共享家952713 小时前
搭建 AI 聊天机器人:”我的人生我做主“
前端·javascript·css·python·pycharm·html·状态模式
Halo_tjn14 小时前
基于封装的专项 知识点
java·前端·python·算法
摘星编程15 小时前
OpenHarmony环境下React Native:自定义useTruncate文本截断
javascript·react native·react.js
Duang007_15 小时前
【LeetCodeHot100 超详细Agent启发版本】字母异位词分组 (Group Anagrams)
开发语言·javascript·人工智能·python
2601_9498683616 小时前
Flutter for OpenHarmony 电子合同签署App实战 - 主入口实现
开发语言·javascript·flutter
m0_7482299916 小时前
Vue2 vs Vue3:核心差异全解析
前端·javascript·vue.js
C澒17 小时前
前端监控系统的最佳实践
前端·安全·运维开发
xiaoxue..17 小时前
React 手写实现的 KeepAlive 组件
前端·javascript·react.js·面试
摘星编程17 小时前
在OpenHarmony上用React Native:自定义useHighlight关键词高亮
javascript·react native·react.js