前言
ECMAScript 2020（简称 ES2020）是 JavaScript 语言的最新标准，它包含了很多新特性和改进。其中一个重要的更新是引入了解构赋值的默认值语法。在实际编写前端代码的过程中，我们常常需要给解构赋值添加默认值，以免出现意外。
本文将介绍解构赋值默认值的基础用法、最佳实践和注意事项，帮助读者更好地理解和应用这一语法。
基础用法
解构赋值是一种从数组或对象中提取值并赋给变量的方式。默认值语法可以给变量设置一个默认值，以防在提取过程中出现 undefined 的情况。
数组解构
在数组解构赋值中，我们可以使用默认值语法给变量设置一个默认值。如果解构的值为 undefined，则默认值将会生效。
const [a, b = 2] = [1, undefined]; console.log(a); // 1 console.log(b); // 2
还可以将默认值作为一个函数返回值。这样，每次使用默认值时都会调用该函数获取新的值。
function getDefault() {
console.log('getDefault called');
return 2;
}
const [a, b = getDefault()] = [1, undefined];
console.log(a); // 1
console.log(b); // getDefault called, 2对象解构
在对象解构赋值中，我们可以为 key 设置默认值。当要解构的对象中没有对应的 key 时，将会使用该默认值。
const {a, b = 2} = {a: 1};
console.log(a); // 1
console.log(b); // 2同样，我们也可以将默认值作为一个函数返回值。
function getDefault() {
console.log('getDefault called');
return 2;
}
const {a, b = getDefault()} = {a: 1};
console.log(a); // 1
console.log(b); // getDefault called, 2最佳实践
理清默认值的含义
在使用默认值语法时，我们需要理清默认值的含义。默认值是用来处理变量为 undefined 的情况，而不是针对其他值。因此，如果要处理某个变量为 null 或者其他假值的情况，需要先进行补充检查。
// 错误示例，不会处理 null
const {a = 'default'} = {a: null}
// 正确示例，使用 || 进行补充检查
const {a = 'default'} = {a: null} || {}使用函数设置默认值
如果我们需要在默认值中有一些复杂的操作，可以将默认值设置为一个函数。这样不仅可以提高代码的可读性，而且对于一些只会被执行一次的操作，可以大大节省运行时间。
// 错误示例，没有使用函数
const {a = expensiveOperation()} = {a: null}
// 正确示例，使用函数
const {a = (() => {
console.log('expensiveOperation called');
return 2;
})()} = {a: null}避免用 undefined 覆盖默认值
默认值语法只会在变量为 undefined 时起作用。因此，如果要使用 undefined 覆盖默认值，会导致错误结果的出现。
const [a = 1] = [undefined]; console.log(a); // 1 const [b = 1] = [null]; console.log(b); // null
条件运算符替代默认值
默认值语法的使用场景只是处理变量为 undifined 的情况。如果想要进行更复杂的操作，应该使用条件运算符或者其他逻辑操作符。
const {a} = {a: undefined};
console.log(a); // undefined
const {b} = {b: null};
console.log(b); // null
const {c} = {c: 0};
console.log(c ?? 'default'); // 0总结
本文介绍了 ECMAScript 2020 中解构赋值默认值语法的用法和最佳实践。透过简单的例子，我们了解到了使用默认值语法的基本语法和注意事项。建议在开发过程中用函数、条件运算符等方式优化默认值的处理，提高代码的效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b1f5acadd4f0e0ffb25b4b