ECMAScript 2018：新增解构赋值之对对象属性提取时的 Rest/Spread Properties

ECMAScript 2018：新增解构赋值之对对象属性提取时的 Rest/Spread Properties

ECMAScript 2018（简称 ES2018）是 JavaScript 语言的最新版本，它于 2018 年 6 月正式发布。ES2018 中新增了很多语言特性和功能，其中之一就是对解构赋值的增强，即对对象属性提取时的 Rest/Spread Properties。

所谓 Rest/Spread Properties，指的是在对象解构赋值时，除了可以像以往那样提取某些属性外，还可以使用 ... 运算符来提取其余属性，并将它们作为一个新对象返回。在这个过程中，我们可以将提取的属性进行扩展或缩减，从而方便地对属性进行处理。

具体来说，Rest/Spread Properties 主要有两种用法，即 Spread syntax 和 Rest syntax。下面，让我们来详细了解一下它们的使用方式和实现效果。

Spread syntax

Spread syntax（扩展语法）主要用于在对象、数组等数据结构中扩展或合并属性。在对象中使用 Spread syntax 的语法格式如下：

const obj = { x: 1, y: 2, z: 3 };
const { x, ...rest } = obj;
console.log(x); // 1
console.log(rest); // { y: 2, z: 3 }

在这个例子中，我们首先定义了一个名为 obj 的对象，并在其内部设置了 3 个属性：x、y 和 z。然后，我们使用解构赋值的方式提取 obj 中的属性，其中 ...rest 运算符表示提取除了 x 属性以外的其余属性，并将它们封装成一个新的对象返回。

最后，运行代码，我们可以看到控制台上先输出了 x 属性的值 1，然后输出了 rest 变量中剩余属性的值，即 { y: 2, z: 3 }。这表明 rest 变量中成功提取了除 x 属性以外的所有属性，并将它们存储为一个新的对象。

除了在对象中使用 Spread syntax，我们还可以将其用于数组和函数的调用中。例如，在数组中使用 Spread syntax 可以快速地将两个数组中的元素组合到一起：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

在这个例子中，我们将两个数组 arr1 和 arr2 中的元素通过 ... 运算符扩展到 combined 数组中，最终得到的结果是 [1, 2, 3, 4, 5, 6]。这样，我们便可以很方便地组合多个数组中的元素，而不需要像以往那样使用循环或其他冗余的代码。

Rest syntax

与 Spread syntax 不同，Rest syntax（剩余语法）主要用于函数参数中对多余的参数进行处理。在函数中使用 Rest syntax 的语法格式如下：

function foo(a, b, ...rest) {
  console.log('a:', a, 'b:', b, 'rest:', rest);
}

foo(1, 2, 3, 4, 5);

在这个例子中，我们定义了一个名为 foo 的函数，并在其参数列表中除了 a 和 b 以外，使用了一个 ...rest 运算符来表示处理所有多余的参数。然后，我们在函数调用时传入了 5 个参数，分别是 1, 2, 3, 4 和 5。

最后，在控制台上输出了函数执行的结果，我们可以看到，其中 a 和 b 分别对应了第一个和第二个参数，而 rest 参数则使用了 Rest syntax 提取了剩下的参数，并封装成一个数组返回。因此，函数输出的结果为：

a: 1 b: 2 rest: [3, 4, 5]

这表明，我们成功地使用 Rest syntax 处理了函数参数的多余部分，并将其封装成了一个数组返回。这样，我们便可以在函数定义时更加灵活地处理参数，而不需要考虑调用时的多余参数是否存在。

总结

Rest/Spread Properties 是 ECMAScript 2018 中新增的解构赋值特性之一，它通过 ... 运算符扩展或提取对象和数组中的属性，从而使代码更加简洁、易于维护和阅读。在实际编程中，我们可以根据实际需要灵活地运用 Rest/Spread Properties，以便更好地处理对象、数组、函数等数据结构中的属性和参数。

在接下来的学习中，我们还将详细讨论 ES2018 中新增的其他特性，并结合实例代码探究它们在实际开发中的应用和意义。

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