【JS】复习和学习几个好用的js小知识

---

?.

可选链运算符

作用：深度调用，类似于a.b中的.，但是区别在于当a为undefined或者null时，

链式结果并不会报错，而是返回undefined。

a?.b 就可以理解为：
先对?.前面的a做个判断，a存在吗？
如果存在，就返回a.b
如果不存在,就返回undefined
1
2
3
4

举例：

var obj1 = { a: { b: 1 } };
console.log(obj1.a?.b); // 1

var obj2 = null;
console.log(obj2?.a) // undefined
1
2
3
4
5

可参考链式文档加深理解：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining
1

---

??

空值合并运算符

语法：a ?? b

作用：选取a或者b中不是null或undefined的值作为结果

表达式的结果：

1.如果a不是null也不是undefined，就返回a；

2.如果a是null或者undefined，而b不是null也不是undefined，就返回b；

3.如果a和b都是null和undefined中的一个，就返回undefined
1
2
3
4
5

示例：

0 ?? 1 // 0
'' ?? 1 // ''
1 ?? 2 // 1
null ?? 1 // 1
undefined ?? 2 // 2
null ?? undefined // undefined
undefined ?? null // undefined
1
2
3
4
5
6
7

查看官方文档，深入了解：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing
1

---

??=

逻辑空赋值

语法：x ??= y 当x为null或undefined时，把y的值赋给x；否则x的值不变

（如果此时b也是null或者undefined，x的结果就是undefined）。

示例：

var x = 0;
var y = 1;
x ??= y;
console.log(x) // 0
1
2
3
4

var a = null;
var b = 1;
a ??= b;
console.log(a); // 1
1
2
3
4

查看文档，深入了解：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_assignment
1

---

**

求幂

语法：a ** b，即a的b次方。类似于Math.pow(a, b)

它更强大的地方在于可以接受BigInts类型的数据。

示例：

2 ** 3 // 8
3 ** 2 // 9
2 ** 2 ** 3 // 256
2 ** (2 ** 3) // 256
(2 ** 2) ** 3 // 64 
- 2 ** 2 // Error: Unary operator used immediately before ...
- (2 ** 2) // -4
(-2) ** 2 // 4
1
2
3
4
5
6
7
8

通过示例可以得知，在使用时有两点需要特别注意的地方：

1. 2 ** 2 ** 3和2 ** (2 ** 3)是相等的，但是和(2 ** 2) ** 3不相等。
这意味着求幂运算是右结合的
2. 求幂运算前面不能直接写负号，不然会报语法错误
原因是在不同语言中，负号的计算优先级是不同的，
在js中，为避免语法混乱，这种写法被定义为非法的。
1
2
3
4
5

---

**=

顺便提下对应的幂等操作，**=

var a = 3
a **= 2;
console.log(a); // 9
1
2
3

---

arr.at

用于获取某个下标对应的值

作用和arr[index]相似，但是它的作用更强大。

因为它的参数可以是负数。

示例：

var arr = [5, 12, 8, 130, 44];
console.log(arr[-1]); // undefined
console.log(arr.at(-1)); // 44
1
2
3

---

arr.fill

用于填充数组内的元素会改变原数组

语法：arr.fill(item, start, end)

item是要填充的元素

start是开始填充的下标，默认从0开始

end是结束位置的下标，不含。默认是arr.length
1
2
3
4
5

示例：

var arr = new Array(3).fill(1);
console.log(arr); // [1, 1, 1]
1
2

var arr = [1, 2, 3, 4]
arr.fill('a', 2, 4);
console.log(arr); // [1, 2, 'a', 'a']
1
2
3

---

arr.flat

用于拉平数组，就是将多重数组去掉多少层返回一个新数组

语法：arr.flat(number)

如果参数是Infinity，就可以将多维数组拉平为一维数组。

示例：

var arr = [0, 1, 2, [[[[3, 4]]]]];
var arr1 = arr.flat(Infinity);
console.log(arr1); // [0, 1, 2, 3, 4]
1
2
3

---