ES6 中的解构赋值和默认参数，让函数参数更加易读易懂-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 的 ES6 标准中，解构赋值和默认参数是两种非常实用的特性。它们可以让我们更加方便地处理复杂数据结构和函数参数，使我们的代码读起来更加简洁明了。在这篇文章中，我们将详细介绍这两个特性的使用方法和例子，并探讨它们的实际应用价值。

解构赋值

解构赋值用于从数组或对象中提取值，然后将其赋给变量。这种语法形式让我们可以更加方便地访问和操作数组或对象的各个部分，省去了手动进行遍历获取的麻烦。

数组解构

解构数组时，可以将其部分或全部元素都赋给变量。下面是一个简单的例子：

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

在上面的例子中，我们首先定义了一个数组，然后使用解构赋值将其分别赋值给 a、b、c 三个变量。这样，我们就可以直接访问数组的各个元素了。

除了这种基本的用法外，解构赋值还支持一些高级特性。比如，我们可以使用默认值来设置解构的变量：

const [a, b, c = 0] = [1, 2];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 0

在上面的代码中，我们使用了默认值 0 来赋值变量 c。因为数组中只有两个元素，所以 c 的值会被设置为默认值 0。

另外一个比较实用的特性是，我们可以使用剩余元素语法来获取数组的剩余部分：

const [a, ...rest] = [1, 2, 3, 4];
console.log(a); // 1
console.log(rest); // [2, 3, 4]

在上面的代码中，我们使用了剩余元素语法 ...rest 来获取数组中除了第一个元素之外的所有元素，赋值给变量 rest。

对象解构

和数组类似，我们也可以使用解构赋值来访问和操作对象的各个属性。下面是一个简单的例子：

const obj = { foo: 1, bar: 2 };
const { foo, bar } = obj;
console.log(foo); // 1
console.log(bar); // 2

在上面的例子中，我们首先定义了一个对象，然后使用解构赋值将其属性值分别赋值给 foo、bar 两个变量。这样，我们就可以直接访问对象的各个属性了。

和数组类似，对象解构也支持默认值、剩余属性等高级特性。比如，我们可以使用默认值来设置解构的变量：

const { foo, bar = 0 } = { foo: 1 };
console.log(foo); // 1
console.log(bar); // 0

在上面的代码中，我们使用了默认值 0 来赋值变量 bar。因为对象中没有对应的属性，所以 bar 的值会被设置为默认值 0。

另外一个比较实用的特性是，我们可以使用别名来给解构的变量取一个新的名字：

const { foo: a, bar: b } = { foo: 1, bar: 2 };
console.log(a); // 1
console.log(b); // 2

在上面的代码中，我们定义了别名 a、b 分别对应对象的属性 foo、bar，然后使用解构赋值将其赋值给变量。

默认参数

默认参数用于给函数参数设置一个默认值，当没有传入该参数或传入的参数为 undefined 时，函数会使用默认值来代替。这种特性使函数参数更加易读易懂，同时也减少了一些冗余的参数判断和赋值代码。

基本用法

下面是一个简单的例子：

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(2)); // 2
console.log(multiply(2, 3)); // 6

在上面的例子中，我们定义了一个 multiply 函数，其中第二个参数 b 默认值为 1。当我们只传入一个参数时，b 的值会被设置为默认值 1；当我们传入两个参数时，b 的值会被覆盖为实际传入的值 3。

高级用法

除了设置基本类型的默认值外，我们还可以使用函数来设置默认参数。下面是一个例子：

-- -------------------- ---- -------
-------- --------------- -
  ------ --------
-

-------- ------------ -
  ------ ----------
-

------------------------ -- ---------
----------------------- -- -------- -- -----展开代码

在上面的代码中，我们定义了一个 getValue 函数，其参数 value 默认值为一个返回 'default' 的函数。当没有传入参数或传入参数为 undefined 时，函数会使用默认值 getDefault 来代替。当传入函数时，函数会执行该函数并返回其结果。

实际应用

解构赋值和默认参数是非常常用的语法特性，在实际应用中也有很多场景。比如，我们可以使用解构赋值来提取函数参数的某些属性：

function printUser({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

const user = { name: 'Alice', age: 18, gender: 'female' };
printUser(user); // 'Name: Alice, Age: 18'

在上面的例子中，我们定义了一个 printUser 函数，其参数使用了对象解构的方式来提取对象的 name、age 属性。因为对象 user 中有对应属性，所以函数能够正确输出参数的值。

除此之外，我们也可以使用默认参数来简化一些函数的参数传递。比如，我们可以使用默认参数来设置某个回调函数：

function init(options = {}) {
  const { onSuccess = () => {}, onFailure = () => {} } = options;
  // ...
}

init({ onSuccess: () => console.log('success') });

在上面的例子中，我们定义了一个 init 函数，其参数 options 默认值为一个空对象。我们可以使用对象解构来提取 options 中的 onSuccess、onFailure 方法，同时使用默认参数来设置它们的默认值。这样，当调用函数时，我们只需要传入需要的参数，其他参数将使用默认值代替。

总之，解构赋值和默认参数是非常实用的语法特性，在日常编程中都经常被使用。我们应该尽可能地掌握它们的使用方法，以提高代码的可读性和简洁性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67c2ad74314edc2684c1e555

ES6 中的解构赋值和默认参数，让函数参数更加易读易懂