JavaScript 中“...” 的多种用途及代码实例
更新时间：2024年09月13日 10:34:53 作者：焚琴煮鹤的熊熊野火
扩展运算符（Spread Operator）和剩余参数（Rest Parameters）是JavaScript中的两个非常有用的特性,实际应用中,这些功能可以用于合并数组、复制对象属性等操作,极大地提高了JavaScript编程的便利性和功能性,感兴趣的朋友跟随小编一起看看吧
一、扩展运算符（Spread Operator）
用于数组：可以将一个数组展开为另一个数组的元素。例如：
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArray = [...arr1,...arr2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]可以在函数调用中展开数组参数，使得函数可以接受任意数量的参数。例如：
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6用于对象：可以复制对象的属性到另一个对象。例如：
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3,...obj1 };
console.log(obj2); // { c: 3, a: 1, b: 2 }二、剩余参数（Rest Parameters）
在函数定义中，“...” 可以用来收集多个参数到一个数组中。例如：
function addNumbers(...numbers) {
return numbers.reduce((sum, num) => sum + num, 0);
}
console.log(addNumbers(1, 2, 3, 4, 5)); // 15在这个函数中，“numbers” 是一个包含所有传入参数的数组。可以使用数组的方法如 “reduce” 来处理这些参数。
三、实际代码实例
this.data.orderList
.filter(item => item.quantity > 0)
.map(item => ({
...item,
ticket_des: '' // 直接将ticket_des设置为空字符串
}));在这段 JavaScript 代码中，...item是扩展运算符的用法。
这里是在对数组进行map操作时，将原数组中的每个元素（这里是对象item）进行扩展，并添加一个新的属性ticket_des且设置为空字符串，从而创建一个新的对象。
这种用法可以避免手动逐个复制对象的已有属性，使得代码更加简洁和易于维护。例如，如果原对象item有属性a、b、c，使用...item后，新对象会自动包含这些属性，然后再加上新设置的ticket_des属性。
到此这篇关于JavaScript 中“...” 的多种用途的文章就介绍到这了,更多相关js “...” 的多种用途内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解Webpack-dev-server的proxy用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了JavaScript常用工具函数,汇总整理了各种JavaScript常用工具函数,包括获取、判断、转换、设置等相关功能函数的定义与使用方法,需要的朋友可以参考下2020-05-05
这篇文章主要给大家介绍了关于uniapp实现微信小程序支付(前端)的相关资料,发现网上教程很多,单只针对小程序的简单清晰的流程却很少,文字通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
这篇文章主要给大家详细介绍了javascript中if和switch，==和===的区别和联系，十分的细致实用，有需要的小伙伴可以参考下。2015-07-07
遇到了操作iframe的相关问题，其实就是在操作iframe内部某个窗体时，调用父窗体的一个函数，下面与大家分享下操作iframe兼容各种浏览器的方法2013-07-07
这篇文章主要介绍了JSLint提高JS代码质量的方法，有需要的朋友可以参考一下2013-12-12![js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]](//img.jbzj.com/images/xgimg/bcimg6.png)
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
W3C的标准告诉我们，可以通过Dom对象的contentDocument属性来返回文档对象。2011-01-01
这篇文章主要介绍了JS实现霓虹灯文字效果的方法,涉及javascript遍历字符串及页面样式的动态操作技巧,效果非常炫目华丽,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了详解如何在JS代码中消灭for循环，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
本文主要介绍了JavaScript实现点赞功能的示例,分享给大家2014-04-04
![js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]](http://img.jbzj.com/images/xgimg/bcimg6.png)
最新评论