DEV Community
·
掌握JavaScript中对象和数组的扩展运算符
💡
原文英文，约900词，阅读约需4分钟。
📝
内容提要
扩展运算符(...)是ES6引入的特性，用于展开或复制数组和对象。它可用于创建浅拷贝、合并多个数组或对象，以及添加新元素或属性。在函数调用中，扩展运算符可以将数组元素作为独立参数传递，但仅支持浅拷贝，嵌套对象需使用深拷贝方法。
🎯
关键要点
- 扩展运算符(...)是ES6引入的特性，用于展开或复制数组和对象。
- 扩展运算符可用于创建浅拷贝、合并多个数组或对象，以及添加新元素或属性。
- 使用扩展运算符可以从一个数组复制元素到另一个数组。
- 扩展运算符可以创建数组的浅拷贝，避免修改原数组。
- 可以使用扩展运算符合并多个数组为一个数组。
- 可以通过扩展运算符向数组添加新元素。
- 扩展运算符也可以用于复制对象的属性。
- 可以使用扩展运算符合并多个对象，后面的属性会覆盖前面的属性。
- 可以使用扩展运算符向对象添加新属性，而不修改原对象。
- 扩展运算符可以将数组元素作为独立参数传递给函数。
- 扩展运算符执行浅拷贝，嵌套对象需使用深拷贝方法。
- 在数组对象中使用扩展运算符可以更新特定属性。
- 在React中，扩展运算符常用于复制props和state对象，简化状态更新。
❓
延伸问答
扩展运算符在JavaScript中有什么作用？
扩展运算符用于展开或复制数组和对象，创建浅拷贝、合并多个数组或对象，以及添加新元素或属性。
如何使用扩展运算符创建数组的浅拷贝？
可以通过语法 const newArr = [...oldArr]; 来创建数组的浅拷贝。
扩展运算符如何合并多个对象？
使用扩展运算符可以通过语法 const combined = { ...obj1, ...obj2 }; 来合并多个对象，后面的属性会覆盖前面的属性。
扩展运算符在函数调用中有什么应用？
扩展运算符可以将数组元素作为独立参数传递给函数，例如 sum(...numbers);。
扩展运算符的限制是什么？
扩展运算符执行浅拷贝，嵌套对象或数组的引用会被复制，修改嵌套对象会影响原对象。
在React中如何使用扩展运算符？
在React中，扩展运算符常用于复制props和state对象，简化状态更新，例如 this.setState(prevState => ({ ...prevState, user: { ...prevState.user, name: 'Updated Name' } }));。
➡️
