Rest模式和参数

本文详细介绍了JavaScript中的展开运算符和Rest参数,这两种语法特性分别用于处理函数参数,展开运算符用于展开可迭代对象,Rest参数用于收集函数后续参数。通过实例展示了它们在数组解构和函数参数传递中的应用。
摘要由CSDN通过智能技术生成

展开运算符和Rest参数都是JavaScript中的语法特性,用于处理函数的参数。它们在使用方式和功能上有一些区别。
展开运算符用于将可迭代对象展开为独立的值,而Rest参数用于将多个参数收集到一个数组中。展开运算符可以用于多种上下文,而Rest参数只能作为函数的最后一个参数。

先来看一个简单的例子

const [a,b,...others] = [1,2,3,4,5];
console.log(a,b,others);
//首先,我们定义了一个包含五个元素的数组 [1, 2, 3, 4, 5]。

然后,我们使用解构赋值语法将数组元素赋值给对应的变量。其中,[a, b, ...others] 表示将数组的第一个元素赋值给变量 a,第二个元素赋值给变量 b,而其余的元素将被收集到 others 数组中。

最后,我们使用 console.log() 方法打印出 a、b 和 others 的值。根据给定的数组,输出将会是 1 2 [3, 4, 5]。也就是说,a 的值为 1,b 的值为 2,others 数组包含剩余的元素 [3, 4, 5]

这是一种使用解构赋值和Rest参数的写法。在给定的例子中,我们将数组 [1, 2, 3, 4, 5] 中的前两个元素分别赋值给变量 a 和 b,而剩余的元素则被收集到名为 others 的数组中。
解构赋值是一种从数组或对象中提取值并赋给变量的语法。在这种情况下,使用了数组的解构赋值,并且使用了 Rest 参数来收集剩余的元素。

我们再次以之前的对象来举例,这里不再对对象进行重写,如何需要学习可以翻看上几章的文章

const [pizza, , risotto,...others]=[...restaurant.mainMenu, ...restaurant.starterMenu];
console.log(pizza, risotto, others);

在这里插入图片描述

注:rest参数只会收集最后一个参数之后的,被跳过的被不会收集!

我们之前的有一个对象是关于工作日和周末的时间点,当然rest对于对象同样适用,如果我们想要除了周六之外的工作日时间,我们可以这么做

const {sat, ...weekdays} = restaurant.openingHours;
console.log(weekdays);

在这里插入图片描述

当然,我们也可以使用rest参数也帮我们实现一写功能上的东西,例如将给定的一串数字求和

const add = function(...numbers) {
  let sum = 0;
  for(let i = 0;i < numbers.length;i++)sum+=numbers[i];
  console.log(sum);
}

add(2,5);
add(5,1,12,4,1);
add(5,1,5,7,1,6,5,4,1,2,3);

在这里插入图片描述

const x = [23,5,7];
add(...x);

当然,我们也可以通过展开运算符的方式去进行计算;

之前,我们使用展开运算符去给一个函数传递多个参数,当然rest也可以实现类似的功能

  orderPizza: function(mainIngredient, ...ohterIngredients) {
    console.log(mainIngredient);
    console.log(ohterIngredients);
  }

这是一个制作披萨的过程,需要我们给他提供一个原材料

restaurant.orderPizza('mushrooms','onion','olives','spinach');

在这里插入图片描述

这样我们也可以通过rest参数去函数传递参数,使得函数达到预期的功能!

总结

展开运算符用于将可迭代对象展开为独立的值,而Rest参数用于将多个参数收集到一个数组中。展开运算符可以用于多种上下文,而Rest参数只能作为函数的最后一个参数。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值