最后
由于文档内容过多,为了避免影响到大家的阅读体验,在此只以截图展示部分内容
2、空值合并运算符(?? )
大家可能遇到过,如果一个变量是空,需要给它赋值为一个默认值的情况。通常我们会这样写:
let num = number || 222
但是,以上的代码会有一个 bug。如果realCount
的值是0
,则会被当作取不到其值,会取到'无法获取'
这个字符串。如果想要做到这一点,在这之前就只能使用三元运算符来实现:
let num = (number !== undefined) ? number : 222
但现在可以使用了??
运算符了,它只有当操作符左边的值是null
或者undefined
的时候,才会取操作符右边的值:
let num = number ?? 222
而且该运算符也支持短路特性:
const x = a ?? getDefaultValue()
// 当 a
不为 undefined
或 null
时,getDefaultValue
方法不会被执行
但需要注意一点,该运算符不能与 AND 或 OR 运算符共用,否则会抛出语法异常:
a && b ?? “default” // SyntaxError
这种代码的歧义比较严重,在不同人的理解中,可能有的人觉得按(a && b) ?? "default"
运行是合理的,而另外一些人却觉得按a && (b ?? "default")
运行才对,因此在设计该运算符时就干脆通过语法上的约束来避免了这种情况。如果确实需要在同一个表达式中同时使用它们,那么使用括号加以区分即可:
(a && b) ?? “default”
这个操作符的主要设计目的是为了给可选链操作符提供一个补充运算符,因此通常是和可选链操作符一起使用的:
const x = a?.b ?? 0;
下面介绍下ES11新增的可选链操作符(?.
)
3、可选链接
当我们需要尝试访问某个对象中的属性或方法而又不确定该对象是否存在时,该语法可以极大的简化我们的代码,比如下面这种情况:
const el = document.querySelector(“.class-a”)
const height = el.clientHeight
当我们并不知道页面中是否真的有一个类名为 class-a 的元素,因此在访问clientHeight
之前为了防止bug产生需要先进行一些判断:
const height = el ? el.clientHeight : undefined
上面的写法虽然可以实现,但是的确有人会觉得麻烦,而使用「可选链操作符」 ,就可以将代码简化成如下形式:
const height = el?.clientHeight
下面介绍常用的使用场景:
属性访问
需要获取某个对象中的属性,就都可以使用该语法:
a?.b
a?.[x]
上面的代码中,如果 a 为undefined
或null
,则表达式会立即返回undefined
,否则返回所访问属性的值。也就是说,它们与下面这段代码是等价的:
a == null ? undefined : a.b
a == null ? undefined : a[x]
方法调用
在尝试调用某个方法时,也可以使用该语法:
a?.()
同样是如果 a 为undefined
或null
,则返回undefined
,否则将调用该方法。不过需要额外注意的是,该操作符并不会判断 a 是否是函数类型,因此如果 a 是一个其它类型的值,那么这段代码依然会在运行时抛出异常。
访问深层次属性
在访问某个对象较深层级的属性时,也可以串联使用该操作符:
a?.b?.[0]?.()?.d
可能有人会懒得先去判断是否真的有必要,就给访问链路中的每个属性都加上该操作符。但类似上面代码中所展示的那样,这种代码可读性比较差。而且若真的有一个应当存在的对象因为某些 bug 导致它没有存在,那么在访问它时就应当是抛出异常,这样可以及时发现问题,而不是使它被隐藏起来。建议只在必要的时候才使用可选链操作符。
4、BigInt
在 ES 中,所有 Number 类型的值都使用 64 位浮点数格式存储,因此 Number 类型可以有效表示的最大整数为 2^53。而使用新的 BigInt 类型,可以操作任意精度的整数。
有两种使用方式:1、在数字字面量的后面添加后缀n
;2、使用其构造函数BigInt
const bigInt = 9007199254740993n
const bigInt = BigInt(9007199254740992)
// 在超过 Number 最大整数限制时,我们也可以改为传入一个可能被正确解析的字符串
const bigInt = BigInt(‘9007199254740993’)
和 Number 类似,BigInt 也支持+
、-
、、**
、%
运算符:
3n + 2n // => 5n
3n 2n // => 6n
3n 2n // => 9n
3n % 2n // => 1n
但因为 BigInt 是纯粹的整数类型,无法表示小数位,因此 BigInt 的除法运算(/
)的结果值依然还是一个整数,即向下取整:
const bigInt = 3n;
bigInt / 2n; // => 1n,而不是 1.5n
同样也位支持位运算符,除了无符号右移运算符:
1n & 3n // => 1n
1n | 3n // => 3n
1n ^ 3n // => 2n
~1n // => -2n
1n << 3n // => 8n
1n >> 3n // => 0n
1n >>> 3n // Uncaught TypeError: BigInts have no unsigned right shift, use >> instead
BigInt 可以和字符串之间使用+
运算符连接
1n + ’ Number’ // => 1 Number
'Number ’ + 2n // => Number 2
下面这些场景不支持使用BigInt:
1、BigInt 无法和 Number 一起运算,会抛出类型异常
1n + 1
// Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
2、一些内置模块如 Math 也不支持 BigInt,同样会抛出异常
Math.pow(2n, 64n)
// Uncaught TypeError: Cannot convert a BigInt value to a number
3、BigInt 和 Number 相等,但并不严格相等,但他们之间可以比较大小
1n 1 // => true
1n = 1 // => false
但他们之间是可以比较大小的:
1n < 2 // => true
1n < 1 // => false
2n > 1 // => true
2n > 2 // => false
而且在转换为 Boolean 值时,也和 Number 一样,0n
转为 false
,其它值转为 true
:
!!0n // => false
!!1n // => true
另外两者之间只能使用对方的构造函数进行转换:
Number(1n) // => 1
BigInt(1) // => 1n
但两者之间的转换也都有一些边界问题:
// 当 BigInt 值的精度超出 Number 类型可表示的范围时,会出现精度丢失的问题
Number(9007199254740993n)
// => 9007199254740992
// 当 Number 值中有小数位时,BigInt 会抛出异常
BigInt(1.1)
// VM4854:1 Uncaught RangeError: The number 1.1 cannot be converted to a BigInt because it is not an integer
配套地,在类型化数组中也提供了与 BigInt 对应的两个数组类型:BigInt64Array
和BigUint64Array
:
const array = new BigInt64Array(4);
array[0] // => 0n
array[0] = 2n
array[0] // => 2n
但因为每个元素限定只有 64 位,因此即便使用无符号类型,最大也只能表示 2^64 - 1:
const array = new BigUint64Array(4);
array[0] = 2n 64n
array[0] // => 0n
array[0] = 2n ** 64n - 1n
array[0] // => 18446744073709551615n
5、globalThis
浏览器:window、worker:self、node:global
在浏览器环境中,我们可以有多种方式访问到全局对象,最常用到的肯定是 window
,但除此之外还有 self
,以及在特殊场景下使用的 frames
、paraent
以及 top
。
我们通常不怎么需要关心 window
和 self
之间的区别,但如果使用 Web Worker,那就应当了解 window
是只在主线程中才有的全局属性,在 Worker 线程中,我们需要改为使用 self
。
而在 node.js 环境中,我们需要使用 global
,至于像 JSC.js 这种更小众的环境中,则需要使用 this
。
在一般的开发工作中,可能很少需要访问全局环境,而且大多时候也只需要基于一种环境进行开发,所以不太需要处理这种麻烦的问题。但是对于 es6-shim 这种需要支持多种环境的基础库来说,它们需要解决这个问题。
早先,我们可以通过下面这段代码较为方便地拿到全局对象:
const globals = (new Function(‘return this;’))()
但受到 Chrome APP 内容安全策略的影响(为缓解跨站脚本攻击的问题,该政策要求禁止使用 eval 及相关的功能),上面这段代码将无法在 Chrome APP 的运行环境中正常执行。
无奈之下,像 es6-shim
这种库就只能穷举所有可能的全局属性:
var getGlobal = function () {
// the only reliable means to get the global object is
// Function('return this')()
// However, this causes CSP violations in Chrome apps.
if (typeof self ! ‘undefined’) { return self; }
if (typeof window ! ‘undefined’) { return window; }
最后前端到底应该怎么学才好?
如果你打算靠自己摸索自学,那么你首先要了解学习前端的基本大纲,这是你将要学习的主要内容,理解以及掌握好这些内容,便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程,作为初学者最好的方式就是看视频教程学习,初学者容易理解接受。
不要选择买书学习,这样的方式没有几个人能学会,基本都是看不下去书,也看不懂书。如果喜欢看书的学弟,可以买一些经典的书籍作为辅助即可,主要还是以看教程为主。每天抽出固定几个小时学习,做好长期学习的准备。学习编程并不是每天光看视频,你学习编程最重要的目的是为了编写软件产品,提供给大众使用,所以用手写出代码实现功能才是我们要做的事情。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
19539cde243f97.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)