当前位置: 代码网 > it编程>编程语言>Javascript > JavaScript 中“...” 的多种用途及代码实例

JavaScript 中“...” 的多种用途及代码实例

2024年10月30日 Javascript 我要评论
一、扩展运算符(spread operator)用于数组:可以将一个数组展开为另一个数组的元素。例如: const arr1 = [1, 2, 3]; const arr2 = [4,

一、扩展运算符(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有属性abc,使用...item后,新对象会自动包含这些属性,然后再加上新设置的ticket_des属性。

到此这篇关于javascript 中“...” 的多种用途的文章就介绍到这了,更多相关js “...” 的多种用途内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2026  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com