新特性：ES9 对象 Rest & Spread 操作符-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，我们已经见识到了解构赋值、Arrow Function、class 等新特性。而在 ES9 中，我们迎来了另一个新特性：对象 Rest & Spread 操作符。这个新特性允许我们方便地操作对象，提高了代码的可读性和可维护性。

什么是对象 Rest & Spread 操作符

对象 Rest & Spread 操作符是一组语法，它们分别表示对象的剩余部分和扩展部分。Rest 操作符用于在解构赋值中获取对象的剩余部分；而 Spread 操作符则用于在对象字面量、函数调用等场景下扩展对象的属性：

// javascriptcn.com 代码示例
// Rest 操作符
const obj = { name: 'Alice', age: 18, gender: 'female' };
const { name, ...rest } = obj;
console.log(rest); // { age: 18, gender: 'female' }

// Spread 操作符
const obj1 = { x: 1 };
const obj2 = { y: 2 };
const obj3 = { ...obj1, ...obj2, z: 3 };
console.log(obj3); // { x: 1, y: 2, z: 3 }

上面的代码演示了 Rest 和 Spread 操作符的基本语法。在 Rest 操作符中，我们使用 ... 表示获取剩余部分，它会将对象中除了已经解构赋值的部分之外的属性组成一个新的对象；而在 Spread 操作符中，我们也使用 ... 表示扩展对象的属性，它会将多个对象的属性组合成一个新的对象。

对象 Rest & Spread 操作符的应用场景

这个新特性的应用场景很广泛，下面演示几个代表性的场景。

Rest 操作符用于获取对象的一部分

假设我们有一个项目列表，每个项目都有许多属性，但我们只需要获取它们的标题和描述，在 ES6 中我们需要这样写：

const projects = [
    { id: 1, title: 'Project A', description: 'Description A', url: 'https://projecta.com' },
    { id: 2, title: 'Project B', description: 'Description B', url: 'https://projectb.com' },
    { id: 3, title: 'Project C', description: 'Description C', url: 'https://projectc.com' },
];

const simplifiedProjects = projects.map(({ title, description }) => ({ title, description }));

我们使用了解构赋值和箭头函数将每个项目简化为只包含标题和描述的对象。在 ES9 中，我们可以使用 Rest 操作符更简单地实现这个目标：

const simplifiedProjects = projects.map(({ url, ...rest }) => rest);

我们使用了 Rest 操作符将项目的 URL 剩余部分赋值给一个名为 url 的变量，然后返回剩下的属性，这样就实现了对项目对象的简化。

Spread 操作符用于对对象进行合并

任何需要对已有对象进行复制、合并的场景都可以使用 Spread 操作符。假设我们有一个用户管理系统，我们需要将新建用户时输入的表单数据与系统默认值进行合并，以便创建一个最终的用户对象，这个时候我们可以这样写：

// javascriptcn.com 代码示例
const formValues = {
    name: 'Bob',
    age: 25,
    email: 'bob@example.com',
};

const defaultValues = {
    role: 'user',
    createdAt: new Date(),
    updatedAt: new Date(),
};

const user = { ...defaultValues, ...formValues };

我们使用了 Spread 操作符将默认值和表单数据合并成一个用户对象。这样做的好处是，我们可以在不改动默认值的情况下，仅仅更改表单数据就能创建不同的用户对象。

Rest 操作符用于函数的剩余参数

在 ES6 中，我们已经可以使用剩余参数（Rest parameters）在函数的参数列表中获取一组没有被显式声明的参数了，例如：

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

const total = sum(1, 2, 3, 4, 5); // 15

在 ES9 中，我们可以使用对象 Rest & Spread 操作符来获取函数参数中的对象剩余部分了。例如，我们有这样一个函数：

function createPerson({ name, age, ...extra }) {
    console.log(name, age);
    console.log(extra); // { gender: 'male', hobbies: ['reading', 'coding'] }
}

这个函数接受一个对象参数，我们使用 Rest 操作符获取参数对象中 name 和 age 剩余的属性，然后使用 extra 变量获取对象中剩余的对象属性。调用这个函数时，我们可以这样传递参数：

createPerson({
    name: 'Tom',
    age: 30,
    gender: 'male',
    hobbies: ['reading', 'coding'],
});

gender 和 hobbies 属性将会是 extra 变量中的剩余属性。

总结

对象 Rest & Spread 操作符是一个很实用的新特性，它可以帮助我们更方便地对对象进行操作，减少代码冗余，提高代码实用性和可维护性。在实际项目开发中，我们应该尽量合理利用这个特性，提高我们的开发效率和代码质量。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6549d4c47d4982a6eb40c450