前言
ECMAScript 2017 (ES8) 是 JavaScript 语言的最新标准版本，它引入了一些新的语言特性和语法糖，其中包括对象属性的剩余和展开操作符。这些新特性可以让我们更加方便快捷地处理对象属性，提高代码的可读性和可维护性。本文将详细介绍对象属性的剩余和展开操作符的用法，并提供相应的示例代码和实际应用场景，帮助读者深入理解和掌握这些新特性。
对象属性的剩余操作符
对象属性的剩余操作符（Rest Operator）可以用来获取一个对象的所有剩余属性，并将它们合并到一个新的对象中。语法格式为 ...obj，其中 obj 是一个对象。下面是一个简单的示例：
-- -------------------- ---- ------- --- ------ - - ----- -------- ---- --- ------- --------- ------ ------------------- -- --- - ----- ---- ------- - - ------- ------------------ -- ------- ----------------- -- -- ------------------ -- - ------- --------- ------ ------------------- -
在上面的示例中，我们定义了一个名为 person 的对象，它包含了四个属性：name、age、gender 和 email。我们使用对象解构的方式，将 name 和 age 属性赋值给了两个变量，然后使用剩余操作符 ...rest 获取了剩余属性，并将它们合并到了一个新的对象中。最后，我们分别输出了 name、age 和 rest 变量的值，可以看到 rest 变量包含了剩余的两个属性 gender 和 email。
对象属性的剩余操作符不仅可以用于对象解构，还可以用于函数参数的定义。下面是一个示例：
-- -------------------- ---- ------- -------- ----------------- ----- ---- ------- -- - ------------------ ---------- ----------------- --------- ------------------ ----- -------------------------- - --- ------ - - ----- -------- ---- --- ------- --------- ------ ------------------- -- ------------------------
在上面的示例中，我们定义了一个名为 printPersonInfo 的函数，它接受一个对象作为参数，并使用对象解构的方式获取了对象的 name 和 age 属性，以及剩余的属性并将它们输出到控制台。然后，我们定义了一个名为 person 的对象，包含了四个属性。最后，我们调用了 printPersonInfo 函数，并传递了 person 对象作为参数。可以看到，函数成功地输出了 person 对象的 name、age 和剩余属性。
对象属性的展开操作符
对象属性的展开操作符（Spread Operator）可以用来将一个对象的属性展开到另一个对象中，或者将一个对象的属性展开到函数的参数列表中。语法格式为 {...obj}，其中 obj 是一个对象。下面是一些示例：
将一个对象的属性展开到另一个对象中
-- -------------------- ---- ------- --- ------ - - ----- -------- ---- -- -- --- ---- - - ---------- ------- --------- ------ ------------------- -- ------------------ -- - ----- -------- ---- --- ------- --------- ------ ------------------- -
在上面的示例中，我们定义了一个名为 person 的对象，它包含了 name 和 age 两个属性。然后，我们定义了一个名为 info 的新对象，使用展开操作符 ...person 将 person 对象的属性展开到 info 对象中，并额外添加了两个属性 gender 和 email。最后，我们输出了 info 对象的值，可以看到 info 对象包含了 person 对象和额外的两个属性。
将一个对象的属性展开到函数的参数列表中
-- -------------------- ---- ------- -------- --------------------- ---- ------- ------ - ------------------ ---------- ----------------- --------- -------------------- ------------ ------------------- ----------- - --- ------ - - ----- -------- ---- --- ------- --------- ------ ------------------- -- ------------------------------------------
在上面的示例中，我们定义了一个名为 printPersonInfo 的函数，它接受四个参数：name、age、gender 和 email。然后，我们定义了一个名为 person 的对象，它包含了 name、age、gender 和 email 四个属性。最后，我们使用展开操作符 ...Object.values(person) 将 person 对象的所有属性展开到函数的参数列表中，并调用了 printPersonInfo 函数。可以看到，函数成功地输出了 person 对象的所有属性。
实际应用场景
对象属性的剩余和展开操作符在实际开发中有很多应用场景，下面是一些示例：
合并对象
使用对象属性的展开操作符可以方便地合并两个对象，如下所示：
let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };
let obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 }复制对象
使用对象属性的展开操作符可以方便地复制一个对象，如下所示：
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1 };
console.log(obj2); // { a: 1, b: 2 }过滤对象属性
使用对象属性的剩余操作符可以方便地过滤一个对象的属性，如下所示：
let obj1 = { a: 1, b: 2, c: 3 };
let { b, ...rest } = obj1;
console.log(rest); // { a: 1, c: 3 }函数参数默认值
使用对象属性的剩余操作符可以方便地为函数参数提供默认值，如下所示：
-- -------------------- ---- ------- -------- ----------------- ---- - ---------- --- - -- ------ - ---------- ----- - --------- - - --- - ------------------ ---------- ----------------- --------- -------------------- ------------ ------------------- ----------- - --- ------ - - ----- -------- ---- --- ------- --------- ------ ------------------- -- ------------------------ -- ----- ------ ---- --- ------- ------- ------ ----------------- ------------------ -- ----- -------- ---- -- ------- -------- ------ -------
总结
对象属性的剩余和展开操作符是 ECMAScript 2017 (ES8) 中引入的新特性，它们可以让我们更加方便快捷地处理对象属性，提高代码的可读性和可维护性。本文详细介绍了对象属性的剩余和展开操作符的用法，并提供了相应的示例代码和实际应用场景，希望读者能够深入理解和掌握这些新特性，并在实际开发中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f291b52b3ccec22fb23ba0