你可能从未使用过的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开发中，有很多看起来不起眼的特性其实可以极大地提高代码的质量和效率。希望你能够通过本文学到一些新的技巧。