展开运算符(Spread Operator)
2024-01-08 20:50:31
展开运算符(Spread Operator)是ES6中引入的一种语法,使用三个连续的点(...
)表示。它可以在多种场合下使用,主要用途是“展开”数组或对象中的元素或属性。
使用展开运算符的几种常见情景:
- 在函数调用时展开数组元素:
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 相当于执行 sum(1, 2, 3),输出6
- 在数组字面量中合并多个数组:
const fruits = ['apple', 'banana'];
const moreFruits = ['orange', 'grape'];
const allFruits = [...fruits, ...moreFruits];
console.log(allFruits); // 输出 ['apple', 'banana', 'orange', 'grape']
- 复制数组:
const arr = [1, 2, 3];
const arrCopy = [...arr]; // 创建arr的一个浅拷贝
- 在对象字面量中合并对象:
const obj1 = { foo: 'bar', x: 42 };
const obj2 = { foo: 'baz', y: 13 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // 输出 { foo: 'baz', x: 42, y: 13 }
请注意,在合并对象时,如果有重复的键,则后面展开的对象属性会覆盖前面的。
- 复制对象:
const obj = { name: 'John', age: 30 };
const objCopy = { ...obj }; // 创建obj的一个浅拷贝
- 使用展开运算符代替
apply
方法:
const numbers = [9, 3, 2];
const maxNum = Math.max.apply(null, numbers); // 之前的写法
const maxNumNew = Math.max(...numbers); // 使用展开运算符的写法
console.log(maxNumNew); // 输出9,同样获得数组中的最大值
当使用展开运算符时有几点需要注意:
- 展开运算符拷贝的是数组或对象的元素或属性的引用,这意味着如果数组或对象中的元素是对象或数组,那么展开的是这些元素的引用,而不是它们的实际深拷贝。
- 展开对象时,只有对象自己的可枚举属性会被展开,不包括从原型链继承来的属性。
展开运算符大大简化了某些操作,并使代码更整洁和易读。
文章来源:https://blog.csdn.net/m0_62943934/article/details/135464493
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!