前言
在前端开发中，我们经常需要从对象中取出其中的一部分属性并使用，这个过程叫做解构（Destructuring）。在 ECMAScript 2015 增加的对象解构中，我们可以用下面这种方式提取对象的属性：
const obj = { x: 1, y: 2, z: 3 }
const { x, y } = obj
console.log(x) // 1
console.log(y) // 2其中，x、y 是对象 obj 的属性，const { x, y } = obj 的意思是从 obj 对象中提取 x、y 两个属性，并将其赋值给 x、y 两个变量。
在 ECMAScript 2016 中，我们可以使用 “Rest” 操作符来提取剩余的所有属性，如下所示：
const obj = { x: 1, y: 2, z: 3}
const { x, ...rest } = obj;
console.log(x) // 1
console.log(rest) // { y: 2, z: 3 }这里的 ...rest 就表示剩余的所有属性，将这些属性合并成一个对象，并赋值给了 rest 变量。
下面我们就来详细地讲解一下 “Rest” 操作符的用法。
Rest 操作符的语法
Rest 操作符可以放在解构赋值语句中的任何位置，语法如下：
const { a, b, ...rest } = obj;其中，a 和 b 是对象 obj 的属性，...rest 表示剩余的所有属性，并将这些属性合并成一个对象并赋值给 rest 变量。
Rest 操作符是三个点 (...) 后面加上一个变量名，可以是任何合法的变量名。
在解构赋值语句中，Rest 操作符不能单独出现，也不能在正常的对象中使用。
Rest 操作符的应用场景
Rest 操作符主要应用在对象解构中，这里我们来讲解一下它在对象解构中的使用场景。
通过 Rest 操作符，我们可以更方便地提取一个对象中某些属性的值，并将其赋值给另外一个变量。
下面是一些使用 Rest 操作符的示例代码：
示例一：提取“剩余”属性
const obj = { a: 1, b: 2, c: 3, d: 4 }
const { a, b, ...rest } = obj;
console.log(rest) // { c: 3, d: 4 }在上面的示例中，我们从 obj 对象中提取了 a 和 b 两个属性，并将剩余的属性合并成一个对象，并赋值给了 rest 变量。
示例二：选择性提取属性
const obj = { a: 1, b: 2, c: 3, d: 4 }
const { a, ...rest } = obj;
console.log(rest) // { b: 2, c: 3, d: 4 }在上面的示例中，我们只从 obj 对象中提取了 a 属性，然后将剩余的属性合并成一个对象，并赋值给了 rest 变量。
示例三：默认值
const obj = { a: 1, b: 2 }
const { a = 0, c = 3, ...rest } = obj;
console.log(a) // 1
console.log(c) // 3
console.log(rest) // { b: 2 }在上面的示例中，我们从 obj 对象中提取 a 和 c 两个属性，并为 a 设置了默认值为 0，左侧的 rest 变量只包含了 b 属性。
示例四：嵌套的对象解构
const obj = { a: 1, b: { c: 2, d: 3 }, e: 4 };
const { b: { c, ...restB }, ...rest } = obj;
console.log(c); // 2
console.log(restB); // { d: 3 }
console.log(rest); // { a: 1, e: 4}在上面的示例中，我们从 obj 对象中提取了 b 属性，并从 b 对象中提取了 c 属性，剩余的属性合并到了 restB 对象中。
总结
通过本文的讲解，我们了解了 ECMAScript 2016 中增加的 Rest 操作符，及其在对象解构中的使用方法和应用场景。Rest 操作符可以更方便地提取一个对象中某些属性的值，并将其赋值给另外一个变量，提高了开发效率。
以上介绍的只是 Rest 操作符的一些常见使用场景，更多细节请参考官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650043fe95b1f8cacde734ab