在 ES6 中，我们有了解构赋值语法，可以很方便地从对象或数组中获取需要的值。而在 ES7 中，新加入了 Object Rest/Spread Properties，使得我们可以更加方便地操作对象。
Object Rest Properties
Object Rest Properties 允许我们从一个对象中取出一部分属性，而不需要一个一个地列出来。具体来说，就是在对象字面量中使用 ... 语法，将其余的属性放在一个新的对象中。
// javascriptcn.com 代码示例
const person = {
name: 'Alice',
age: 18,
gender: 'female',
email: 'alice@example.com',
};
const { name, age, ...rest } = person;
console.log(name); // 'Alice'
console.log(age); // 18
console.log(rest); // { gender: 'female', email: 'alice@example.com' }在上面的代码中，我们从 person 对象中取出了 name 和 age 属性，并使用 Object Rest Properties 将其余的属性放在了 rest 对象中。
Object Spread Properties
Object Spread Properties 允许我们将一个对象的属性展开到另一个对象中，也是使用 ... 语法。与 Object Rest Properties 不同的是，它可以用于对象字面量中的任何位置。
// javascriptcn.com 代码示例
const person = {
name: 'Alice',
age: 18,
};
const contact = {
email: 'alice@example.com',
phone: '1234567890',
};
const newPerson = { ...person, ...contact };
console.log(newPerson); // { name: 'Alice', age: 18, email: 'alice@example.com', phone: '1234567890' }在上面的代码中，我们使用 Object Spread Properties 将 person 对象和 contact 对象的属性展开到了一个新的对象中，并将其赋值给了 newPerson 变量。
使用场景
Object Rest/Spread Properties 的使用场景非常广泛，下面介绍几个常见的场景。
合并对象
上面的示例代码已经演示了如何使用 Object Spread Properties 合并两个对象。在实际开发中，我们经常需要将多个对象合并成一个新的对象。
// javascriptcn.com 代码示例
const defaultOptions = {
timeout: 5000,
retry: 3,
};
const userOptions = {
timeout: 10000,
};
const options = { ...defaultOptions, ...userOptions };
console.log(options); // { timeout: 10000, retry: 3 }在上面的代码中，我们定义了一个 defaultOptions 对象和一个 userOptions 对象，使用 Object Spread Properties 将它们合并成了一个新的 options 对象。
删除属性
使用 Object Rest Properties 可以很方便地删除对象中的某些属性。
// javascriptcn.com 代码示例
const person = {
name: 'Alice',
age: 18,
gender: 'female',
email: 'alice@example.com',
};
const { email, ...newPerson } = person;
console.log(newPerson); // { name: 'Alice', age: 18, gender: 'female' }在上面的代码中，我们使用 Object Rest Properties 删除了 person 对象中的 email 属性，并将其余的属性放在了 newPerson 对象中。
函数参数
在函数参数中使用 Object Rest/Spread Properties 可以很方便地处理多个参数。
// javascriptcn.com 代码示例
function foo({ x, y, ...rest }) {
console.log(x); // 1
console.log(y); // 2
console.log(rest); // { z: 3 }
}
const obj = {
x: 1,
y: 2,
z: 3,
};
foo(obj);在上面的代码中，我们定义了一个 foo 函数，使用 Object Rest Properties 将 obj 对象中的 x 和 y 属性传递给函数，并将其余的属性放在了 rest 对象中。
总结
Object Rest/Spread Properties 是一个非常实用的特性，可以让我们更加方便地操作对象。在实际开发中，我们可以根据具体的场景选择使用它们。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656d9f42d2f5e1655d5dd652