随着 JavaScript 不断发展，新的语言特性和 API 不断推出，让我们的代码变得更加简洁、易读和易维护。ES11（ES2020）是 JavaScript 的最新版本，其中包含了一些新特性，可以帮助我们改善代码的可读性，并更好地处理 NaN 值。本文将介绍这些新特性，并提供示例代码以帮助您更好地理解。
可选链操作符
在 JavaScript 中，我们经常需要访问对象的属性或方法。但是，如果一个对象不存在，我们就需要使用繁琐的 if 语句来检查它是否存在。例如：
if (obj && obj.prop && obj.prop.method) {
obj.prop.method();
}这种写法不仅繁琐，而且容易出错。ES11 引入了可选链操作符（?.），可以让我们更方便地访问对象的属性或方法。例如：
obj?.prop?.method?.();
这样，只有在 obj、obj.prop 和 obj.prop.method 都存在时，才会调用 obj.prop.method() 方法。如果其中任何一个不存在，就会直接返回 undefined，而不会抛出 TypeError 异常。
空值合并操作符
在 JavaScript 中，我们经常需要使用 || 运算符来提供默认值。例如：
const value = input || defaultValue;
但是，如果 input 的值为 falsy 值（例如 false、0、''、null 或 undefined），则会使用默认值。这可能不是我们想要的行为。ES11 引入了空值合并操作符（??），可以更好地处理这种情况。例如：
const value = input ?? defaultValue;
这样，只有当 input 的值为 null 或 undefined 时，才会使用默认值。如果 input 的值为 false、0、'' 或其他 falsy 值，仍然会使用 input 的值。
数组的 flatMap 方法
在 JavaScript 中，我们经常需要对数组进行变换操作。例如，我们可能需要将一个二维数组展开成一维数组。在 ES10 中，我们可以使用 flat 方法来实现这一目的。例如：
const arr = [[1, 2], [3, 4]]; const flattened = arr.flat(); // [1, 2, 3, 4]
但是，如果我们需要在展开后的数组上进行映射操作，就需要使用 map 和 flat 两个方法。例如：
const arr = [[1, 2], [3, 4]]; const mapped = arr.map((subArr) => subArr.map((num) => num * 2)); const flattened = mapped.flat(); // [2, 4, 6, 8]
这种写法既繁琐又不易读。ES11 引入了 flatMap 方法，可以让我们更方便地实现这种操作。例如：
const arr = [[1, 2], [3, 4]]; const flattened = arr.flatMap((subArr) => subArr.map((num) => num * 2)); // [2, 4, 6, 8]
这样，我们就可以在一个方法调用中完成数组的展开和映射操作。
isNaN 函数的改进
在 JavaScript 中，我们经常需要检查一个值是否为 NaN。在以前，我们通常使用全局的 isNaN 函数来实现这一目的。例如：
if (isNaN(value)) {
// value 是 NaN
}但是，isNaN 函数有一个缺陷，就是它会将非数字类型的值先转换成数字类型，再进行判断。这意味着，如果我们传入一个字符串或对象，它也会返回 true。例如：
isNaN('hello'); // true
isNaN({}); // true为了解决这个问题，ES11 引入了一个新的 Number.isNaN 函数，它只会对数字类型的值返回 true。例如：
Number.isNaN('hello'); // false
Number.isNaN({}); // false因此，我们应该使用 Number.isNaN 函数来判断一个值是否为 NaN，而不是使用旧的 isNaN 函数。
总结
ES11 包含了一些新特性，可以帮助我们改善代码的可读性，并更好地处理 NaN 值。可选链操作符和空值合并操作符可以帮助我们避免繁琐的 if 语句和错误的默认值。flatMap 方法可以让我们更方便地进行数组变换操作。Number.isNaN 函数可以更准确地判断一个值是否为 NaN。这些新特性可以让我们的代码更简洁、易读和易维护。
示例代码
// javascriptcn.com 代码示例
// 可选链操作符
const obj = { prop: { method: () => console.log('Hello, world!') } };
obj?.prop?.method?.(); // Hello, world!
// 空值合并操作符
const input = null;
const defaultValue = 42;
const value = input ?? defaultValue;
console.log(value); // 42
// flatMap 方法
const arr = [[1, 2], [3, 4]];
const flattened = arr.flatMap((subArr) => subArr.map((num) => num * 2));
console.log(flattened); // [2, 4, 6, 8]
// Number.isNaN 函数
const value1 = NaN;
const value2 = 'hello';
console.log(Number.isNaN(value1)); // true
console.log(Number.isNaN(value2)); // false来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6559d085d2f5e1655d43d227