在前端开发中，我们经常需要编写函数来完成一些操作。但是，有时候我们写的代码会变得冗长复杂，影响代码的可读性和可维护性。而 ES6 中的解构和默认参数功能可以让我们更加简洁高效地编写函数。
解构
解构（Destructuring）是 ES6 中的一个新特性，它可以快速方便地从对象或数组中提取出值，然后赋值给变量。通过使用解构，我们可以节约大量的代码，使代码更加简洁易懂。
对象解构
对象解构可以用来从对象中提取值赋给变量。例如，我们有一个包含用户信息的对象，它的属性有 name、age 和 gender。我们可以使用对象解构来提取这些属性的值：
-- -------------------- ---- ------- ----- ---- - - ----- ------ ---- --- ------- ------ -- ----- - ----- ---- ------ - - ----- ------------------ -- ----- ----------------- -- -- -------------------- -- ------
在上面的代码中，我们使用了对象解构，将 user 对象中的 name、age 和 gender 属性的值赋给了相应的变量。
数组解构
数组解构可以用来从数组中提取值赋给变量。例如，我们有一个包含成绩信息的数组，它的元素依次是语文、数学和英语的分数。我们可以使用数组解构来提取这些分数：
const scores = [90, 85, 95]; const [chinese, math, english] = scores; console.log(chinese); // 90 console.log(math); // 85 console.log(english); // 95
在上面的代码中，我们使用了数组解构，将 scores 数组中的元素分别赋给了相应的变量。
解构的嵌套和重命名
对象和数组的解构都支持嵌套和重命名。例如，我们有一个包含学生信息的对象数组，每个对象都有两个属性 name 和 scores，其中 scores 又是一个包含三门课程分数的数组。我们可以使用解构来提取每个学生的名字和数学成绩：
-- -------------------- ---- ------- ----- -------- - - - ----- ------ ------- ---- --- --- -- - ----- ------- ------- ---- --- --- -- - ----- -------- ------- ---- --- --- - -- --- ------ - ----- ------- -- ----- - -- --------- - ---------------------- ---- ----- -- ---------- -
在上面的代码中，我们使用了对象解构，将 students 数组中的每个元素的 name 属性赋给了 name 变量，将 scores 数组的第二个元素赋给了 math 变量。注意，这里并没有提取 scores 数组中的语文和英语成绩，我们可以使用空位符号来占位。
默认值
在解构中，我们还可以为变量设置默认值。如果属性或元素的值为 undefined，那么变量将取默认值。例如，我们可以定义一个对象，它有两个属性 name 和 gender，我们可以使用解构来提取这些属性的值，并为 gender 变量设置默认值：
const user = {
name: 'Tom'
};
const { name, gender = 'unknown' } = user;
console.log(name); // 'Tom'
console.log(gender); // 'unknown'在上面的代码中，user 对象中没有 gender 属性，因此 gender 变量取了默认值。
默认参数
默认参数（Default parameters）是 ES6 中的另一个新特性，它可以使函数的参数设置默认值，当函数调用时如果没有传入相应的参数，则使用默认值。通过使用默认参数，我们可以减少重复代码，提高代码的可读性和可维护性。
基本使用
我们可以使用 = 赋值符号为函数的参数设置默认值，例如：
function greet(name = 'world') {
console.log(`Hello, ${name}!`);
}
greet('Tom'); // 'Hello, Tom!'
greet(); // 'Hello, world!'在上面的代码中，greet 函数有一个参数 name，我们为它设置了默认值 'world'。如果调用函数时不传入参数，则使用默认值 'world'。
可以引用前面的参数
默认参数还支持引用前面的参数。例如，我们可以定义一个函数，计算两个数的和，如果不传入第二个参数，则默认为第一个参数的两倍：
function add(a, b = a * 2) {
return a + b;
}
console.log(add(1, 2)); // 3
console.log(add(1)); // 3在上面的代码中，我们定义了一个函数 add，它有两个参数 a 和 b，我们为 b 设置了默认值 a * 2。如果调用函数时不传入 b 参数，则 b 的值为 a * 2。
可以是函数调用的结果
默认参数还可以是函数调用的结果。例如，我们可以定义一个函数 now，它没有参数，但默认返回当前时间：
-- -------------------- ---- ------- -------- ----- - ------ --- ----------------- - -------- ------------ --------- - ------ - ------------------ ---------------------------------- ------------- - -------------- ------------- -- ---------- --------- ------
在上面的代码中，我们定义了一个函数 log，它有两个参数 message 和 timestamp，我们为 timestamp 设置了默认值 now()，也就是调用 now 函数的结果。这样，我们每次调用 log 函数时，如果没传入 timestamp 参数，则默认使用当前时间。
总结
在本文中，我们介绍了 ES6 中的解构和默认参数功能，它们可以极大地简化我们编写函数的代码，提高代码的可读性和可维护性。解构可以用来从对象或数组中提取值赋给变量，支持嵌套、重命名和默认值等功能。默认参数可以为函数的参数设置默认值，支持引用前面的参数和函数调用的结果等功能。我们希望通过本文的介绍，你可以更加灵活地使用解构和默认参数，提高自己的前端开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648aa9e948841e98948c4e36