下面是详细讲解“你可能从未使用过的11+个JavaScript特性(小结)”的攻略。
下面是详细讲解“你可能从未使用过的11+个JavaScript特性(小结)”的攻略。
介绍
本文将讲解11+个在JavaScript中常被忽略的特性。包括可选链操作符、空合并运算符、BigInt、Promise.allSettled()、Array.flat()、Array.flatMap()、Object.fromEntries()、String.trimStart()和trimEnd()、相等运算符(==和!=)、严格相等运算符(===和!==)、null赋值运算符(??)。
可选链操作符
可选链操作符(?.)是一个新的操作符,可以帮助我们避免在链式调用中因为某个属性或方法不存在而导致的TypeError问题。示例代码如下:
const person = {
name: 'John',
pet: {
type: 'dog',
name: 'Rufus'
}
};
console.log(person.pet?.name); // "Rufus"
console.log(person.pet?.age); // undefined
console.log(person.pet.age); // throws TypeError
空合并运算符
空合并运算符(??)可以帮助我们在对nullish(null或undefined)值进行取值操作时简化代码。示例代码如下:
const a = null;
const b = undefined;
const c = 'Hello';
console.log(a ?? b); // undefined
console.log(a ?? c); // "Hello"
console.log(b ?? c); // "Hello"
BigInt
BigInt可以帮助我们处理大整数(超过2的53次方-1,也就是JavaScript的Number类型的最大值)。示例代码如下:
const bigInt1 = BigInt(Number.MAX_SAFE_INTEGER) + 1n;
const bigInt2 = 9007199254740993n;
console.log(bigInt1); // 9007199254740993n
console.log(bigInt2); // 9007199254740993n
console.log(bigInt1 === bigInt2); // true
Promise.allSettled()
Promise.allSettled()可以帮助我们同时处理多个Promise,并且不会因为其中某个Promise失败而导致整个操作失败。示例代码如下:
const promises = [
Promise.resolve(1),
Promise.reject('error'),
Promise.resolve(3)
];
Promise.allSettled(promises)
.then(results => console.log(results))
.catch(error => console.log(error));
// 输出:
// [
// {status: "fulfilled", value: 1},
// {status: "rejected", reason: "error"},
// {status: "fulfilled", value: 3}
// ]
Array.flat()
Array.flat()可以帮助我们将多维数组转化为一维数组。示例代码如下:
const arr = [1, [2, [3, [4]]]];
console.log(arr.flat()); // [1, 2, [3, [4]]]
console.log(arr.flat(2)); // [1, 2, 3, [4]]
Array.flatMap()
Array.flatMap()可以帮助我们在映射数组的同时展开其结果。示例代码如下:
const arr = ['1 2', '3 4', '5 6'];
const newArray = arr.flatMap(str => str.split(' ').map(Number));
console.log(newArray); // [1, 2, 3, 4, 5, 6]
Object.fromEntries()
Object.fromEntries()可以将由键值对组成的二维数组转化为对象。示例代码如下:
const entries = [['a', 1], ['b', 2], ['c', 3]];
console.log(Object.fromEntries(entries)); // {a: 1, b: 2, c: 3}
String.trimStart()和trimEnd()
String.trimStart()和trimEnd()可以帮助我们去除字符串开头和结尾的空格。示例代码如下:
const str = ' hello world ';
console.log(str.trimStart()); // "hello world "
console.log(str.trimEnd()); // " hello world"
相等和严格相等运算符
相等运算符(==和!=)和严格相等运算符(===和!==)可以帮助我们判断两个值是否相同。其中,严格相等运算符在比较时会同时比较变量的值和类型。示例代码如下:
const num1 = 1;
const num2 = '1';
console.log(num1 == num2); // true
console.log(num1 === num2); // false
null赋值运算符
null赋值运算符(??)可以帮助我们对变量进行nullish判断,并在变量不存在或者为nullish时进行默认值的赋值操作。示例代码如下:
const a = null;
const b = undefined;
const c = 'Hello';
console.log(a ?? 'default'); // 'default'
console.log(b ?? 'default'); // 'default'
console.log(c ?? 'default'); // 'Hello'
结论
在JavaScript开发中,有很多看起来不起眼的特性其实可以极大地提高代码的质量和效率。希望你能够通过本文学到一些新的技巧。
本文标题为:你可能从未使用过的11+个JavaScript特性(小结)
基础教程推荐
- mall整合SpringSecurity及JWT认证授权实战下 2023-01-18
- PostConstruct注解标记类ApplicationContext未加载空指针 2023-06-30
- 5种Java中数组的拷贝方法总结分享 2023-03-21
- Java语言中的文件数据流示例详解 2023-07-01
- springboot中使用FastJson解决long类型在js中失去精度的问题 2023-01-08
- SpringBoot前后端分离实现个人博客系统 2022-12-16
- java – Hibernate比sql查询慢1000倍 2023-11-07
- 线上Spring CPU 高负载解决思路详解 2023-05-14
- 告诉你为什么 ThreadLocal 可以做到线程隔离 2023-03-21
- response.setHeader参数、用法的介绍 2023-12-16