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 “...” 的多种用途内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
命名空间是通过为项目或库创建一个全局对象，然后将所有功能添加到该全局变量中。通过减少程序中全局变量的数量，实现单全局变量，从而在具有大量函数、对象和其他变量的情况下不会造成全局污染，同时也避免了命名冲突等问题2013-11-11
[蓝色]一个很Cool的JS菜单效果...2006-09-09
这篇文章主要介绍了用js简单提供增删改查接口,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了JavaScript 拖拉时间之drag案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了Javascript连接数据库查询并插入数据，下面文章围绕主题展开详细内容，具有一的参考价值，需要的小伙伴可以参考一下，希望对你的学习有所帮助2022-03-03
这篇文章主要介绍了JavaScript统计字符串中每个字符出现次数的方法,以完整实例形式分析了JavaScript针对字符串中字符的遍历操作相关技巧,需要的朋友可以参考下2016-01-01
这篇文章主要为大家介绍了uni-app的pages.json处理方案示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了egg.js的基本使用和调用数据库的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了使用JavaScript字符串解决回文数的方案,JavaScript中的字符串是一种数据类型,用于表示文本数据,字符串可以包含任意字符序列,包括字母、数字、符号和空格,灵活掌握字符串的解决问题思想,巧用字符串解决回文数,需要的朋友可以参考下2024-05-05
这篇文章主要为大家详细介绍了js回调函数仿360开机，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
最新评论